在 mat-paginator 上使用 @testing-library/angular (page) 属性方法进行 Angular 10 测试

问题描述

我的 <mat-paginator> 元素工作正常，我只想知道如何使用 @testing-library/angular 库测试 getPaginatorData 属性的 (page) 方法?

<mat-paginator
  #billingItemsPaginator
  [pageIndex]="paginatorObject.billingItems.pageIndex"
  [pageSize]="paginatorObject.billingItems.pageSize"
  [pageSizeOptions]="[6,12]"
  (page)="getPaginatorData($event,'billingItems')"
  showFirstLastButtons="true"
 >
</mat-paginator>

这是我的组件

  billingItemsSource = new MatTableDataSource<any>();
  public billingItemsPaginator: MatPaginator;
  @ViewChild('billingItemsPaginator') set matBillingItemsPaginator(
    mp: MatPaginator
  ) {
    this.billingItemsPaginator = mp;
    this.billingItemsSource.paginator = this.billingItemsPaginator;
  }

提前致谢。

解决方法

我想通了。

我需要在 beforeEach 块中执行此操作：

   const { fixture } = await render(MyComponent,{
      excludeComponentDeclaration: true,imports: [
        RouterTestingModule,CoreModule,FormsModule,NoopAnimationsModule,MatAutocompleteModule,MatPaginatorModule,MatSortModule,MatTableModule,HttpClientTestingModule,MatTabsModule,],});
    jest.runAllTimers();
    component = fixture.componentInstance as MyComponent;

让 let component; 可以全局访问。

然后在我的测试中运行

    const pageObject = component.getPaginatorData(
      {
        length: 42,pageIndex: 1,pageSize: 6,previousPageIndex: 0,},'invoices'
    );

    expect(pageObject.pageIndex).toEqual(1);