我正在尝试测试由窗口调整大小事件触发的函数(使用 Karma)。在现实世界中一切正常,但是当我尝试在测试中手动触发事件时,该函数永远不会被调用。这会导致测试失败。
这是我的 HTML:
<div id="topnav"
class="navbar navbar-graylight header-width"
role="banner"
(window:resize)="onResize($event)"></div>
这是我的 onResize() 函数:
@Component({
selector: "main-header",
templateUrl: "main-header.component.html",
})
export class MainHeaderComponent {
public itWasTriggered = false;
public onResize(event) {
this.itWasTriggered = true;
}
}
这是我的测试:
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);
});
这是检查器中显示的内容:
<div _ngcontent-a-1="" class="navbar navbar-graylight header-width" id="topnav" role="banner">
<!--template bindings={}-->
<!--template bindings={}-->
</div>
我遇到了同样的问题,我在调整大小事件触发的函数上使用 Spy 解决了它。因此,你可以这样做:
it('should trigger onResize method when window is resized', () => {
const spyOnResize = spyOn(component, 'onResize');
window.dispatchEvent(new Event('resize'));
expect(spyOnResize).toHaveBeenCalled();
});
这会更清楚,因为您不需要建立局部变量来检测它是否被触发。 ;)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)