test(radio): add performance tests for mat-radio-button

test/benchmarks/material/radio/BUILD.bazel

@@ -0,0 +1,22 @@
+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 = ":radio.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/radio",
+    ],
+    ng_srcs = [":app.module.ts"],
+    prefix = "",
+    styles = ["//src/material/prebuilt-themes:indigo-pink"],
+)

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

@@ -0,0 +1,66 @@
+/**
+ * @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 {MatRadioModule} from '@angular/material/radio';
+
+/** component: mat-radio-button */
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <button id="show-two" (click)="showTwo()">Show Two</button>
+    <button id="hide-two" (click)="hideTwo()">Hide Two</button>
+
+    <button id="show-ten" (click)="showTen()">Show Ten</button>
+    <button id="hide-ten" (click)="hideTen()">Hide Ten</button>
+
+    <mat-radio-group aria-label="Select an option" *ngIf="isTwoVisible">
+      <mat-radio-button value="1" id="btn-1">Option 1</mat-radio-button>
+      <mat-radio-button value="2" id="btn-2">Option 2</mat-radio-button>
+    </mat-radio-group>
+
+    <mat-radio-group aria-label="Select an option" *ngIf="isTenVisible">
+      <mat-radio-button value="1">Option 1</mat-radio-button>
+      <mat-radio-button value="2">Option 2</mat-radio-button>
+      <mat-radio-button value="3">Option 3</mat-radio-button>
+      <mat-radio-button value="4">Option 4</mat-radio-button>
+      <mat-radio-button value="5">Option 5</mat-radio-button>
+      <mat-radio-button value="6">Option 6</mat-radio-button>
+      <mat-radio-button value="7">Option 7</mat-radio-button>
+      <mat-radio-button value="8">Option 8</mat-radio-button>
+      <mat-radio-button value="9">Option 9</mat-radio-button>
+      <mat-radio-button value="10">Option 10</mat-radio-button>
+    </mat-radio-group>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
+})
+export class RadioBenchmarkApp {
+  isTwoVisible = false;
+  isTenVisible = false;
+
+  showTwo() { this.isTwoVisible = true; }
+  hideTwo() { this.isTwoVisible = false; }
+
+  showTen() { this.isTenVisible = true; }
+  hideTen() { this.isTenVisible = false; }
+}
+
+
+@NgModule({
+  declarations: [RadioBenchmarkApp],
+  imports: [
+    BrowserModule,
+    MatRadioModule,
+  ],
+  providers: [],
+  bootstrap: [RadioBenchmarkApp],
+})
+export class AppModule {}

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

@@ -0,0 +1,50 @@
+/**
+ * @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';
+
+describe('radio button performance benchmarks', () => {
+  beforeAll(() => {
+    browser.rootEl = '#root';
+  });
+
+  it('renders two radio buttons', async() => {
+    await runBenchmark({
+      id: 'render-two-radio-buttons',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      prepare: async () => await $('#hide-two').click(),
+      work: async () => await $('#show-two').click(),
+    });
+  });
+
+  it('renders ten radio buttons', async() => {
+    await runBenchmark({
+      id: 'render-ten-radio-buttons',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      prepare: async () => await $('#hide-ten').click(),
+      work: async () => await $('#show-ten').click(),
+    });
+  });
+
+  it('changing between radio buttons', async() => {
+    await runBenchmark({
+      id: 'click-radio-button',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async() => await $('#show-two').click(),
+      prepare: async() => await $('#btn-1').click(),
+      work: async () => await $('#btn-2').click(),
+    });
+  });
+});