title: Testing the function triggered by the "(window:resize)" event in Angular 2
body: <p>I am attempting to test a function (with Karma) that is triggered by a window resize event. Everything works normally in the real world, but when I try to manually trigger the event in the test the function never gets called. This is resulting in a failed test.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="topnav" 
       class="navbar navbar-graylight header-width" 
       role="banner" 
       (window:resize)="onResize($event)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is my onResize() Function:</p>
  
  <pre><code>@Component({
    selector: "main-header",
    templateUrl: "main-header.component.html",
  })
  export class MainHeaderComponent {
  
    public itWasTriggered = false;
  
    public onResize(event) {
      this.itWasTriggered = true;
    }
  }
  </code></pre>
  
  <p>Here is my Test: </p>
  
  <pre><code>it("Why is onResize() not being ran", () =&gt; { 
     const heroEl = fixture.debugElement.query(By.css(".navbar-graylight"));
     heroEl.triggerEventHandler("window:resize", null); 
     expect(comp.itWasTriggered).toBe(true);
  });
  </code></pre>
  
  <p>This is what shows up in the inspector:</p>
  
  <pre><code>&lt;div _ngcontent-a-1="" class="navbar navbar-graylight header-width" id="topnav" role="banner"&gt;
    &lt;!--template bindings={}--&gt;
    &lt;!--template bindings={}--&gt;
  &lt;/div&gt;
  </code></pre>