title: angular2 unit test not detecting input change
body: <p>My problem is exactly same as <a href="https://stackoverflow.com/questions/36143859/how-do-i-trigger-a-ngmodel-model-update-in-an-angular-2-unit-test">How do I trigger a ngModel model update in an Angular 2 unit test?</a></p>
  
  <p>I must be doing something silly in my test. Could anyone point out any obvious errors that I'm overlooking </p>
  
  <p><strong>component</strong></p>
  
  <pre><code>    @Component({
    moduleId: module.id,
    selector: 'od-tree',
    templateUrl: 'tree.component.html',
    styleUrls: ['tree.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class TreeComponent implements OnInit, OnChanges, AfterViewChecked {
    @Input() allResources: { items: {} };
    @Input() resourceGroups = { items: {} };
    @Input() selectedNodes: ITree.SelectedNode[];
    @Input() showIcons: boolean;
    @Input() showCheckboxes: boolean;
    @Input() omitAncillaryDBs: boolean;
  
    @Output() selectNode = new EventEmitter&lt;any&gt;();
  
    searchResource$ = new Subject&lt;string&gt;();
    searchField = '';
    tabs = [
      { title: TABS.ALL_RESOURCES, active: true },
      { title: TABS.RESOURCE_GROUPS, active: false }
    ];
    inSearchMode = false;
    trees = {
      ALL_RESOURCES: {
        searchText: null,
        tree: []
      },
      RESOURCE_GROUPS: {
        searchText: null,
        tree: []
      }
    };
  
    private _allResourcesTreeState = [];
    private _resourceGroupsTreeState = [];
    private ancillaryDBList = ['App-Services', 'Documents', 'Extensions', 'Fab', 'Last-Login',
      'Meters', 'Modules', 'Schemas', 'Security', 'Triggers'];
  
    constructor(private _cd: ChangeDetectorRef) { }
  ...
  ...
  ...
  }
  </code></pre>
  
  <p><strong>template</strong></p>
  
  <pre><code>&lt;div class="input-with-icon"&gt;
          &lt;i class="icon-search"&gt;&lt;/i&gt;
          &lt;input type="text" [(ngModel)]="searchField" name="searchField" class="form-control" id="search-resources" placeholder="Search" (ngModelChange)="searchResource$.next(searchField)"&gt;
        &lt;/div&gt;
  ... (truncated)
  ....
  ....
  </code></pre>
  
  <p><strong>unit test</strong></p>
  
  <pre><code> describe('tree component', () =&gt; {
      //let activatedRoute: ActivatedRouteStub;
      let comp: TreeComponent;
      let fixture: ComponentFixture&lt;TreeComponent&gt;;
      let de: DebugElement;
      let el: HTMLElement;
  
  
      beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
          imports: [TreeModule],
        })
          .compileComponents();
      }));
  
      beforeEach(() =&gt; {
        fixture = TestBed.createComponent(TreeComponent);
        comp = fixture.componentInstance;
        de = fixture.debugElement;
        el = de.nativeElement;
        comp.ngOnInit();
        fixture.detectChanges();
      });
  
  
      it('should bind value to ngmodel',() =&gt; {
           let inputEl = de.query(By.css('input#search-resources'))
           inputEl.nativeElement.value = 'node';
           inputEl.triggerEventHandler('input', {target: inputEl.nativeElement});
           fixture.detectChanges();
           expect(comp.searchField).toEqual('node');
        });  
  
   // another approach 
     it('should filter resources when used in host component',fakeAsync(() =&gt; {
         let inputEl = de.query(By.css('input#search-resources'));
         inputEl.nativeElement.value = 'node';
         dispatchEvent('input', inputEl.nativeElement);
         tick();
         fixture.detectChanges();
         expect(de.queryAll(By.css('li.host-leaf:not([hidden])')).length).toEqual(2, 'should show filtered hosts');
      }));
  
      }
  </code></pre>