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事件触发的函数使用了Spy进行了解决。因此，您可以执行以下操作：

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

测试Angular 2中“（window：resize）”事件触发的函数

2 个答案: