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
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(() => {
}));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.