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

test/benchmarks/material/tabs/BUILD.bazel

@@ -0,0 +1,25 @@
+load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
+
+# TODO(wagnermaciel): Update this target to provide indigo-pink in a way that doesn't require having to import it with
+# stylesUrls inside the components once `component_benchmark` supports asset injection.
+
+component_benchmark(
+    name = "benchmark",
+    driver = ":tabs.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/tabs",
+    ],
+    ng_srcs = [
+        ":app.module.ts",
+        ":fake-tab-data.ts",
+    ],
+    prefix = "",
+    styles = ["//src/material/prebuilt-themes:indigo-pink"],
+)

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

@@ -0,0 +1,58 @@
+/**
+ * @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 {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatTabsModule} from '@angular/material/tabs';
+import {threeTabs, tenTabs, twentyTabs} from './fake-tab-data';
+
+/** component: mat-tab */
+
+@Component({
+  selector: 'app-root',
+  template: `
+  <button id="show-three-tabs" (click)="showThreeTabs()">Show Three Tabs</button>
+  <button id="show-ten-tabs" (click)="showTenTabs()">Show Ten Tabs</button>
+  <button id="show-twenty-tabs" (click)="showTwentyTabs()">Show Twenty Tabs</button>
+  <button id="hide" (click)="hide()">Hide</button>
+
+  <mat-tab-group *ngIf="areThreeTabsVisible">${threeTabs}</mat-tab-group>
+  <mat-tab-group *ngIf="areTenTabsVisible">${tenTabs}</mat-tab-group>
+  <mat-tab-group *ngIf="areTwentyTabsVisible">${twentyTabs}</mat-tab-group>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
+})
+export class TabsBenchmarkApp {
+  areThreeTabsVisible = false;
+  areTenTabsVisible = false;
+  areTwentyTabsVisible = false;
+
+  showThreeTabs() { this.areThreeTabsVisible = true; }
+  showTenTabs() { this.areTenTabsVisible = true; }
+  showTwentyTabs() { this.areTwentyTabsVisible = true; }
+
+  hide() {
+    this.areThreeTabsVisible = false;
+    this.areTenTabsVisible = false;
+    this.areTwentyTabsVisible = false;
+  }
+}
+
+@NgModule({
+  declarations: [TabsBenchmarkApp],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatTabsModule,
+  ],
+  providers: [],
+  bootstrap: [TabsBenchmarkApp],
+})
+export class AppModule {}

test/benchmarks/material/tabs/fake-tab-data.ts

@@ -0,0 +1,13 @@
+/**
+ * @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
+ */
+
+// tslint:disable:max-line-length
+
+export const threeTabs = '<mat-tab label="Tab #1"> Content #1 </mat-tab><mat-tab label="Tab #2"> Content #2 </mat-tab><mat-tab label="Tab #3"> Content #3 </mat-tab>';
+export const tenTabs = '<mat-tab label="Tab #1"> Content #1 </mat-tab><mat-tab label="Tab #2"> Content #2 </mat-tab><mat-tab label="Tab #3"> Content #3 </mat-tab><mat-tab label="Tab #4"> Content #4 </mat-tab><mat-tab label="Tab #5"> Content #5 </mat-tab><mat-tab label="Tab #6"> Content #6 </mat-tab><mat-tab label="Tab #7"> Content #7 </mat-tab><mat-tab label="Tab #8"> Content #8 </mat-tab><mat-tab label="Tab #9"> Content #9 </mat-tab><mat-tab label="Tab #10"> Content #10 </mat-tab>';
+export const twentyTabs = '<mat-tab label="Tab #1"> Content #1 </mat-tab><mat-tab label="Tab #2"> Content #2 </mat-tab><mat-tab label="Tab #3"> Content #3 </mat-tab><mat-tab label="Tab #4"> Content #4 </mat-tab><mat-tab label="Tab #5"> Content #5 </mat-tab><mat-tab label="Tab #6"> Content #6 </mat-tab><mat-tab label="Tab #7"> Content #7 </mat-tab><mat-tab label="Tab #8"> Content #8 </mat-tab><mat-tab label="Tab #9"> Content #9 </mat-tab><mat-tab label="Tab #10"> Content #10 </mat-tab><mat-tab label="Tab #11"> Content #11 </mat-tab><mat-tab label="Tab #12"> Content #12 </mat-tab><mat-tab label="Tab #13"> Content #13 </mat-tab><mat-tab label="Tab #14"> Content #14 </mat-tab><mat-tab label="Tab #15"> Content #15 </mat-tab><mat-tab label="Tab #16"> Content #16 </mat-tab><mat-tab label="Tab #17"> Content #17 </mat-tab><mat-tab label="Tab #18"> Content #18 </mat-tab><mat-tab label="Tab #19"> Content #19 </mat-tab><mat-tab label="Tab #20"> Content #20 </mat-tab>';

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

@@ -0,0 +1,83 @@
+/**
+ * @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, ElementFinder} from 'protractor';
+import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
+
+describe('tabs performance benchmarks', () => {
+  beforeAll(() => {
+    browser.rootEl = '#root';
+  });
+
+  it('renders three tabs', async() => {
+    await runBenchmark({
+      id: 'three-tab-render',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      prepare: async() => await $('#hide').click(),
+      work: async() => await $('#show-three-tabs').click(),
+    });
+  });
+
+  it('renders ten tabs', async() => {
+    await runBenchmark({
+      id: 'ten-tab-render',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      prepare: async() => await $('#hide').click(),
+      work: async() => await $('#show-ten-tabs').click(),
+    });
+  });
+
+  it('renders twenty tabs', async() => {
+    await runBenchmark({
+      id: 'twenty-tab-render',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      prepare: async() => await $('#hide').click(),
+      work: async() => await $('#show-twenty-tabs').click(),
+    });
+  });
+
+  it('switches between tabs', async() => {
+    await runBenchmark({
+      id: 'tab-switching',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async() => await $('#show-three-tabs').click(),
+      prepare: async() => await $('#mat-tab-label-0-0').click(),
+      work: async() => await $('#mat-tab-label-0-1').click(),
+    });
+  });
+
+  it('paginates tabs', async() => {
+    async function isTabPaginatorDisabled(ele: ElementFinder) {
+      return (await ele.getAttribute('class')).includes('mat-tab-header-pagination-disabled');
+    }
+    await runBenchmark({
+      id: 'tab-pagination',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      prepare: async() => {
+        await $('#hide').click();
+        await $('#show-twenty-tabs').click();
+      },
+      work: async() => {
+        const nextBtn = $('.mat-tab-header-pagination-after');
+        while (!isTabPaginatorDisabled(nextBtn)) {
+          await nextBtn.click();
+        }
+      }
+    });
+  });
+});