Question

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

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

然而，在angular-cli单元测试或控制台中执行此操作并不会在我的component中触发此功能，https://github.com/js-cookie/js-cookie通过以下方式响应关键事件：

  @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;

最后发送密钥启动事件

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

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

2 个答案: