Angular 7，Jasmine 代码覆盖不包含函数，而测试返回肯定

Question

我有一个在背景点击时关闭侧导航的功能：

 public closeSidenav() {
    this.sidenav.toggle();
 }

在 HTML 中：

<mat-sidenav-container (backdropClick)="closeSidenav()">

我正在以下测试中测试“backdropClick”事件：

it('should listen to a backdrop click and toggle the sidenav menu', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;

    app.ngOnInit();
    fixture.detectChanges();

    spyOn(app, 'closeSidenav');

    const backdrop = fixture.debugElement.query(By.css('div.mat-drawer-backdrop'));
    backdrop.triggerEventHandler('click', null);

    expect(app.closeSidenav).toHaveBeenCalled();
});

测试返回正值，但该函数未包含在代码覆盖范围内。我已经尝试添加

    spyOn(app.sidenav, 'toggle');
    expect(app.sidenav.toggle).toHaveBeenCalled();

没有其他结果。

这是文件中的最后一个函数，因此我没有得到 100% 的覆盖率。

只是想知道我可能会错过什么。

Answer 1

使用triggerEventHandler时，需要指定事件绑定而不是动作——backdropClick而不是click：

<mat-sidenav-container (backdropClick)="closeSidenav()">

const container = fixture.debugElement.query(By.css('mat-sidenav-container'));
container.triggerEventHandler('backdropClick', null);

为了实现实际代码覆盖，告诉间谍调用真实代码：

spyOn(app, 'closeSidenav').and.callThrough();