使用Angular | Event Listeners进行Karma单元测试

Question

考虑这部分代码：

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

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