Testing the function triggered by the "(window:resize)" event in Angular 2
11,332
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. ;)
Related videos on Youtube
![ed-tester](https://i.stack.imgur.com/7qTEh.jpg?s=256&g=1)
Author by
ed-tester
Updated on November 28, 2020Comments
-
ed-tester over 3 years
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>
-
Winter Soldier over 7 yearscould you confirm if the div "topnav" is visible in the body? Has your fixture added it onto your page?
-
ed-tester over 7 years@WinterSoldier: Thanks, I now have added what shows up in the inspector above.
-
Winter Soldier over 7 yearsNow could you try replacing the heroEl.triggerEventhandler() with window.dispatchEvent(new Event('resize')); as mentioned here
-
dibbledeedoo about 7 yearsI 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!!
-
oooyaya about 7 yearsHow about testing it, given a specific height or width?
window.resizeTo
doesn't seem to invoke the handler and you can't setinnerWidth
on the readonlycurrentTarget
.
-