How do I trigger a ngModel model update in an Angular 2 unit test?

Question

I am attempting to test a component containing a text input element. I want to verify that the state of the component changes as expected when the value of the text input changes. The text input, of course, utilizes the ngModel directive (two-way binding).

Although the component works fine at runtime, I'm having trouble creating a valid, passing test. I have posted what I think should work below, and the test result following 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's 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 to the input event to get notified about changes:

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

For other input elements other events might be used (checkbox, radio, option,...).