如何在Angular 2+单元测试中触发键盘事件？

Question

我有一个Angular 4组件，可以监听用户按下箭头键的情况。 我已将其重新创建为计数器的演示，可以使用向上和向下键递增或递减。

export enum KEY_CODE {
  RIGHT_ARROW = 39,
  LEFT_ARROW = 37
};

export class AppComponent {    
  counter = 0;

 @HostListener('window:keyup', ['$event'])
  handleKeypress(event: KeyboardEvent) {
    if (event.keyCode === KEY_CODE.UP_ARROW) {
      this.counter++;
    } else if (event.keyCode === KEY_CODE.DOWN_ARROW) {
      this.counter--;
    }
  }

}

我在单元测试中检查此行为：

  it('should increment when you push the "up" key', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;

    expect(app.counter).toBe(0);
    let upKeyPress = {keyCode: KEY_CODE.UP_ARROW};
    fixture.debugElement.triggerEventHandler('keyup', upKeyPress);
    expect(app.counter).toBe(1);
  });

该测试失败。 计数器不增加。 这是为什么？

柱塞： https ：//plnkr.co/edit/sNtQMH82Tk2siKueBDT5 ？ p = preview

Answer 1

尝试这个：

fixture.debugElement.triggerEventHandler('keyup.uparrow', {}});

Answer 2

我还没有找到一种通过debugElement做到这一点的方法，但是我使用window对象使其工作了：

let upPress = new KeyboardEvent('keyup', {code: 'ArrowUp'});
window.dispatchEvent(upPress);

Answer 3

考虑，我有类名为“ .search-input”的输入字段，然后

const element = fixture.debugElement.query(By.css('.search-input'));
element.nativeElement.dispatchEvent(new KeyboardEvent('keyup', {code: 'ArrowUp'}));
fixture.detectChanges();

这就是我的方法，对我有用。