fixup! test(button-harness): add performance tests for buttons using the protractor harness env

Author: wagnermaciel

src/cdk/testing/BUILD.bazel

@@ -11,6 +11,7 @@ ts_library(
             "**/*.spec.ts",
         ],
     ),
+    deps = ["//test/benchmarks/material/button-harness:protractor-benchmark-utilities"],
     module_name = "@angular/cdk/testing",
 )
 

src/cdk/testing/harness-environment.ts

@@ -17,6 +17,7 @@ import {
   LocatorFnResult,
 } from './component-harness';
 import {TestElement} from './test-element';
+import {benchmark} from '../../../test/benchmarks/material/button-harness/protractor-benchmark-utilities';
 
 /** Parsed form of the queries passed to the `locatorFor*` methods. */
 type ParsedQueries<T extends ComponentHarness> = {
@@ -58,9 +59,21 @@ export abstract class HarnessEnvironment<E> implements HarnessLoader, LocatorFac
   // Implemented as part of the `LocatorFactory` interface.
   locatorFor<T extends (HarnessQuery<any> | string)[]>(...queries: T):
       AsyncFactoryFn<LocatorFnResult<T>> {
-    return () => _assertResultFound(
-        this._getAllHarnessesAndTestElements(queries),
-        _getDescriptionForLocatorForQueries(queries));
+    return async () => {
+      let allHarnessesAndTestElements: any;
+      let descriptionForLocatorForQueries: any;
+      let result: any;
+      await benchmark('_getAllHarnessesAndTestElements', async () => {
+        allHarnessesAndTestElements = await this._getAllHarnessesAndTestElements(queries);
+      });
+      await benchmark('_getDescriptionForLocatorForQueries', async () => {
+        descriptionForLocatorForQueries = _getDescriptionForLocatorForQueries(queries);
+      });
+      await benchmark('_assertResultFound', async () => {
+        result = await _assertResultFound(allHarnessesAndTestElements, descriptionForLocatorForQueries);
+      });
+      return result;
+    }
   }
 
   // Implemented as part of the `LocatorFactory` interface.

test/benchmarks/material/button-harness/BUILD.bazel

@@ -1,20 +1,56 @@
 load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
+load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
 
-# 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.
+package(default_visibility = ["//visibility:public"])
+
+# These are two separate files that provide the same tidy interface for running a performance
+# benchmark.
+#
+# I am not sure why the testbed version of the test does not log console.time to the terminal,
+# although I assume it has something to do with the default karma config that is generated by
+# karma_web_test_suite (which is wrapped by ng_web_test_suite).
+#
+# I am equally lost as to why the performance api exists for the testbed tests but not for the
+# protractor tests.
+#
+# If you have any idea why these things happen, please let me know - @wagnermaciel.
+
+ts_library(
+    name = "constants",
+    srcs = [":constants.ts"],
+)
+
+ts_library(
+    name = "protractor-benchmark-utilities",
+    srcs = [":protractor-benchmark-utilities.ts"],
+    deps = [
+        ":constants",
+        "@npm//@angular/dev-infra-private",
+    ],
+)
+
+ts_library(
+    name = "testbed-benchmark-utilities",
+    srcs = [":testbed-benchmark-utilities.ts"],
+    deps = [":constants"],
+)
+
+# ProtractorHarnessEnvironment
 
 component_benchmark(
     name = "benchmark",
     driver = ":protractor.perf-spec.ts",
     driver_deps = [
-        "@npm//@angular/dev-infra-private",
+        ":constants",
+        ":protractor-benchmark-utilities",
         "@npm//protractor",
         "@npm//@types/jasmine",
         "//src/cdk/testing",
         "//src/material/button/testing",
         "//src/cdk/testing/protractor",
     ],
     ng_deps = [
+        ":constants",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "//src/material/button",
@@ -23,3 +59,24 @@ component_benchmark(
     prefix = "",
     styles = ["//src/material/prebuilt-themes:indigo-pink"],
 )
+
+# TestbedHarnessEnvironment
+
+ng_test_library(
+    name = "unit-test-lib",
+    srcs = ["testbed.perf-spec.ts"],
+    deps = [
+        ":constants",
+        ":testbed-benchmark-utilities",
+        "//src/material/button/testing",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/button",
+        "@npm//@angular/dev-infra-private",
+    ],
+)
+
+ng_web_test_suite(
+    name = "harness-unit-tests",
+    deps = [":unit-test-lib"],
+)

test/benchmarks/material/button-harness/app.module.ts

@@ -9,6 +9,7 @@
 import {Component, NgModule, ViewEncapsulation} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {MatButtonModule} from '@angular/material/button';
+import {NUM_BUTTONS} from './constants';
 
 /** component: mat-raised-button-harness-test */
 
@@ -21,7 +22,7 @@ import {MatButtonModule} from '@angular/material/button';
   styleUrls: ['//src/material/core/theming/prebuilt/indigo-pink.css'],
 })
 export class ButtonHarnessTest {
-  vals = Array.from({ length: 25 }, (_, i) => i);
+  vals = Array.from({ length: NUM_BUTTONS }, (_, i) => i);
 }
 
 @NgModule({

test/benchmarks/material/button-harness/constants.ts

@@ -0,0 +1,13 @@
+/**
+ * @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
+ */
+
+export const USE_BENCHPRESS = false;
+export const NUM_BUTTONS = 5;
+export const FIRST_BUTTON = '0';
+export const MIDDLE_BUTTON = `${Math.floor(NUM_BUTTONS / 2)}`;
+export const LAST_BUTTON = `${NUM_BUTTONS - 1}`;

test/benchmarks/material/button-harness/protractor-benchmark-utilities.ts

@@ -0,0 +1,52 @@
+/**
+ * @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 {USE_BENCHPRESS} from './constants';
+
+/**
+ * Records the performance of the given function.
+ *
+ * @param id A unique identifier.
+ * @param callback A function whose performance will be recorded.
+ */
+export async function benchmark(id: string, callback: Function) {
+  if (USE_BENCHPRESS) {
+    await benchmarkWithBenchpress(id, callback);
+  } else {
+    await benchmarkWithConsoleAPI(id, callback);
+  }
+}
+
+/**
+ * A simple wrapper for runBenchmark ... which is a wrapper for benchpress.
+ *
+ * @param id
+ * @param callback
+ */
+async function benchmarkWithBenchpress(id: string, callback: Function) {
+	await runBenchmark({
+		id,
+		url: '',
+		ignoreBrowserSynchronization: true,
+		params: [],
+		work: async () => await callback(),
+	});
+}
+
+/**
+ * Uses console.time with the given id to record the time it takes for the given callback to run.
+ *
+ * @param id
+ * @param callback
+ */
+async function benchmarkWithConsoleAPI(id: string, callback: Function) {
+	console.time(id);
+	await callback();
+	console.timeEnd(id);
+}