如何在Angular -cli 4单元测试中模拟输入事件

Question

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

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

但是，在angular-cli单元测试或控制台中执行此操作不会在我的component中触发此功能，

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

通过以下方式响应关键事件：

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

有任何想法吗？

Answer 1

你应该创建一个事件

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

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

const inputElement = input.nativeElement;

然后引用前一个本机html元素

inputElement.value = 12;

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

inputElement.dispatchEvent(event);

最后发送密钥事件

debugElement = fixture.debugElement;

它会触发这个功能

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

qazxswpoi

希望能帮助到你