HostListener 的单元测试 Angular

Question

我需要为@HostListener 创建单元测试，但我不知道如何编写它，因为它位于组件之上，

  @HostListener('document:click', ['$event']) onDocumentClick(event) {
    if (this.activeEvent) {
      this.activeEvent = '';
    } else {
      this.showList = false;
    }
    this.resetDropdown(event.target.id);
  }

为这种情况编写单元测试的最佳方法是什么？

Answer 1

你可以试试：

// feel free to change `body` to whatever you wish to send the click to
const body = fixture.nativeElement.querySelector('body');
body.click();
// see if `onDocumentClick` gets called that way

你有另一个选择，因为@HostListener已经被 Angular 测试过，你可以用你的onDocumentClick对象调用onDocumentClick 。

const resetSpy = spyOn(component, 'resetDropdown');
const mockedEvent = { target: { id: 'xyz' } };
component.onDocumentClick(mockedEvent);
expect(resetSpy).toHaveBeenCalledWith('xyz');