如何在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();

這就是我的方法，對我有用。