如何从 Angular -cli 4 单元测试中的输入模拟按键事件

Question

在 vanilla JS 中，您可以通过执行以下操作来模拟输入的键：

testComponent.dispatchEvent(new Event("keyup"))

但是，在 angular-cli 单元测试或控制台中执行此操作不会在我的组件中触发此功能，该功能通过以下方式响应关键事件：

  @HostListener('keyup', ['$event'])
  onKeyUp(event: KeyboardEvent) {

有任何想法吗？

Answer 1

你应该创建一个事件

const event = new KeyboardEvent('keyup', {
      bubbles : true, cancelable : true, shiftKey : false
});

然后使用 css 选择器获取 debugElement 的引用

const input = debugElement.query(By.css('#id_of_element'));

然后引用上一个原生 html 元素

const inputElement = input.nativeElement;

将本机元素的值分配为 ，现在文本字段值包含 12。

inputElement.value = 12;

最后发送 key up 事件

inputElement.dispatchEvent(event);

它会触发该功能

不要忘记在每个之前添加以下行并确保您定义了 debugElement

debugElement = fixture.debugElement;

希望能帮助到你