如何在表 primeNg 中创建虚拟 Scroll 的单元测试

【问题标题】：How to create unit test of virtualScroll in table prime Ng如何在表 primeNg 中创建虚拟 Scroll 的单元测试
【发布时间】：2021-05-22 14:23:53
【问题描述】：

我无法在表格中使用 lazayload 测试 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 为空

谢谢

【问题讨论】：

标签： typescript karma-jasmine primeng primeng-table

【解决方案1】：

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(() => {


}));

【讨论】：