问题描述
我无法在表中使用延迟加载来测试 virtualscroll
<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 为空
谢谢
解决方法
Angular 团队的单元测试为我提供了答案。在 CDK Virtual Scroll 显示数据之前有许多异步步骤,因此我们必须模拟这些步骤。代替 fixture.detectChanges()
,将以下函数添加到 .spec.ts
文件的顶部,并在将 fixture
作为参数传递时调用它:
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();
};
您的 it
还需要使用 fakeAsync
it('should display virtual scroll data',fakeAsync(() => {
}));