diff --git a/test/benchmarks/mdc/table/BUILD.bazel b/test/benchmarks/mdc/table/BUILD.bazel new file mode 100644 index 000000000000..7187033cb094 --- /dev/null +++ b/test/benchmarks/mdc/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-experimental/mdc-table", + ], + ng_srcs = [ + ":app.module.ts", + ":basic-table.ts", + ":fake-table-data.ts", + ], + prefix = "", + styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"], +) diff --git a/test/benchmarks/mdc/table/app.module.html b/test/benchmarks/mdc/table/app.module.html new file mode 100644 index 000000000000..6ec5e9e89a03 --- /dev/null +++ b/test/benchmarks/mdc/table/app.module.html @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/test/benchmarks/mdc/table/app.module.ts b/test/benchmarks/mdc/table/app.module.ts new file mode 100644 index 000000000000..558ee81517c4 --- /dev/null +++ b/test/benchmarks/mdc/table/app.module.ts @@ -0,0 +1,65 @@ +/** + * @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-experimental/mdc-table'; +import {BrowserModule} from '@angular/platform-browser'; +import {BasicTable} from './basic-table'; +import { + fiveCols, tenCols, twentyCols, + tenRows, oneHundredRows, oneThousandRows, +} from './fake-table-data'; + +/** component: mdc-table */ + +@Component({ + selector: 'app-root', + templateUrl: './app.module.html', + encapsulation: ViewEncapsulation.None, + styleUrls: ['//src/material-experimental/mdc-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, + ], + bootstrap: [TableBenchmarkApp], +}) +export class AppModule {} diff --git a/test/benchmarks/mdc/table/basic-table.ts b/test/benchmarks/mdc/table/basic-table.ts new file mode 100644 index 000000000000..8484a9fae5c7 --- /dev/null +++ b/test/benchmarks/mdc/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: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
A {{cell.a}} B {{cell.b}} C {{cell.c}} D {{cell.d}} E {{cell.e}} F {{cell.f}} G {{cell.g}} H {{cell.h}} I {{cell.i}} J {{cell.j}} K {{cell.k}} L {{cell.l}} M {{cell.m}} N {{cell.n}} O {{cell.o}} P {{cell.p}} Q {{cell.q}} R {{cell.r}} S {{cell.s}} T {{cell.t}}
+ `, + styles: ['table { width: 100% }', 'th.mat-header-cell, td.mat-cell { padding: 0px 20px }'], +}) +export class BasicTable { + @Input() cols: string[]; + @Input() rows: Record[]; +} diff --git a/test/benchmarks/mdc/table/fake-table-data.ts b/test/benchmarks/mdc/table/fake-table-data.ts new file mode 100644 index 000000000000..15ebcd80c18a --- /dev/null +++ b/test/benchmarks/mdc/table/fake-table-data.ts @@ -0,0 +1,31 @@ +/** + * @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[] { + return Array(numRows).fill(null).map((_, index) => generateTableDataRow(cols, `${index + 1}`)); +} + +function generateTableDataRow(cols: string[], value: string): Record { + 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); diff --git a/test/benchmarks/mdc/table/table.perf-spec.ts b/test/benchmarks/mdc/table/table.perf-spec.ts new file mode 100644 index 000000000000..a129a42b7a21 --- /dev/null +++ b/test/benchmarks/mdc/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'); + }); +});