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

Question

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

提前致谢。

Answer 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);