title: Angular jasmine test not able to trigger Observable created with fromEvent rxjs operator
body: <p>I have a simple case. The standard <code>AppComponent</code> of an Angular app contains a <code>ChildComponent</code> which is defined in its own module <code>ChildModule</code>.</p>
  
  <p>The template of <code>ChildComponent</code> is very simple</p>
  
  <pre><code>&lt;div class="child" (click)="testClick($event)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><code>ChildComponent</code> has an even simpler <code>testClick(event)</code> method that just logs a message on the console.</p>
  
  <pre><code>testClick(event) {
      console.log(event);
  }
  </code></pre>
  
  <p>Now I want to build a test on <code>AppComponent</code> simulating a click on <code>ChildComponent</code>.</p>
  
  <p>This is the code of the test</p>
  
  <pre><code>describe('AppComponent', () =&gt; {
    let fixture: ComponentFixture&lt;AppComponent&gt;;
    let app: AppComponent;
    let child: DebugElement;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        imports: [ ChildModule ],
        declarations: [
          AppComponent
        ],
      }).compileComponents();
    }));
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(AppComponent);
      app = fixture.debugElement.componentInstance;
      child = fixture.debugElement.query(By.css('.child'));
      fixture.detectChanges();
    });
  
    it(`should create the child'`, async(() =&gt; {
      expect(child).toBeTruthy();
    }));
  
    it(`clicks on the child and the relative Observable emits`, async(() =&gt; {
      setTimeout(() =&gt; {
        child.triggerEventHandler('click', 'clicked');
      }, 100);
  
    }));
  
  });
  </code></pre>
  
  <p>The tests work and in particular the second test prints the <code>clicked</code> message on the console, as expected.</p>
  
  <p>Now I complicate a bit <code>ChildComponent</code>. I want to create an Observable on the <code>click</code> event using the <code>fromEvent</code> operator and <code>ViewChild</code>.</p>
  
  <p>So the code becomes</p>
  
  <pre><code>export class ChildComponent implements AfterViewInit {
    @ViewChild('child') private childElement: ElementRef;
  
    ngAfterViewInit() {
      const testClick$ = fromEvent(this.childElement.nativeElement, 'click');
      testClick$.subscribe(d =&gt; console.log('test click in child', d));
    }
  }
  </code></pre>
  
  <p>I launch the development server with <code>ng serve</code> and I see 2 messages printed on the console, one by the <code>testClick</code> method and one by the subscription of the <code>testClick$</code> Observable.</p>
  
  <p>If I run now the same tests as before, I expect to see also the same two messages printed on the console. On the contrary I see only the message printed by the <code>testClick</code> method. The message of the subscription, i.e. <code>'test click in child'</code>, does not appear, which means that the Observable <code>testClick$</code> does not emit when <code>child.triggerEventHandler('click', 'clicked');</code> is executed.</p>
  
  <p>How can I make Observables created with <code>fromEvent</code> work in <strong>jasmine</strong> tests? What am I doing wrong?</p>