Angular Directive(指令)测试；单击元素不会触发单击文档

Question

我创建了一个指令，它检测是否有 mousedown 事件 outside 它所附加的元素。它是通过一个可观察对象完成的:

 @Output() clickOutside = new EventEmitter<void>();

 constructor(private elementRef: ElementRef) { }

 ngOnInit() {
    this.eventSubscription = fromEvent(document, 'mousedown')
      .subscribe((event: MouseEvent) => {
        if (!this.elementRef.nativeElement.contains(event.target)) {
          this.clickOutside.emit();
        }
      });
  }

我正在尝试为其编写一个测试 (jasmine)，我使用以下模板创建了一个测试组件:

<div class="container" clickOutside></div>
<div class="another"></div>

当我模拟点击 .another 元素时，在 this.clickOutside.emit() 上有一个 spy 应该被调用，但事实并非如此。我的测试看起来像这样:

spyOn(directive.clickOutside, 'emit');
elementWithoutDirective.nativeElement.dispatchEvent(new Event('mousedown'));
fixture.detectChanges();
expect(directive.clickOutside.emit).toHaveBeenCalled();

这没有按预期工作，测试失败并显示 Expected spy emit to have been called。

测试有效如果

elementWithoutDirective.nativeElement.dispatchEvent(new Event('mousedown'));

替换为

document.dispatchEvent(new Event('mousedown'));

我的假设是点击不会将事件冒泡到文档中。我如何为这种行为建模？

Answer 1

你的假设是对的:

the Event constructor creates an event that does not bubble by default.

要更改此行为，您可以传递第二个 eventInit参数:

new Event('mousedown', {bubbles: true})