Angular 2 Testing Input Box Binding

Question

I can't seem to test an input box bound to an Angluar2 model. I'm a little new to this so please bear with me.

I have a very basic Angular2 component which contains an inputbox bound to a model.

<form>
    <input  type="text" [(ngModel)]="searchTerm" name="termsearchTerm" (keyup)="search()"  value=""/>
</form>

Here's the code behind:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'sc-search',
    templateUrl: 'search.component.html'
})

export class SearchComponent {
    @Input() data: any;
    @Output() onSearchTermChanged = new EventEmitter<string>();
    private searchTerm: string;

    search() {
        this.onSearchTermChanged.emit(this.searchTerm);
    }
}

When running the following test keep getting Expected undefined to equal 'John'. I'm expecting the test to pass.

 searchableHierarchyComponentFixture.detectChanges();

    let termInputDbg = searchableHierarchyComponentFixture.debugElement.query(By.css('input[name="termsearchTerm"]'));
    let input = searchableHierarchyComponentFixture.nativeElement.querySelector('input');

    input.value = 'John';

    let evt = document.createEvent('Event');
    evt.initEvent('keyup', true, false);

    termInputDbg.triggerEventHandler('keyup', null);
    input.dispatchEvent(evt);


    tick(50);
    searchableHierarchyComponentFixture.detectChanges();
    searchableHierarchyComponentFixture.whenStable();
    expect(searchableHierarchyComponentFixture.componentInstance.searchTerm).toEqual('John');

Paul Samsotha · Accepted Answer · 2017-02-28 14:55:21Z

5

So a couple things:

You need to call tick after the component is created. Not completely sure, but I think the model binding happens asynchronously. Without ticking, the test will fail.
The directive listens for the input event, not the keyup. When the input event occurs, the directive updates the bindings.

Here's a complete test (also on Plunker)

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

@Component({
  selector: 'test',
  template: `
    <form>
      <input type="text" [(ngModel)]="query" name="query" />
    </form>
  `
})
class TestComponent {
  query: string;
}

describe('TestComponent: ngModel', () => {

  let fixture;
  let component;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [TestComponent]
    });
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
  });

  it('should change the value', fakeAsync(() => {
    let input = fixture.debugElement.query(By.css('input')).nativeElement;

    fixture.detectChanges();
    tick();

    expect(component.query).toBeFalsy();

    input.value = 'Hello World';
    input.dispatchEvent(new Event('input'));
    tick();

    expect(component.query).toBe('Hello World');

  }));
});

See also

When in doubt, sometimes the best place to look for examples is the source code tests

answered Feb 28, 2017 at 14:55

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

K-Dawg Over a year ago

Fantastic answer. Thank you!

Janatbek Over a year ago

Hey guys, like an answer and the question itself. but what is tick function here? I have same situation now. and want to test ngModel bound to the input. do I need that tick()?

Paul Samsotha Over a year ago

@JanatbekSharsheyev For input test, yes you will need it. If you're not sure what it is , see the angular docs for testing. There's a section on asynchronous testing

mamacdon Over a year ago

Paul's link has moved here github.com/angular/angular/blob/master/packages/forms/test/…

Collectives™ on Stack Overflow

Angular 2 Testing Input Box Binding

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related