title: Testing two-way binding with ngModel in Angular2
body: <p>I've read the documentation for testing two-way binding in Angular2. All examples are simple, too simple, actually. </p>
  
  <p>It seems like they only test the out-binding...</p>
  
  <p>I'll post some code to illustrate:</p>
  
  <pre><code>import { Component, Input } from "@angular/core";
  import { ComponentFixture, async, TestBed, tick, fakeAsync } from 
  "@angular/core/testing";
  import { FormsModule } from "@angular/forms";
  import { By } from "@angular/platform-browser";
  
  @Component({
      selector: 'test',
      template: `
          &lt;input type="text" [(ngModel)]="myValue" /&gt;
          &lt;div&gt;{{ myValue }}&lt;/div&gt;
      `
  })
  class TestComponent {
      @Input() myValue: string
  }
  
  describe('Example', () =&gt; {
      let component: TestComponent
      let fixture: ComponentFixture&lt;TestComponent&gt;
  
      beforeEach(async(() =&gt; {
          TestBed.configureTestingModule({
              declarations: [TestComponent],
              providers: [],
              imports: [FormsModule]
  
          })
              .compileComponents()
      }))
  
      beforeEach(() =&gt; {
          fixture = TestBed.createComponent(TestComponent)
          component = fixture.componentInstance
  
          fixture.detectChanges()
      })
  
      it('should test two-way binding by setting the component member', 
          fakeAsync(() =&gt; {
  
              const testValue = 'Component member test'
  
              component.myValue = testValue // Should be the correct way to 
              test ngModel
  
              tick();
              fixture.detectChanges();
  
              // Assertion error: Expected '' to equal 'Component member test'
              // Why wasn't the value set in the textbox?
              expect(fixture.debugElement.query(By.css('input'))
  .nativeElement.value).toEqual(testValue)
  
              //Yeah, the bananas are working. We have out-binding
              expect(fixture.debugElement
                  .query(By.css('div'))
                  .nativeElement
                  .textContent
              ).toEqual(testValue);
      }))
  
      it('should test two-way binding by setting value directly on the native 
  element. But that just tests the out-binding', fakeAsync(() =&gt; {
              const testValue = 'NativeElement test'
  
              let element = 
  fixture.debugElement.query(By.css('input')).nativeElement;
              element.value = testValue // this tests only the out-binding
              element.dispatchEvent(new Event('input'));
  
              tick();
              fixture.detectChanges();
  
              //of course this is Ok, we just set it directly
              expect(fixture.debugElement.query(By.css('input'))
  .nativeElement.value).toEqual(testValue)
  
              //Yeah, the bananas are working. We have out-binding
              expect(fixture.debugElement
                  .query(By.css('div'))
                  .nativeElement
                  .textContent
              ).toEqual(testValue);
      }))
  })
  </code></pre>
  
  <p>So is there a way actually test the component by setting myValue? I think that I am missing something...</p>