HostListener 的 Angular 單元測試（調整窗口大小）

Question

我有一個包含以下代碼的組件文件

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.width = event.target.innerWidth;
}

我想測試一下。 我在我的規范文件中嘗試了以下代碼。

window.dispatchEvent(new Event("resize");
expect(component.onResize).toHaveBeenCalled();

但它不起作用。 任何幫助將不勝感激。

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