test(mat-table): add performance tests for mat-table

test/benchmarks/material/table/BUILD.bazel

@@ -0,0 +1,23 @@
+load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
+
+component_benchmark(
+    name = "benchmark",
+    driver = ":table.perf-spec.ts",
+    driver_deps = [
+        "@npm//@angular/dev-infra-private",
+        "@npm//protractor",
+        "@npm//@types/jasmine",
+    ],
+    ng_deps = [
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+        "//src/material/table",
+    ],
+    ng_srcs = [
+        ":app.module.ts",
+        ":basic-table.ts",
+        ":fake-table-data.ts",
+    ],
+    prefix = "",
+    styles = ["//src/material/prebuilt-themes:indigo-pink"],
+)

test/benchmarks/material/table/app.module.ts

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {MatTableModule} from '@angular/material/table';
+import {BrowserModule} from '@angular/platform-browser';
+import {BasicTable} from './basic-table';
+import {
+  fiveCols, tenCols, twentyCols,
+  tenRows, oneHundredRows, oneThousandRows,
+} from './fake-table-data';
+
+/** component: mat-table */
+
+// tslint:disable:max-line-length
+@Component({
+  selector: 'app-root',
+  template: `
+    <button id="hide" (click)="hide()">Hide</button>
+    <button id="show-10-rows-5-cols" (click)="showTenRowsFiveCols()">Show 10 Rows 5 Cols</button>
+    <button id="show-100-rows-5-cols" (click)="showOneHundredRowsFiveCols()">Show 100 Rows 5 Cols</button>
+    <button id="show-1000-rows-5-cols" (click)="showOneThousandRowsFiveCols()">Show 1000 Rows 5 Cols</button>
+    <button id="show-10-rows-10-cols" (click)="showTenRowsTenCols()">Show 10 Rows 10 Cols</button>
+    <button id="show-10-rows-20-cols" (click)="showTenRowsTwentyCols()">Show 10 Rows 20 Cols</button>
+
+    <basic-table [rows]="tenRows" [cols]="fiveCols" *ngIf="isTenRowsFiveColsVisible"></basic-table>
+    <basic-table [rows]="oneHundredRows" [cols]="fiveCols" *ngIf="isOneHundredRowsFiveColsVisible"></basic-table>
+    <basic-table [rows]="oneThousandRows" [cols]="fiveCols" *ngIf="isOneThousandRowsFiveColsVisible"></basic-table>
+
+    <basic-table [rows]="tenRows" [cols]="tenCols" *ngIf="isTenRowsTenColsVisible"></basic-table>
+    <basic-table [rows]="tenRows" [cols]="twentyCols" *ngIf="isTenRowsTwentyColsVisible"></basic-table>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
+})
+export class TableBenchmarkApp {
+  fiveCols = fiveCols;
+  tenCols = tenCols;
+  twentyCols = twentyCols;
+
+  tenRows = tenRows;
+  oneHundredRows = oneHundredRows;
+  oneThousandRows = oneThousandRows;
+
+  isTenRowsFiveColsVisible = false;
+  isOneHundredRowsFiveColsVisible = false;
+  isOneThousandRowsFiveColsVisible = false;
+  isTenRowsTenColsVisible = false;
+  isTenRowsTwentyColsVisible = false;
+
+  hide() {
+    this.isTenRowsFiveColsVisible = false;
+    this.isOneHundredRowsFiveColsVisible = false;
+    this.isOneThousandRowsFiveColsVisible = false;
+    this.isTenRowsTenColsVisible = false;
+    this.isTenRowsTwentyColsVisible = false;
+  }
+
+  showTenRowsFiveCols() { this.isTenRowsFiveColsVisible = true; }
+  showOneHundredRowsFiveCols() { this.isOneHundredRowsFiveColsVisible = true; }
+  showOneThousandRowsFiveCols() { this.isOneThousandRowsFiveColsVisible = true; }
+  showTenRowsTenCols() { this.isTenRowsTenColsVisible = true; }
+  showTenRowsTwentyCols() { this.isTenRowsTwentyColsVisible = true; }
+}
+
+
+@NgModule({
+  declarations: [BasicTable, TableBenchmarkApp],
+  imports: [
+    BrowserModule,
+    MatTableModule,
+  ],
+  providers: [],
+  bootstrap: [TableBenchmarkApp],
+})
+export class AppModule {}

test/benchmarks/material/table/basic-table.ts

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'basic-table',
+  template: `
+  <table mat-table [dataSource]="rows" class="mat-elevation-z8">
+
+    <ng-container matColumnDef="a">
+      <th mat-header-cell *matHeaderCellDef> A </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.a}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="b">
+      <th mat-header-cell *matHeaderCellDef> B </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.b}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="c">
+      <th mat-header-cell *matHeaderCellDef> C </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.c}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="d">
+      <th mat-header-cell *matHeaderCellDef> D </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.d}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="e">
+      <th mat-header-cell *matHeaderCellDef> E </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.e}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="f">
+      <th mat-header-cell *matHeaderCellDef> F </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.f}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="g">
+      <th mat-header-cell *matHeaderCellDef> G </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.g}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="h">
+      <th mat-header-cell *matHeaderCellDef> H </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.h}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="i">
+      <th mat-header-cell *matHeaderCellDef> I </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.i}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="j">
+      <th mat-header-cell *matHeaderCellDef> J </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.j}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="k">
+      <th mat-header-cell *matHeaderCellDef> K </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.k}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="l">
+      <th mat-header-cell *matHeaderCellDef> L </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.l}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="m">
+      <th mat-header-cell *matHeaderCellDef> M </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.m}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="n">
+      <th mat-header-cell *matHeaderCellDef> N </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.n}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="o">
+      <th mat-header-cell *matHeaderCellDef> O </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.o}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="p">
+      <th mat-header-cell *matHeaderCellDef> P </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.p}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="q">
+      <th mat-header-cell *matHeaderCellDef> Q </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.q}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="r">
+      <th mat-header-cell *matHeaderCellDef> R </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.r}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="s">
+      <th mat-header-cell *matHeaderCellDef> S </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.s}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="t">
+      <th mat-header-cell *matHeaderCellDef> T </th>
+      <td mat-cell *matCellDef="let cell"> {{cell.t}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="cols"></tr>
+    <tr mat-row *matRowDef="let row; columns: cols;"></tr>
+  </table>
+  `,
+  styles: ['table { width: 100% }', 'th.mat-header-cell, td.mat-cell { padding: 0px 20px }'],
+})
+export class BasicTable {
+  @Input() cols: string[];
+  @Input() rows: Record<string, string>[];
+}

test/benchmarks/material/table/fake-table-data.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+function numToChar(num: number): string {
+  return String.fromCharCode('a'.charCodeAt(0) + num);
+}
+
+function generateTableColumnNames(numColumns: number) {
+  return Array(numColumns).fill(null).map((_, index) => numToChar(index));
+}
+
+function generateTableData(numRows: number, cols: string[]): Record<string, string>[] {
+  return Array(numRows).fill(null).map((_, index) => generateTableDataRow(cols, `${index + 1}`));
+}
+
+function generateTableDataRow(cols: string[], value: string): Record<string, string> {
+  return cols.reduce((rowData, columnName) => ({...rowData, [columnName]: value}), {});
+}
+
+export const fiveCols = generateTableColumnNames(5);
+export const tenCols = generateTableColumnNames(10);
+export const twentyCols = generateTableColumnNames(20);
+
+export const tenRows = generateTableData(10, twentyCols);
+export const oneHundredRows = generateTableData(100, twentyCols);
+export const oneThousandRows = generateTableData(1000, twentyCols);
+
+console.log(fiveCols);
+console.log(tenRows);

test/benchmarks/material/table/table.perf-spec.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {$, browser} from 'protractor';
+import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
+
+function runTableRenderBenchmark(testId: string, buttonId: string) {
+  return runBenchmark({
+    id: testId,
+    url: '',
+    ignoreBrowserSynchronization: true,
+    params: [],
+    prepare: async () => await $('#hide').click(),
+    work: async () => await $(buttonId).click(),
+  });
+}
+
+describe('table performance benchmarks', () => {
+  beforeAll(() => {
+    browser.rootEl = '#root';
+  });
+
+  it('renders 10 rows with 5 cols', async() => {
+    await runTableRenderBenchmark('table-render-10-rows-5-cols', '#show-10-rows-5-cols');
+  });
+
+  it('renders 100 rows with 5 cols', async() => {
+    await runTableRenderBenchmark('table-render-100-rows-5-cols', '#show-100-rows-5-cols');
+  });
+
+  it('renders 1000 rows with 5 cols', async() => {
+    await runTableRenderBenchmark('table-render-1000-rows-5-cols', '#show-1000-rows-5-cols');
+  });
+
+  it('renders 10 rows with 10 cols', async() => {
+    await runTableRenderBenchmark('table-render-10-rows-10-cols', '#show-10-rows-10-cols');
+  });
+
+  it('renders 10 rows with 20 cols', async() => {
+    await runTableRenderBenchmark('table-render-10-rows-20-cols', '#show-10-rows-20-cols');
+  });
+});