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
– Winter Soldier, Commented Nov 15, 2016 at 19:30
@WinterSoldier: Thanks, I now have added what shows up in the inspector above. — ed-tester
– ed-tester, Commented Nov 16, 2016 at 15:42
Now could you try replacing the heroEl.triggerEventhandler() with window.dispatchEvent(new Event('resize')); as mentioned here — Winter Soldier
– Winter Soldier, Commented Nov 16, 2016 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
– dibbledeedoo, Commented Apr 14, 2017 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
– oooyaya, Commented May 30, 2017 at 1:40

Anya · Accepted Answer · 2018-11-28 06:27:58Z

30

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

edited Nov 28, 2018 at 6:27

answered Nov 27, 2018 at 16:37

Anya

1,44817 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pete B. · Accepted Answer · 2018-08-31 17:43:57Z

0

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

answered Aug 31, 2018 at 17:43

Pete B.

3,2966 gold badges27 silver badges41 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related