How to run ngModel model update in Angular 2 unit test?

Question

I am trying to test a component containing a text input element. I want to check that the state of the component changes as expected when the value of the text input changes. Of course, text input uses the ngModel directive (two-way binding).

Despite the fact that the component works fine at runtime, I had a problem with creating a valid passing test. I posted what I think should work below, and the test result after that.

What am I doing wrong?

TEST:

import {Component} from 'angular2/core'; import {describe, it, injectAsync, TestComponentBuilder} from 'angular2/testing'; import {FORM_DIRECTIVES} from 'angular2/common'; import {By} from 'angular2/platform/common_dom'; class TestComponent { static get annotations() { return [ new Component({ template: '<input type="text" [(ngModel)]="name" /><p>Hello {{name}}</p>', directives: [FORM_DIRECTIVES] }) ] } } describe('NgModel', () => { it('should update the model', injectAsync([TestComponentBuilder], tcb => { return tcb .createAsync(TestComponent) .then(fixture => { fixture.nativeElement.querySelector('input').value = 'John'; const inputElement = fixture.debugElement.query(By.css('input')); inputElement.triggerEventHandler('input', { target: inputElement.nativeElement }); fixture.detectChanges(); expect(fixture.componentInstance.name).toEqual('John'); }); })); }); 

OUTPUT:

 Chrome 45.0.2454 (Mac OS X 10.10.5) NgModel should update the model FAILED Expected undefined to equal 'John'. at /Users/nsaunders/Projects/ng2-esnext-seed/src/test/ngmodel.spec.js!transpiled:41:52 at ZoneDelegate.invoke (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:322:29) at Zone.run (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:218:44) at /Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:567:58 at ZoneDelegate.invokeTask (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:355:38) at Zone.runTask (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:254:48) at drainMicroTaskQueue (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:473:36) at XMLHttpRequest.ZoneTask.invoke (/Users/nsaunders/Projects/ng2-esnext-seed/node_modules/angular2/bundles/angular2-polyfills.js:425:22) 

Answer 1

Here is a way to do it:

 import {Component} from 'angular2/core'; import {describe, it, inject, fakeAsync, tick, TestComponentBuilder} from 'angular2/testing'; import {FORM_DIRECTIVES} from 'angular2/common'; class TestComponent { static get annotations() { return [ new Component({ template: '<input type="text" [(ngModel)]="name" /><p>Hello {{name}}</p>', directives: [FORM_DIRECTIVES] }) ] } } describe('NgModel', () => { it('should update the model', inject([TestComponentBuilder], fakeAsync(tcb => { let fixture = null; tcb.createAsync(TestComponent).then(f => fixture = f); tick(); fixture.detectChanges(); let input = fixture.nativeElement.querySelector('input'); input.value = 'John'; let evt = document.createEvent('Event'); evt.initEvent('input', true, false); input.dispatchEvent(evt); tick(50); expect(fixture.componentInstance.name).toEqual('John'); }))); }); 

Answer 2

NgModel listens for the input event to receive change notifications:

 dispatchEvent(inputElement, "input"); tick(); 

For other input elements other events can be used (flag, radio, option, ...).

Answer 3

I processed it like this:

 import {TestBed, ComponentFixture, async} from "@angular/core/testing"; import {dispatchEvent} from "@angular/platform-browser/testing/browser_util"; import {FormsModule} from "@angular/forms"; import {By} from "@angular/platform-browser"; import {DebugElement} from "@angular/core"; describe('my.component', () => { let comp: MyComp, fixture: ComponentFixture<MyComp>; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [FormsModule], declarations: [ MyComp ] }).compileComponents().then(() => { fixture = TestBed.createComponent(MyComp); comp = fixture.componentInstance; fixture.detectChanges(); }); }) ); it('should handle inputs', () => { const sendInputs = (inputs: Array<DebugElement>) => { inputs.forEach(input => { dispatchEvent(input.nativeElement, 'input'); }); fixture.detectChanges(); return fixture.whenStable(); }; let inputs: Array<DebugElement> = fixture.debugElement.queryAll(By.css('input')); // set username input value inputs[0].nativeElement.value = "Username"; // set email input value inputs[1].nativeElement.value = "Email"; sendInputs(inputs).then(() => { // emit click event to submit form fixture.nativeElement.querySelectorAll('button')[0].click(); expect(comp.username).toBe("Username"); expect(comp.email).toBe("Email"); }); }); }); 

And my html image looks like this:

 <form (ngSubmit)="submit()"> <input type="text" name="username" class="form-control" placeholder="username" required [(ngModel)]="username"> <input type="email" name="email" class="form-control" placeholder="email" required [(ngModel)]="email"> <button type="submit" class="btn btn-primary block full-width mb">Submit</button> </form> 

I also suggest checking out the source code testing of the corners, which really helped me: form tests