Testing the function triggered by the "(window:resize)" event in Angular 2

Question

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.

Here is my HTML:

<div id="topnav" 
     class="navbar navbar-graylight header-width" 
     role="banner" 
     (window:resize)="onResize($event)"></div>

Here is my onResize() Function:

@Component({
  selector: "main-header",
  templateUrl: "main-header.component.html",
})
export class MainHeaderComponent {

  public itWasTriggered = false;

  public onResize(event) {
    this.itWasTriggered = true;
  }
}

Here is my Test:

it("Why is onResize() not being ran", () => { 
   const heroEl = fixture.debugElement.query(By.css(".navbar-graylight"));
   heroEl.triggerEventHandler("window:resize", null); 
   expect(comp.itWasTriggered).toBe(true);
});

This is what shows up in the inspector:

<div _ngcontent-a-1="" class="navbar navbar-graylight header-width" id="topnav" role="banner">
  <!--template bindings={}-->
  <!--template bindings={}-->
</div>

could you confirm if the div "topnav" is visible in the body? Has your fixture added it onto your page? — Winter Soldier, Nov 15 '16 at 19:30
@WinterSoldier: Thanks, I now have added what shows up in the inspector above. — ed-tester, Nov 16 '16 at 15:42
Now could you try replacing the heroEl.triggerEventhandler() with window.dispatchEvent(new Event('resize')); as mentioned [here](http://stackoverflow.com/questions/1818474/how-to-trigger-the-window-resize-event-in-javascript) — Winter Soldier, Nov 16 '16 at 22:07
I have my resize event handling set up somewhat differently (Observable.fromEvent(window, 'resize')...) but was having the same testing issue. I can confirm that @WinterSoldier's suggestion of window.dispatchEvent(new Event('resize')); did resolve the testing issue for me. Thanks!! — dibbledeedoo, Apr 14 '17 at 18:36
How about testing it, given a specific height or width? `window.resizeTo` doesn't seem to invoke the handler and you can't set `innerWidth` on the readonly `currentTarget`. — oooyaya, May 30 '17 at 01:40

Анна · Answer 1 · 2018-11-28T06:27:58.000

I had the same problem and I solved it using a Spy on the function triggered by the resize event. Thus, you could do something like this:

  it('should trigger onResize method when window is resized', () => {
    const spyOnResize = spyOn(component, 'onResize');
    window.dispatchEvent(new Event('resize'));
    expect(spyOnResize).toHaveBeenCalled();
  });

This would be a clearer as you wouldn't need to establish local variables to detect if it was triggered. ;)

score 0 · Answer 2 · answered Aug 31 '18 at 17:43

I had the same problem and tried a few different things. This will get it to resize event to fire, but will not set the height or width:

window.dispatchEvent(new Event('resize'));

No need for any includes, just use it instead of:

heroEl.triggerEventHandler("window:resize", null);

Testing the function triggered by the "(window:resize)" event in Angular 2

2 Answers2

Linked