如何在角度单元测试中测试文档单击

Question

我们有一个下拉组件，其下拉列表在任何外部单击时都会折叠。这实现为：

  @HostListener('document:click', ['$event'])
  public documentClick(event) {
    if (this.dropdownIsOpen && !event.clickedFromMe) {
      this.dropdownIsOpen = false;
    }
  }

如何测试此代码？使用 TestBed.createComponent 时，似乎只创建了组件，并且它不在任何文档中，那么如何模拟该组件外部的单击？

Answer 1

使用 document.dispatchEvent ：

 it('should handle document click', () => {
    component.dropdownIsOpen = true;
    document.dispatchEvent(new MouseEvent('click'));
    expect(component.dropdownIsOpen).toBe(false);
  });

Answer 2

它位于文档中。

只需使用

const compiled: HTMLElement = fixture.nativeElement;
compiled.ownerDocument.dispatchEvent(new Event('click'));

另一种方法是为测试组件创建一个夹具，该夹具在其模板中使用您的组件，例如一些同级按钮，然后单击此同级按钮。