测试Angular 2中由“（window：resize）”事件触发的功能

Question

我正在尝试测试由窗口调整大小事件触发的功能（使用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>

Answer 1

我遇到了同样的问题，我对resize事件触发的函数使用了间谍程序来解决。因此，您可以执行以下操作：

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

这将更加清晰，因为您无需建立局部变量来检测是否已触发它。;）

Answer 2

我遇到了同样的问题并尝试了一些不同的方法。这将使其调整要触发的事件的大小，但不会设置高度或宽度：

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

不需要任何包含，只需使用它而不是：

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