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

我正在尝试为其编写测试（茉莉花），我使用以下模板创建了一个测试组件：

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

当我模拟.another元素的单击时，预期会调用this.clickOutside.emit()上的一个间谍，事实并非如此。我的测试如下：

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

这无法按预期方式运行，并且测试失败，并已调用预期的间谍发射。

如果

，则测试有效

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

被替换为

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

我的假设是单击不会使事件冒泡到文档中。我该如何模拟这种行为？

Answer 1

您的假设正确：

Event构造函数创建的事件不会冒泡默认。

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

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

角度指令测试；单击元素不会触发单击文档

1 个答案: