Angular unit test input value

Question

I have been reading official Angular2 documentation for unit testing (https://angular.io/docs/ts/latest/guide/testing.html) but I am struggling with setting a component's input field value so that its reflected in the component property (bound via ngModel). The screen works fine in the browser, but in the unit test I cannot seem to be able to set the fields value.

I am using below code. "fixture" is properly initialized as other tests are working fine. "comp" is instance of my component, and the input field is bound to "user.username" via ngModel.

it('should update model...', async(() => {
    let field: HTMLInputElement = fixture.debugElement.query(By.css('#user')).nativeElement;
    field.value = 'someValue'
    field.dispatchEvent(new Event('input'));
    fixture.detectChanges();

    expect(field.textContent).toBe('someValue');
    expect(comp.user.username).toBe('someValue');
  }));

My version of Angular2: "@angular/core": "2.0.0"

Solution 1

Inputs don't have textContent, only a value. So expect(field.textContent).toBe('someValue'); is useless. That's probably what's failing. The second expectation should pass though. Here's a complete test.

@Component({
  template: `<input type="text" [(ngModel)]="user.username"/>`
})
class TestComponent {
  user = { username: 'peeskillet' };
}

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

  it('should be ok', async(() => {
    let fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      let input = fixture.debugElement.query(By.css('input'));
      let el = input.nativeElement;

      expect(el.value).toBe('peeskillet');

      el.value = 'someValue';
      el.dispatchEvent(new Event('input'));

      expect(fixture.componentInstance.user.username).toBe('someValue');
    });
  }));
});

The important part is the first fixture.whenStable(). There is some asynchronous setup with the forms that occurs, so we need to wait for that to finish after we do fixture.detectChanges(). If you are using fakeAsync() instead of async(), then you would just call tick() after fixture.detectChanges().

Solution 2

Just add

fixture.detectChanges();

fixture.whenStable().then(() => {
  // here your expectation
})

Solution 3

Use your expect/assert within the whenStable.then function like this:

component.label = 'blah';
fixture.detectChanges();

fixture.whenStable().then(() => {
    expect(component.label).toBe('blah');
}

Comments

[Zyga]

mine wasnt working even without the first 'expect' actually. But yours is working fine thankfully, no idea why tho, I assume its because its after whenStable() is resolved? Thanks for the help anyway.

[Paul Samsotha]

If you were setting up the component in the beforeEach, making the beforeEach async, then calling fixture.detectChanges after creating the component, would probably work with the code above without the need to call whenStable. If you did this with the code above you can get rid of everything except for what's in the then callback. I think that would work also. The async beforeEach should pretty much do the same thing that whenStable would do, which is wait for the async tasks to complete before exiting the beforeEach

[Kieran]

fixture.whenStable().then(() => { - was the missing bit for me thanks.

[Jacob Stamm]

...peeskillet?

[Paul Samsotha]

@JacobStamm yeah? That was my SO username before I changed it to my real name.

[Ambroise Rabier]

In case you wrongly use el.dispatchEvent (or anything else), the test will still pass but throw inside the then closure. You can add .catch( e => { expect(e).toBeFalsy(); }); to make the test fail in case you do something like el.dispatchEvent('blur');.

[andy mccullough]

I was using the input as a filter for a table, in order to test the table had the correct filtered results, I also had to use whenStable(), thanks!

[Adam Hughes]

Is it fair to say it's a good idea to always use fixture.whenStable() in every test? Like as a noob is it a good idea or only use in certain cases?