@HostListener转义键事件的角度单元测试用例

Question

我在我的组件中有以下代码

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
if (event.key === 'Escape') {
  this.showDialogPopup = false;
  this.showPortfolioDialogPopup = false;
}
}

我使用ngneat spectator作为我的单元测试框架，下面是我的测试用例，需要修改。

it('Close popups on Escape key press', () => {
const keyboardEvent = createKeyboardEvent('keydown', 'Escape');
const spy = spyOn(keyboardEvent, 'preventDefault'); 
spectator.component.showPopup(false);  
spectator.component.showPortfolioPopup(false);
expect(spectator.component.showPortfolioDialogPopup).toBeFalsy();
expect(spectator.component.showDialogPopup).toBeFalsy();
});

在这里，我不能理解如何模拟退出键事件。任何帮助都将不胜感激。谢谢。

Answer 1

你就快到了，就差最后一步了。您需要使用新创建的键盘事件调用onKeydownHandler方法：

it('Close popups on Escape key press', () => {
  const keyboardEvent = createKeyboardEvent('keydown', 'Escape');
  spectator.component.onKeydownHandler(keyboardEvent);
  expect(spectator.component.showPortfolioDialogPopup).toBeFalsy();
  expect(spectator.component.showDialogPopup).toBeFalsy();
});