如何覆蓋 Angular 中 addEventListener 的單元測試用例 9

Question

如何覆蓋addEventListener內部代碼。

任何角度的組件.ts

openModalWithKeypress() {
  const div = this.elm.nativeElement.querySelector('div');
  div.addEventListener('keydown', e => {
    this.openModal(e);
  });
}

Answer 1

您可以在fakeAsync區域中執行單元測試。 然后，您需要在調度 keydown event之后調用tick() 。 這可能如下所示：

it('#keydown should open modal', fakeAsync(() => {

  // given
  spyOn(anyComponent, 'openModal') 
  const divElement = <HTMLDivElement> fixture.debugElement.nativeElement.querySelector('div');
  const event = new KeyboardEvent('keydown', { key: 'x' });

  // when
  divElement.dispatchEvent(event);
  tick();

  // then
  expect(anyComponent.openModal).toHaveBeenCalledWith(event);
}));