首页 > 解决方案 > 测试 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();
    });
});

找到排序按钮,单击也可以正常工作,但控制台中的输出与预期不符。有点不更新了。。

通过 ng serve 运行应用程序时,排序效果很好。但是这里的排序没有按预期工作,或者我的测试似乎没有记录在 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;
  }
};

标签: angularjasmineangular-materialkarma-jasmine

解决方案


推荐阅读