Question

当我尝试测试从Angular Material设置MatPaginator的值的组件方法时，我收到此错误：

TypeError: Cannot set property 'pageIndex' of undefined

这是我的代码：

组件：

resetVacancySearch = () => {
    this.isVacanciesSearchMode = false;
    this.searchVacanciesValue = '';
    this.paginatorVacancies.pageIndex = 0; // reset to the first page
    this.paginatorVacancies.pageSize = 10;
    this.getVacanciesList(0, 10, 'name', 'ASC');
}

测试文件：

it('should call sourcingService.getVacanciesList and reset the search value from the input field', () => {
        spyOn(sourcingService, 'getVacanciesList').and.returnValue(Observable.of());
        component.resetVacancySearch();
        expect(sourcingService.getVacanciesList).toHaveBeenCalledWith(0, 10, 'name', 'ASC');
        expect(component.searchVacanciesValue).toEqual('');
 });

应用程序工作正常，但我无法将MatPaginator的实例放入测试文件中。有人可以建议我如何模拟MatPaginator进入测试？谢谢！

Answer 1

只需添加

MatPaginatorModule,
BrowserAnimationsModule

在import []数组中。

Answer 2

我能够访问在测试类的组件中定义的分页器。

在component.ts中，我已添加此行以访问分页器

@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

component.html

<div>
  <mat-paginator [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
  </mat-paginator>
</div>

在component.spec.ts中，

beforeEach(async(() => {TestBed.configureTestingModule({
  declarations: [DiscoverAddTargetDialogComponent],
  imports: [NoopAnimationsModule,MatTableModule, MatSortModule, MatPaginatorModule],
  providers: []
})
  .compileComponents();}));

我按如下方式访问了分页器：

console.log("length :" + component.paginator.length);

角度材料 - 测试MatPaginator

2 个答案: