Angular2 + Jasmine 事件对象

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，我提出了这个测试，它使 istanbul 代码覆盖率高，并且没有任何类型问题：

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