Angular 10 test with @testing-library/angular (page) attribute method on mat-paginator

273 Views Asked by At

I have the <mat-paginator> element working fine, I just want to know how the heck to I test the getPaginatorData method for the (page) attribute with the @testing-library/angular library?

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

This is my component

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

Thanks in advance.

1

There are 1 best solutions below

0
On

I figured it out.

I needed to do this in my beforeEach block:

   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;

have let component; be globally accessible.

and then run in my test

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

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