title: Unit testing events emitted from stencilJS components in angular
body: <p>I have a angular component, inside the template I have a stencilJS component which is emitting an event which I'm handling in the parent component. I'm trying to write unit-test cases for the &quot;<code>handleEvent</code>&quot; method but I couldn't get the component instance of the component by using <code>By.directive(platformNavbarComponent)</code>, <code>spyOn().and.callFake(...)</code> also did not work or could find any information relating to my problem.</p>
  <p>Parent.component.html</p>
  <pre><code>&lt;cel-platform-navbar 
   (platformSelected)=&quot;handleEvent($event)&quot;&gt;
  &lt;/cel-platform-navbar&gt;
  </code></pre>
  <p>Parent.component.ts</p>
  <pre><code>handleEvent(ev) {
   console.log(ev)
  }
  </code></pre>
  <p>this is the test case I have written and I'm getting the following error</p>
  <blockquote>
  <p>Expected spy handleEvent to have been called</p>
  </blockquote>
  <p>this is the test case</p>
  <pre><code>fit('should call handler for &quot;platformSelected&quot; event', () =&gt; {
      const event = new CustomEvent('platformSelected', {detail:{navigationUrl: 'abc'}});
      
      fixture.detectChanges();
          
      const spy = spyOn(component, 'handleEvent').and.callThrough();
          
      window.dispatchEvent(event);
      fixture.detectChanges();
          
      expect(spy).toHaveBeenCalled();
         
    });
  </code></pre>