Unit testing 如何在Angular-cli 4单元测试中模拟输入的向上键事件

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

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

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

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

---

有什么想法吗？

你应该创建一个活动

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;

---

希望它有帮助

我的案例值为空，我必须明确定义它：

function generateKeyUpEvent(value: string): KeyboardEvent {
    const event: KeyboardEvent = new KeyboardEvent('keyup', { bubbles: true, cancelable: true });
    Object.defineProperty(event, 'target', { value: { value } });
    return event;
}

然后在我的测试用例中发送：

component.input.nativeElement.dispatchEvent(generateKeyUpEvent('a'));