event.stopPropagation () в приложении Angular приводит к тайм-ауту жасмина

Question

В моем приложении Angular у меня есть два кликабельных элемента div, где один является дочерним элементом другого. Когда щелкается дочерний элемент div, я не хочу, чтобы инициировалось родительское событие click, поэтому я использую stopPropagation () для события click. Вот упрощенная версия того, что я делаю:

<div id="parent" (click)="parentClick($event)">
  Parent
  <div id="child" (click)="childClick($event)">
    Child
  </div>
</div>

Где childClick первая строка event.stopPropagation();

Нет проблем, все работает как задумано. Вы можете проверить код и демо здесь

---

Однако, когда я пытаюсь выполнить тест с жасмином, который нажимает на дочерний элемент div, тайм-ауты для жасмина. Похоже, жасмин по какой-то причине замерзает. Модульный тест выглядит так:

it(`Clicking child doesn't trigger parent`, () => {
        let childDe = fixture.debugElement.query(By.css('#child'));
        childDe.triggerEventHandler('click', { button: 0 });
        fixture.detectChanges();
        expect(component.lastClicked).toBe('child');
    });

Когда я запускаю его, Жасмин загружается очень долго и выводит это сообщение: Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

Если кто-нибудь знает, как создать модульный тест с жасмином в stackblitz, дайте мне знать, и я добавлю его.

Answer 1

Хотя я не полностью удовлетворен этим, я заставил его работать, используя nativeElement вместо debugElement и запустив функцию click для этого следующим образом:

it(`Clicking child doesn't trigger parent`, () => {
        let childEl = fixture.nativeElement.querySelector('#child');
        childEl.click();
        fixture.detectChanges();
        expect(component.lastClicked).toBe('child');
    });

Answer 2

Во-первых, я просто хочу убедиться, что ошибка и причина, которую вы представляете, связаны между собой. Ошибка Async callback was not invoked... обычно выдается, когда у вас есть аргумент done для функции, предоставленной it:

it('some test', (done) => { 
    ...
    done();
});

Ошибка возникает, когда done не вызывается через некоторое время. Однако, если у вас нет аргумента done, тест работает синхронно и не может асинхронно прерваться.

Поскольку предоставленный вами код не содержит аргумента done, я думаю, что эта ошибка может быть вызвана тестом, отличным от этого, и не имеет никакого отношения к распространению события.

Однако, если вы используете что-то вроде Protractor, все может стать немного сложнее, но это не было упомянуто в первоначальном вопросе.