Угловая директивная проверка; щелчок по элементу не вызывает щелчок по документу

Question

Я создал директиву, которая определяет, было ли mousedown событие вне элемента, к которому он также присоединен. Это делается с помощью наблюдаемой:

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