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

* Also cleaned up a small ts error I was getting from the material menu's driver.

Author: wagnermaciel

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

@@ -57,7 +57,9 @@ describe('menu performance benchmarks', () => {
       url: '',
       ignoreBrowserSynchronization: true,
       params: [],
-      setup: async () => trigger = element(by.buttonText('Nested Menu')),
+      setup: () => {
+        trigger = element(by.buttonText('Nested Menu'));
+      },
       work: async () => {
         await trigger.click();
         await element(by.buttonText('Sub Menu 1')).click();

test/benchmarks/mdc/menu/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 = ":menu.perf-spec.ts",
+    driver_deps = [
+        "@npm//@angular/dev-infra-private",
+        "@npm//protractor",
+        "@npm//@types/jasmine",
+    ],
+    ng_assets = [":menu.html"],
+    ng_deps = [
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser",
+        "//src/material-experimental/mdc-menu",
+    ],
+    ng_srcs = [":app.module.ts"],
+    prefix = "",
+    styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],
+)

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

@@ -0,0 +1,33 @@
+/**
+ * @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 {MatMenuModule} from '@angular/material-experimental/mdc-menu';
+
+/** component: mdc-menu */
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './menu.html',
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'],
+})
+export class MenuBenchmarkApp {
+}
+
+
+@NgModule({
+  declarations: [MenuBenchmarkApp],
+  imports: [
+    BrowserModule,
+    MatMenuModule,
+  ],
+  bootstrap: [MenuBenchmarkApp]
+})
+export class AppModule {}

test/benchmarks/mdc/menu/menu.html

@@ -0,0 +1,33 @@
+<button mat-button [matMenuTriggerFor]="basic">Basic Menu</button>
+<button mat-button [matMenuTriggerFor]="nested">Nested Menu</button>
+
+<mat-menu #basic="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>
+
+<!-- Nested Menu with 3 Levels -->
+
+<mat-menu #nested="matMenu">
+	<button mat-menu-item [matMenuTriggerFor]="sub1">Sub Menu 1</button>
+</mat-menu>
+
+<mat-menu #sub1="matMenu">
+	<button mat-menu-item [matMenuTriggerFor]="sub2">Sub Menu 2</button>
+</mat-menu>
+
+<mat-menu #sub2="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>
+</mat-menu>

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

@@ -0,0 +1,71 @@
+/**
+ * @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 {$, by, element, ElementFinder, Key} from 'protractor';
+import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
+
+// Clicking to close a menu is problematic. This is a solution that uses `.sendKeys()` avoids
+// issues with `.click()`.
+
+async function closeMenu(trigger: ElementFinder) {
+  const backdropId = await trigger.getAttribute('aria-controls');
+  if (await $(`#${backdropId}`).isPresent()) {
+    await $(`#${backdropId}`).sendKeys(Key.ESCAPE);
+  }
+}
+
+describe('menu performance benchmarks', () => {
+  it('opens a basic menu', async () => {
+    let trigger: ElementFinder;
+    await runBenchmark({
+      id: 'basic-menu-open',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async () => {
+        trigger = element(by.buttonText('Basic Menu'));
+      },
+      work: async () => {
+        await trigger.click();
+        await closeMenu(trigger);
+      }
+    });
+  });
+
+  it('opens the root menu of a set of nested menus', async () => {
+    let trigger: ElementFinder;
+    await runBenchmark({
+      id: 'nested-menu-open-shallow',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async () => trigger = element(by.buttonText('Nested Menu')),
+      work: async () => {
+        await trigger.click();
+        await closeMenu(trigger);
+      },
+    });
+  });
+
+  it('fully opens a menu with nested menus', async () => {
+    let trigger: ElementFinder;
+    await runBenchmark({
+      id: 'menu-open-deep',
+      url: '',
+      ignoreBrowserSynchronization: true,
+      params: [],
+      setup: async () => trigger = element(by.buttonText('Nested Menu')),
+      work: async () => {
+        await trigger.click();
+        await element(by.buttonText('Sub Menu 1')).click();
+        await element(by.buttonText('Sub Menu 2')).click();
+        await closeMenu(trigger);
+      },
+    });
+  });
+});