使用 Angular 进行 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();
  }) 
});