Angular的業力單元測試 事件監聽器

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

在（Event Listener）的一部分之后，我的代碼在單元測試中困擾我，我不是直接從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();
  }) 
});