How to create unit test of virtualScroll in table prime Ng

user_6731574 0
Viewed 405

I can't test virtualScroll with lazayload in table

  <p-table class="basicTable" [value]="cars" [scrollable]="true" [rows]="100" scrollHeight="500px"
             (onLazyLoad)="load($event)" [rows]="100" lazy="true"
             [virtualScroll]="true">

  const tableEl = fixture.debugElement.query(By.css('.p-datatable-virtual-scrollable-body'));
    fixture.detectChanges();
    const bodyRows = tableEl.query(By.css('.p-datatable-tbody')).queryAll(By.css('tr'));
    console.log(bodyRows)

bodyRows is empty

thanks

primeng-table karma-jasmine primeng typescript
1 Answers

The Angular teams unit tests provided me an answer to this. There's a number of async steps before the CDK Virtual Scroll displays data, so we have to simulate these. Instead of fixture.detectChanges(), add the following function to the top of your .spec.ts file and call it while passing the fixture as a param:

const finishInit = (fixture: ComponentFixture<any>) => {
  // On the first cycle we render and measure the viewport.
  fixture.detectChanges();
  flush();

  // On the second cycle we render the items.
  fixture.detectChanges();
  flush();

  // Flush the initial fake scroll event.
  tick(500);
  flush();
  fixture.detectChanges();
};

Your it will also need to use fakeAsync

it('should display virtual scroll data', fakeAsync(() => {


}));
user_2710120
Related