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

test/benchmarks/material/menu/BUILD.bazel

@@ -0,0 +1,26 @@
+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 = ":menu.perf-spec.ts",
+    driver_deps = [
+        "@npm//@angular/dev-infra-private",
+        "@npm//protractor",
+        "@npm//@types/jasmine",
+        "//src/cdk/testing",
+        "//src/cdk/testing/protractor",
+        "//src/material/menu/testing",
+    ],
+    ng_deps = [
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+        "//src/material/menu",
+        "//src/cdk/a11y",
+    ],
+    ng_srcs = [":app.module.ts"],
+    prefix = "",
+    styles = ["//src/material/prebuilt-themes:indigo-pink"],
+)

test/benchmarks/material/menu/app.module.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 {A11yModule} from '@angular/cdk/a11y';
+import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {MatMenuModule} from '@angular/material/menu';
+
+/** component: mat-menu */
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <button mat-button [matMenuTriggerFor]="menu">Menu</button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item>Item 1</button>
+      <button mat-menu-item>Item 2</button>
+      <button mat-menu-item>Item 3</button>
+      <button mat-menu-item>Item 4</button>
+      <button mat-menu-item>Item 5</button>
+      <button mat-menu-item>Item 6</button>
+      <button mat-menu-item>Item 7</button>
+      <button mat-menu-item>Item 8</button>
+      <button mat-menu-item>Item 9</button>
+      <button mat-menu-item>Item 10</button>
+    </mat-menu>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
+})
+export class MenuBenchmarkApp {
+}
+
+
+@NgModule({
+  declarations: [MenuBenchmarkApp],
+  imports: [
+    A11yModule,
+    BrowserModule,
+    MatMenuModule,
+  ],
+  providers: [],
+  bootstrap: [MenuBenchmarkApp]
+})
+export class AppModule {}

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

@@ -0,0 +1,34 @@
+/**
+ * @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 {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
+
+import {HarnessLoader} from '@angular/cdk/testing';
+import {ProtractorHarnessEnvironment} from '@angular/cdk/testing/protractor';
+import {MatMenuHarness} from '@angular/material/menu/testing/menu-harness';
+
+let loader: HarnessLoader;
+
+describe('menu performance benchmarks', () => {
+  beforeEach(() => {
+    loader = ProtractorHarnessEnvironment.loader();
+  });
+
+  it('opens a menu with 10 items', async () => {
+    let menu: MatMenuHarness;
+    await runBenchmark({
+      id: 'menu-open',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async () => menu = await loader.getHarness(MatMenuHarness),
+      prepare: async () => await menu.close(),
+      work: async () => await menu.open(),
+    });
+  });
+});