角度2單元測試：如何測試鍵盤輸入

Question

我正在嘗試為鍵盤輸入編寫單元測試。 在我的組件中，我具有此功能來捕獲鍵盤事件：

@HostListener('window:keydown', ['$event'])
  keyboardInput(event: any){
    if(event.code.toLowerCase()==="escape" && this.formProps.ausgeklappt){
      this.closeForm();
      } else if(event.code.toLowerCase()==="enter" && this.dayData.isSelected && !this.formProps.ausgeklappt) {
        console.log("enter wurde gedrückt " + this.dayData.day);
        this.handleHeaderClick();
    }
  }

我試圖模擬“逃生”事件，但失敗了。 我的component.spec.ts看起來像這樣：

it('should trigger escape event', () => {
    component.formProps.ausgeklappt = true;
    fixture.detectChanges();
    let spy = spyOn(component, "closeForm");
    const event = new KeyboardEvent("keypress",{
      "key": "escape"
    });
    fixture.nativeElement.dispatchEvent(event)

    component.keyboardInput(event);
    expect(spy).toHaveBeenCalled();
  });

我不知道如何解決這個問題，感謝您的幫助...

Answer 1

我不得不將其更改為異步測試。 感謝@peeskillet！ 另外我還必須將"key": "escape"更改為"code": "ESCAPE"

it('should trigger escape event', async(() => {
        component.formProps.ausgeklappt = true;
        fixture.detectChanges();
        let spy = spyOn(component, "closeForm");
        const event = new KeyboardEvent("keypress",{
          "code": "ESCAPE",
        });
        fixture.nativeElement.dispatchEvent(event);

        component.keyboardInput(event);
        expect(spy).toHaveBeenCalled();
      }));