Angular 单元测试覆盖一次成功，另一次失败

Question

我正在为 Angular 应用程序进行单元测试覆盖率，以增加 Sonar QUbe 中的覆盖率百分比。 我已经为该应用程序编写了大约 200 个测试用例。 当我运行'ng test --single-run --cc'时。一次所有测试用例都取得了成功，并且一些测试用例失败并出现错误“未捕获的错误：ViewDestroyedError：尝试使用已破坏的视图：detectChanges throw”

测试用例：

  it('applyFilter() should emit  toolbarStateChange', () => {
    component.initialToolbarState = {
      favouriteFlag: false,
      sort: {
        key: 'TYP',
        dateSortType: 'OPENED.DESC',
        primarySort: 'TITLE',
        sortOrder: 'DESC'
      },
      search: [''],
      filterItems: [''],
      ownedbyFilter: 'test',
      event: 'SORT',
    }
    spyOn(component.toolbarStateChange, 'emit');
    component.applyFilter()
    expect(component.toolbarStateChange.emit).toHaveBeenCalled();
  });

组件中的功能：

 public applyFilter() {
    this.toolbarState = this.initialToolbarState;
    const selectedFilters: any = [];
    this.currentOwnedBy = (' ' + this.selectedOwnedby).slice(1);
    this.toolbarState.filterItems = this.filterItems;
    this.toolbarState.ownedbyFilter = this.selectedOwnedby;
    this.applyDisabled = true;
    this.resetDisabled = false;

    if (this.filterItems && this.filterItems.length > 0) {
      this.filterItems.forEach(item => {
        if (item.selected) {
          selectedFilters.push(item.id);
        }
      });
    }
    if (selectedFilters.length == 0 && this.OWNEDBY.ANYONE == this.selectedOwnedby) {
      this.resetDisabled = true;
    }

    this.toolbarState.event = {
      action: 'Filter',
      target: this.splitArrayElements(selectedFilters) + ((selectedFilters.length > 0) ? ', Created By ' : 'Created By ')
        + this.selectedOwnedby
    };
    this.toolbarStateChange.emit(this.toolbarState);
    this.filterApplied.emit({
      typeFilter: this.filterItems,
      ownedBy: this.selectedOwnedby
    });
    if (this.OWNEDBY.ANYONE !== this.selectedOwnedby) {
      this.filtered = true;
    }
  }

测试用例只是测试函数是否发出输出事件。 我在这里使用 Angular 5。

Answer 1

我记得在 Angular 5 项目中也遇到过这个问题，我不确定是什么原因，但我认为解决方案是手动调用 done 作为回调，让 Jasmine 知道我们已经完成了测试。

 // add the done callback inside of the paranthesis
 it('applyFilter() should emit  toolbarStateChange', (done: DoneFn) => {
    component.initialToolbarState = {
      favouriteFlag: false,
      sort: {
        key: 'TYP',
        dateSortType: 'OPENED.DESC',
        primarySort: 'TITLE',
        sortOrder: 'DESC'
      },
      search: [''],
      filterItems: [''],
      ownedbyFilter: 'test',
      event: 'SORT',
    }
    spyOn(component.toolbarStateChange, 'emit');
    component.applyFilter()
    expect(component.toolbarStateChange.emit).toHaveBeenCalled();
    // call done to let Jasmine know we are done with this test
    done();
  });