angular - 如何在 Angular 单元测试中测试文档点击

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