测试 Angular Material 数据源排序

5 jasmine karma-jasmine angular-material angular

我正在尝试对具有 Angular Material 提供的数据源排序功能的组件进行单元测试。我的测试目前如下所示:

it('should contain a sortable table', (done) => {
    fixture.whenStable().then(() => {
      fixture.detectChanges();
      const tableRows = fixture.debugElement.nativeElement.querySelectorAll('tr');
      const sortButtons = fixture.debugElement.nativeElement.querySelectorAll('button.mat-sort-header-button');
      expect(sortButtons.length).toBe(2);
      sortButtons[0].click();
      fixture.detectChanges();
      tableRows.forEach(row => {
        console.log(row.cells[0].innerHTML);
      });
      done();
    });
});
Run Code Online (Sandbox Code Playgroud)

找到排序按钮并且单击也像看起来一样工作,但控制台中的输出不符合预期。好像没更新啊。。

当通过 ngserve 运行应用程序时,排序效果很好。但这里排序没有按预期工作,或者我的测试似乎没有注册 DOM 中所做的更改?我怎样才能正确地实施这个测试?

排序函数如下所示:

this.dataSource.sortingDataAccessor = (item: DaResult, property: string) => {
  switch (property) {
    case 'da':
      return item.da;
    case 'currentcomponent':
      return item.componentCurrent.partNumber;
    default:
      return item.da;
  }
};
Run Code Online (Sandbox Code Playgroud)