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

【问题标题】：Angular 10 test with @testing-library/angular (page) attribute method on mat-paginator在 mat-paginator 上使用 @testing-library/angular (page) 属性方法进行 Angular 10 测试
【发布时间】：2021-09-17 12:50:24
【问题描述】：

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

<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;
  }

提前致谢。

【问题讨论】：

标签： angular unit-testing angular-testing-library mat-pagination

【解决方案1】：

我想通了。

我需要在我的 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);

【讨论】：