title: Angular 2/4 component unit test click event does not trigger change
body: <p>I am trying to unit test an angular 2/4 component and want to see if the click on a button element will cause the wanted changes. However I can not get the click event triggered.</p>
  
  <p>The component</p>
  
  <pre><code>import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } 
  from '@angular/core';
  @Component({
      selector: 'input-filter',
      template: `
  &lt;div class="input-widget"&gt;
      &lt;div class="icon-filter"&gt;&lt;/div&gt;
      &lt;input
          type="text"
          [value]="value"
          (input)="filter.emit($event.target.value)"
          placeholder="... filter"/&gt;
      &lt;span (click)="clear()" class="clear icon-clear-field_S"&gt;&lt;/span&gt;
  &lt;/div&gt;
      `,
      changeDetection: ChangeDetectionStrategy.OnPush,
  })
  export class InputFilterComponent {
      @Input() value;
      @Output() filter = new EventEmitter(false);
      clear() {
          this.value = '';
          this.filterBoxes = [];
          this.filter.emit(this.value);
      }
  }
  </code></pre>
  
  <p>The test</p>
  
  <pre><code>import { TestBed } from '@angular/core/testing';
  import { FormsModule } from '@angular/forms';
  import { InputFilterComponent } from './input-filter.component';
  import { Component} from '@angular/core';
  const testValue = 'test1234';
  @Component({
   selector  : 'test-cmp',
   template  : `&lt;input-filter [value]="testValueC"&gt;&lt;/input-filter&gt;`,
  })
  class TestCmpWrapper {
      testValueC = testValue; // mock input
  }
  describe('input-filter.component', () =&gt; {
      let fixture;
      beforeEach(() =&gt; {
          TestBed.configureTestingModule({
              imports: [FormsModule],
              declarations: [TestCmpWrapper, InputFilterComponent],
          });
          fixture = TestBed.createComponent(TestCmpWrapper);
      });
      it('should clear on click', () =&gt; {
          let testHostComponent = fixture.componentInstance;
          const el = fixture.debugElement.nativeElement;
  
          // both methods to trigger click do not work
          el.querySelector('.clear').click(); 
          el.querySelector('.clear').dispatchEvent(new Event('click'));
  
          fixture.detectChanges();
          fixture.whenStable().then(() =&gt; {
              expect(el.querySelector('input').value).toBe('');
          })
      });
  });
  </code></pre>
  
  <blockquote>
    <p>HeadlessChrome 0.0.0 (Linux 0.0.0) input-filter.component should clear
    on click FAILED   Expected 'test1234' to be ''.</p>
  </blockquote>