Angular2 +茉莉花事件對象

Question

我有這個簡單的方法需要測試：

  public onLayerContainerClick(event: Event): void {
    event.stopPropagation();
    event.preventDefault();
    if (event.srcElement.classList.contains('dpm-info__layerContainer')) {
     this.closeInfoLayer(event);
    }
  }

我的目標實際上是增加該組件的代碼覆蓋率。 如果我測試是這樣的：

  it( 'should close on info container click', () => {
    spyOn( component, 'onLayerContainerClick' );
    const el: DebugElement = fixture.debugElement.query( By.css( '.dpm-info__layerContainer' ) );
    el.triggerEventHandler( 'click', null );
    expect( component.onLayerContainerClick ).toHaveBeenCalled();
  } );

測試還可以，但是instanbul表示“功能未涵蓋”。 所以我想，我需要顯式調用該函數嗎？ 為此，我需要具有完整的事件對象，包括（至少）srcTarget屬性。 如何在單元測試中定義此類事件？

Answer 1

您必須在測試中使用模擬事件來調用該函數。 component.onLayerContainerClick({ srcElement: { value: 'mock_value' } });

然后寫下您的期望

expect( component.closeInfoLayer ).toHaveBeenCalled();

也許這個https://angular.io/guide/testing#triggereventhandler可能也有幫助

Answer 2

感謝estus和DrNio，我提出了這個測試，這使伊斯坦布爾的代碼覆蓋率感到滿意並且沒有任何類型問題：

  it( 'should close on info container click', () => {
    spyOn( component, 'closeInfoLayer' );
    const el: HTMLElement = fixture.debugElement.query(By.css('.dpm-info__layerContainer')).nativeElement;
    const mockEvent: Event = <Event><any>{
      srcElement: {
        classList: el.classList
      },
      stopPropagation: <any>( ( e: any ) => { /**/ }),
      preventDefault: <any>( ( e: any ) => { /**/ }),
    };

    component.onLayerContainerClick( mockEvent );
    expect( component.closeInfoLayer ).toHaveBeenCalled();
  } );