Как проверить события изображения в Angular

Question

Допустим, у нас есть простой компонент, который выполняет некоторые действия с событием изображения

<img src="{{imageUrl}}" (error)="onImageError($event)" (load)="onImageLoad()" width="{{imageWidth}}">

Теперь я хочу проверить, были ли запущены обработчики этого события.

Я попробовал самый простой подход

const spyError = spyOn(component, 'onImageError').and.callThrough();

fixture.detectChanges();

expect(spyError).toHaveBeenCalled();

Это не сработало, потому что цикл событий находится вне стека выполнения JavaSctipy.Я попытался разрешить его с помощью asyn или fakeAsync, но это не помогло.

Единственное отработанное решение - использовать setTimeout внутри тестов, что мне не очень нравится.

Итак, мои вопросы

1. Должны ли мы вообще это проверить?Это выглядит как часть функциональности Angular / браузера.Я могу позвонить component.onImageError() напрямую в тесте.

2. Как правильно проверить, был ли вызван этот обработчик событий?

Answer 1

попробуйте это с помощью whenStable

 it('should trigger', async(() => {
  const spyError = spyOn(component, 'onImageError').and.callThrough();
  // add something here that can trigger error, like setting src property with an invalid path
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(spyError).toHaveBeenCalled();
  });
}));