title: How do I trigger a ngModel model update in an Angular 2 unit test?
body: <p>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).</p>
  
  <p>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.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>TEST:</p>
  
  <pre><code>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: '&lt;input type="text" [(ngModel)]="name" /&gt;&lt;p&gt;Hello {{name}}&lt;/p&gt;',
                  directives: [FORM_DIRECTIVES]
              })
          ]
      }
  }
  
  describe('NgModel', () =&gt; {
      it('should update the model', injectAsync([TestComponentBuilder], tcb =&gt; {
          return tcb
              .createAsync(TestComponent)
              .then(fixture =&gt; {
                  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');
              });
      }));
  });
  </code></pre>
  
  <p>OUTPUT:</p>
  
  <pre><code>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)
  </code></pre>