如何在表素數 Ng 中創建 virtualScroll 的單元測試

Question

我無法在表中使用 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 為空

謝謝

Answer 1

Angular 團隊單元測試為我提供了答案。 CDK Virtual Scroll 顯示數據之前有許多異步步驟，因此我們必須模擬這些步驟。 代替 fixture.detectChanges fixture.detectChanges() ，將以下 function 添加到.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(() => {


}));