test(cdk/table): add tests for virtual scrolling

Sets up some tests for the virtual scrolling logic.

Author: crisbeto

src/cdk/table/BUILD.bazel

@@ -48,6 +48,8 @@ ng_project(
         "//:node_modules/rxjs",
         "//src/cdk/bidi",
         "//src/cdk/collections",
+        "//src/cdk/scrolling",
+        "//src/cdk/testing/private",
     ],
 )
 

src/cdk/table/table.spec.ts

@@ -13,9 +13,17 @@ import {
   Type,
   ViewChild,
   inject,
+  signal,
 } from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  flush,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
 import {BehaviorSubject, Observable, combineLatest, of as observableOf} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {CdkColumnDef} from './cell';
@@ -36,6 +44,8 @@ import {
   getTableUnknownDataSourceError,
 } from './table-errors';
 import {NgClass} from '@angular/common';
+import {CdkVirtualScrollViewport, ScrollingModule} from '../scrolling';
+import {dispatchFakeEvent} from '../testing/private';
 
 describe('CdkTable', () => {
   let fixture: ComponentFixture<any>;
@@ -1995,6 +2005,107 @@ describe('CdkTable', () => {
     expect(noDataRow).toBeTruthy();
     expect(noDataRow.getAttribute('colspan')).toEqual('3');
   });
+
+  describe('virtual scrolling', () => {
+    let fixture: ComponentFixture<TableWithVirtualScroll>;
+    let table: HTMLTableElement;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(TableWithVirtualScroll);
+
+      // Init logic copied from the virtual scroll tests.
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      flush();
+      tick(16);
+      flush();
+      fixture.detectChanges();
+      table = fixture.nativeElement.querySelector('table');
+    }));
+
+    function triggerScroll(offset: number) {
+      const viewport = fixture.componentInstance.viewport;
+      viewport.scrollToOffset(offset);
+      dispatchFakeEvent(viewport.scrollable!.getElementRef().nativeElement, 'scroll');
+      tick(16);
+    }
+
+    it('should not render the full data set when using virtual scrolling', fakeAsync(() => {
+      expect(fixture.componentInstance.dataSource.data.length).toBeGreaterThan(2000);
+      expect(getRows(table).length).toBe(10);
+    }));
+
+    it('should maintain a limited amount of data as the user is scrolling', fakeAsync(() => {
+      expect(getRows(table).length).toBe(10);
+
+      triggerScroll(500);
+      expect(getRows(table).length).toBe(13);
+
+      triggerScroll(500);
+      expect(getRows(table).length).toBe(13);
+
+      triggerScroll(1000);
+      expect(getRows(table).length).toBe(12);
+    }));
+
+    it('should update the table data as the user is scrolling', fakeAsync(() => {
+      expectTableToMatchContent(table, [
+        ['Column A', 'Column B', 'Column C'],
+        ['a_1', 'b_1', 'c_1'],
+        ['a_2', 'b_2', 'c_2'],
+        ['a_3', 'b_3', 'c_3'],
+        ['a_4', 'b_4', 'c_4'],
+        ['a_5', 'b_5', 'c_5'],
+        ['a_6', 'b_6', 'c_6'],
+        ['a_7', 'b_7', 'c_7'],
+        ['a_8', 'b_8', 'c_8'],
+        ['a_9', 'b_9', 'c_9'],
+        ['a_10', 'b_10', 'c_10'],
+        ['Footer A', 'Footer B', 'Footer C'],
+      ]);
+
+      triggerScroll(1000);
+
+      expectTableToMatchContent(table, [
+        ['Column A', 'Column B', 'Column C'],
+        ['a_18', 'b_18', 'c_18'],
+        ['a_19', 'b_19', 'c_19'],
+        ['a_20', 'b_20', 'c_20'],
+        ['a_21', 'b_21', 'c_21'],
+        ['a_22', 'b_22', 'c_22'],
+        ['a_23', 'b_23', 'c_23'],
+        ['a_24', 'b_24', 'c_24'],
+        ['a_25', 'b_25', 'c_25'],
+        ['a_26', 'b_26', 'c_26'],
+        ['a_27', 'b_27', 'c_27'],
+        ['a_28', 'b_28', 'c_28'],
+        ['a_29', 'b_29', 'c_29'],
+        ['Footer A', 'Footer B', 'Footer C'],
+      ]);
+    }));
+
+    it('should update the position of sticky cells as the user is scrolling', fakeAsync(() => {
+      const assertStickyOffsets = (position: number) => {
+        getHeaderCells(table).forEach(cell => expect(cell.style.top).toBe(`${position * -1}px`));
+        getFooterCells(table).forEach(cell => expect(cell.style.bottom).toBe(`${position}px`));
+      };
+
+      assertStickyOffsets(0);
+      triggerScroll(1000);
+      assertStickyOffsets(884);
+    }));
+
+    it('should force tables with virtual scrolling to have a fixed layout', fakeAsync(() => {
+      expect(fixture.componentInstance.isFixedLayout()).toBe(true);
+      expect(table.classList).toContain('cdk-table-fixed-layout');
+
+      fixture.componentInstance.isFixedLayout.set(false);
+      fixture.detectChanges();
+
+      expect(table.classList).toContain('cdk-table-fixed-layout');
+    }));
+  });
 });
 
 interface TestData {
@@ -2032,15 +2143,18 @@ class FakeDataSource extends DataSource<TestData> {
     this.isConnected = false;
   }
 
-  addData() {
-    const nextIndex = this.data.length + 1;
-
+  addData(amount = 1) {
     let copiedData = this.data.slice();
-    copiedData.push({
-      a: `a_${nextIndex}`,
-      b: `b_${nextIndex}`,
-      c: `c_${nextIndex}`,
-    });
+
+    for (let i = 0; i < amount; i++) {
+      const nextIndex = copiedData.length + 1;
+
+      copiedData.push({
+        a: `a_${nextIndex}`,
+        b: `b_${nextIndex}`,
+        c: `c_${nextIndex}`,
+      });
+    }
 
     this.data = copiedData;
   }
@@ -3176,6 +3290,54 @@ class WrapNativeHtmlTableAppOnPush {
   dataSource = new FakeDataSource();
 }
 
+@Component({
+  template: `
+    <cdk-virtual-scroll-viewport class="scroll-container" [itemSize]="52">
+      <table cdk-table [dataSource]="dataSource" [fixedLayout]="isFixedLayout()">
+        <ng-container cdkColumnDef="column_a">
+          <th cdk-header-cell *cdkHeaderCellDef>Column A</th>
+          <td cdk-cell *cdkCellDef="let row"> {{row.a}}</td>
+          <td cdk-footer-cell *cdkFooterCellDef>Footer A</td>
+        </ng-container>
+
+        <ng-container cdkColumnDef="column_b">
+          <th cdk-header-cell *cdkHeaderCellDef>Column B</th>
+          <td cdk-cell *cdkCellDef="let row"> {{row.b}}</td>
+          <td cdk-footer-cell *cdkFooterCellDef>Footer B</td>
+        </ng-container>
+
+        <ng-container cdkColumnDef="column_c">
+          <th cdk-header-cell *cdkHeaderCellDef>Column C</th>
+          <td cdk-cell *cdkCellDef="let row"> {{row.c}}</td>
+          <td cdk-footer-cell *cdkFooterCellDef>Footer C</td>
+        </ng-container>
+
+        <tr cdk-header-row *cdkHeaderRowDef="columnsToRender; sticky: true"></tr>
+        <tr cdk-row *cdkRowDef="let row; columns: columnsToRender"></tr>
+        <tr cdk-footer-row *cdkFooterRowDef="columnsToRender; sticky: true"></tr>
+      </table>
+    </cdk-virtual-scroll-viewport>
+  `,
+  imports: [CdkTableModule, ScrollingModule],
+  styles: `
+    .scroll-container {
+      height: 300px;
+      overflow: auto;
+    }
+  `,
+})
+class TableWithVirtualScroll {
+  @ViewChild(CdkTable) table: CdkTable<TestData>;
+  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;
+  dataSource = new FakeDataSource();
+  columnsToRender = ['column_a', 'column_b', 'column_c'];
+  isFixedLayout = signal(true);
+
+  constructor() {
+    this.dataSource.addData(2000);
+  }
+}
+
 function getElements(element: Element, query: string): HTMLElement[] {
   return [].slice.call(element.querySelectorAll(query));
 }