test(mdc-button): add performance tests for mdc-button (#20032)

* 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

Author: wagnermaciel

src/material-experimental/mdc-theming/BUILD.bazel

@@ -34,6 +34,7 @@ sass_library(
         "//src/material-experimental/mdc-table:mdc_table_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
         "//src/material/core:core_scss_lib",
+        "//src/material/core:theming_scss_lib",
     ],
 )
 

src/material-experimental/mdc-theming/_all-theme.scss

@@ -13,6 +13,7 @@
 @import '../mdc-progress-bar/progress-bar-theme';
 @import '../mdc-input/input-theme';
 @import '../mdc-form-field/form-field-theme';
+@import '../../material/core/core';
 @import '../../material/core/theming/check-duplicate-styles';
 
 @mixin angular-material-mdc-theme($theme-or-color-config) {

src/material-experimental/mdc-theming/prebuilt/indigo-pink.scss

@@ -1,6 +1,9 @@
 @import '../all-theme';
 @import '../../mdc-typography/all-typography';
 
+// Include non-theme styles for core.
+@include mat-core();
+
 // Define a theme.
 $primary: mat-palette($mat-indigo);
 $accent:  mat-palette($mat-pink, A200, A100, A400);
@@ -10,3 +13,4 @@ $theme: mat-light-theme($primary, $accent);
 // Include all theme styles for the components.
 @include angular-material-mdc-theme($theme);
 @include angular-material-mdc-typography();
+@include mat-core-theme($theme);

test/benchmarks/mdc/button/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 = ":button.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-button",
+    ],
+    ng_srcs = [":app.module.ts"],
+    prefix = "",
+    styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],
+)

test/benchmarks/mdc/button/app.module.ts

@@ -0,0 +1,43 @@
+/**
+ * @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 {MatButtonModule} from '@angular/material-experimental/mdc-button';
+
+/** component: mdc-raised-button */
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <button id="show" (click)="show()">Show</button>
+    <button id="hide" (click)="hide()">Hide</button>
+    <button *ngIf="isVisible" mat-raised-button>Basic</button>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'],
+})
+export class ButtonBenchmarkApp {
+  isChecked = false;
+  isVisible = false;
+
+  show() { this.isVisible = true; }
+  hide() { this.isVisible = false; }
+}
+
+
+@NgModule({
+  declarations: [ButtonBenchmarkApp],
+  imports: [
+    BrowserModule,
+    MatButtonModule,
+  ],
+  providers: [],
+  bootstrap: [ButtonBenchmarkApp],
+})
+export class AppModule {}

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

@@ -0,0 +1,38 @@
+/**
+ * @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('button performance benchmarks', () => {
+  beforeAll(() => {
+    browser.rootEl = '#root';
+  });
+
+  it('renders a basic raised button', async() => {
+    await runBenchmark({
+      id: 'button-render',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      prepare: async () => await $('#hide').click(),
+      work: async () => await $('#show').click(),
+    });
+  });
+
+  it('clicks a basic raised button', async() => {
+    await runBenchmark({
+      id: 'button-click',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async () => await $('#show').click(),
+      work: async () => await $('.mat-mdc-raised-button').click(),
+    });
+  });
+});