test(mdc-form-field): add performance tests for mdc-form-field (#20135)

* test(mdc-button): add performance tests for mdc-button

* fix(mdc-indigo-pink): add mat-core and mat-core-theme to indigo-pink

* fixup! fix(mdc-indigo-pink): add mat-core and mat-core-theme to indigo-pink

* fixup! test(mdc-button): add performance tests for mdc-button

* test(mdc-form-field): add performance tests for mdc-form-field

* fix(mdc-form-field-benchmark): remove unnecessary provider

Author: wagnermaciel

test/benchmarks/mdc/button/button.perf-spec.ts

@@ -32,7 +32,15 @@ describe('button performance benchmarks', () => {
       ignoreBrowserSynchronization: true,
       params: [],
       setup: async () => await $('#show').click(),
+<<<<<<< HEAD
+<<<<<<< HEAD
       work: async () => await $('.mat-mdc-raised-button').click(),
+=======
+      work: async () => await $('.mat-raised-button').click(),
+>>>>>>> f1ae4d955... test(mdc-button): add performance tests for mdc-button
+=======
+      work: async () => await $('.mat-mdc-raised-button').click(),
+>>>>>>> 63f2747fc... fixup! test(mdc-button): add performance tests for mdc-button
     });
   });
 });

test/benchmarks/mdc/form-field/BUILD.bazel

@@ -0,0 +1,23 @@
+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 = ":form-field.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-form-field",
+        "//src/material-experimental/mdc-input",
+    ],
+    ng_srcs = [":app.module.ts"],
+    prefix = "",
+    styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],
+)

test/benchmarks/mdc/form-field/app.module.ts

@@ -0,0 +1,60 @@
+/**
+ * @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 {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+
+/** component: mdc-form-field */
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <button id="show-input" (click)="showInput()">Show Input</button>
+    <button id="show-textarea" (click)="showTextarea()">Show Textarea</button>
+
+    <button id="hide" (click)="hide()">Hide</button>
+
+    <mat-form-field appearance="fill" *ngIf="isInputVisible">
+      <mat-label>Input</mat-label>
+      <input matInput>
+    </mat-form-field>
+
+    <mat-form-field appearance="fill" *ngIf="isTextareaVisible">
+      <mat-label>Textarea</mat-label>
+      <textarea matInput></textarea>
+    </mat-form-field>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'],
+})
+export class FormFieldBenchmarkApp {
+  isInputVisible = false;
+  isTextareaVisible = false;
+
+  showInput() { this.isInputVisible = true; }
+  showTextarea() { this.isTextareaVisible = true; }
+
+  hide() {
+    this.isInputVisible = false;
+    this.isTextareaVisible = false;
+  }
+}
+
+
+@NgModule({
+  declarations: [FormFieldBenchmarkApp],
+  imports: [
+    BrowserModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ],
+  bootstrap: [FormFieldBenchmarkApp],
+})
+export class AppModule {}

test/benchmarks/mdc/form-field/form-field.perf-spec.ts

@@ -0,0 +1,35 @@
+/**
+ * @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 runFormFieldRenderBenchmark(testId: string, showBtnId: string) {
+  return runBenchmark({
+    id: testId,
+    url: '',
+    ignoreBrowserSynchronization: true,
+    params: [],
+    prepare: async () => await $('#hide').click(),
+    work: async () => await $(showBtnId).click()
+  });
+}
+
+describe('form field performance benchmarks', () => {
+  beforeAll(() => {
+    browser.rootEl = '#root';
+  });
+
+  it('renders an input in a form field', async() => {
+    await runFormFieldRenderBenchmark('input-form-field-render', '#show-input');
+  });
+
+  it('renders an textarea in a form field', async() => {
+    await runFormFieldRenderBenchmark('textarea-form-field-render', '#show-textarea');
+  });
+});