如何在 table prime Ng 中创建 virtualScroll 的单元测试 [英] How to create unit test of virtualScroll in table prime Ng

问题描述

我无法在表中使用延迟加载来测试 virtualScroll

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 为空

bodyRows is empty

谢谢

推荐答案

Angular 团队单元测试为我提供了答案.在 CDK Virtual Scroll 显示数据之前有许多异步步骤，因此我们必须模拟这些步骤.将以下函数添加到 .spec.ts 文件的顶部，并在传递 fixture 时调用它，而不是 fixture.detectChanges()作为参数:

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();
};

你的 it 也需要使用 fakeAsync

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


}));

这篇关于如何在 table prime Ng 中创建 virtualScroll 的单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！