使用 Angular 进行 Karma 单元测试 |事件监听器答案

【问题标题】：Karma Unit Testing with Angular | Event Listeners使用 Angular 进行 Karma 单元测试 |事件监听器
【发布时间】：2019-01-09 17:40:27
【问题描述】：

考虑这部分代码：

      @ViewChild('amountSlider') amountSlider: any;
      @ViewChild('amountInput') amountInput: any;

      ** Some Code **

      setvariables()
        {
        const updateStep =  this.renderer.listen(this.amountInput.input.nativeElement, 'keydown', (evt) => {
          this.amountSlider.step = 1;
          const keyName = evt.key;
          if (keyName == 'Tab') {
            this.amountSlider.step = 100;
          }
        });
         const resetStep = this.renderer.listen(this.amountSlider.slider.nativeElement, 'mouseover', (evt) => {
          this.amountSlider.step = 100;
        });
  }

在（事件侦听器）的一部分之后，我的代码在单元测试中困扰着我我没有直接从我的 DOM 调用 keydown 或 mouseover。有人可以帮我编写单元测试来解决这个问题吗？？？

test.spec.ts

describe('setVariables', () => {
    it('makes expected calls', () => {
        const renderer2Stub: Renderer2 = fixture.debugElement.injector.get(Renderer2);
        spyOn(renderer2Stub, 'listen');
        comp.setVariables();
        expect(renderer2Stub.listen).toHaveBeenCalled();
    }) 
 });

【问题讨论】：

标签： angular typescript unit-testing karma-jasmine angular-services

【解决方案1】：

使用带有键码的 KeyboardEvent 尝试此操作

describe('setVariables', () => {
it('makes expected calls', () => {
    const renderer2Stub: Renderer2 = fixture.debugElement.injector.get(Renderer2);
    spyOn(renderer2Stub, 'listen');
    // for down arrow event for example 
    comp.setVariables();
     const event: Event = new KeyboardEvent('keydown', {
      'code': '40' 
     });
     window.dispatchEvent(event);
     fixture.detectChanges();
    expect(renderer2Stub.listen).toHaveBeenCalled();
  }) 
});

【讨论】：