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>

Affiliate

could you confirm if the div "topnav" is visible in the body? Has your fixture added it onto your page? – Bogy

@WinterSoldier: Thanks, I now have added what shows up in the inspector above. – Affiliate

Now could you try replacing the heroEl.triggerEventhandler() with window.dispatchEvent(new Event('resize')); as mentioned here – Bogy

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!! – Leis

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. – Lith

Answer 1

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. ;)

Benildis

Answer 2

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); 

Helio