角度材料测试MatPaginator

Question

当我尝试测试一个组件的方法，该方法从角度材料设置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);