unit-testing - 如何从 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;

希望能帮助到你

Answer 2

我的情况不知何故价值是空的，我必须明确定义它：

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'));