【问题标题】:angular 2 unit test: How to test keyboard inputangular 2 单元测试:如何测试键盘输入
【发布时间】:2017-07-13 12:37:47
【问题描述】:

我正在尝试为键盘输入编写单元测试。在我的组件中,我有这个函数来捕获我的键盘事件:

@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();
  });

我不知道如何解决这个问题,我很感谢你的每一个帮助......

【问题讨论】:

  • 使测试异步。

标签: angular unit-testing


【解决方案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();
      }));

【讨论】:

  • 重要部分:您还必须调用处理程序本身component.keyboardInput(event),仅调度事件是不够的。
  • 正因为如此,我对这个解决方案持怀疑态度
猜你喜欢
  • 1970-01-01
  • 2016-12-29
  • 2018-04-11
  • 2017-06-28
  • 1970-01-01
  • 1970-01-01
  • 2017-06-03
  • 1970-01-01
相关资源
最近更新 更多