test: run styling benchmarks in benchpress (#34664)

Runs the styling benchmarks that have been added with 2e0b237646863562e336f370372b4b7f9e52d818
in benchpress. The goal is that these benchmarks can be wired up in
Latency Lab.

PR Close #34664

modules/benchmarks/src/styling/BUILD.bazel

@@ -1 +1,15 @@
-package(default_visibility = ["//visibility:public"])
+package(default_visibility = ["//modules/benchmarks:__subpackages__"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "tests_lib",
+    testonly = True,
+    srcs = ["styling_perf.spec.ts"],
+    tsconfig = "//modules/benchmarks:tsconfig-e2e.json",
+    deps = [
+        "//modules/e2e_util",
+        "@npm//@types/jasminewd2",
+        "@npm//protractor",
+    ],
+)

modules/benchmarks/src/styling/ng2/BUILD.bazel

@@ -1,4 +1,5 @@
 load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
+load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test")
 
 package(default_visibility = ["//modules/benchmarks:__subpackages__"])
 
@@ -30,3 +31,9 @@ ts_devserver(
     static_files = ["index.html"],
     deps = [":bundle.min_debug.es2015.js"],
 )
+
+benchmark_test(
+    name = "perf",
+    server = ":prodserver",
+    deps = ["//modules/benchmarks/src/styling:tests_lib"],
+)

modules/benchmarks/src/styling/ng2/index.html

@@ -11,9 +11,10 @@
   <h2>Styling bindings benchmark</h2>
   <p>
     <select id="scenario-select">
+      <!-- *Note*: When adding/removing scenarios, ensure the e2e test is also updated. -->
       <option value="0">(0) [title]="exp" (no styling involved)</option>
       <option value="1">(1) class="foo" (static class)</option>
-      <option value="2">(2) class="foo {{exp}}" (className binding)</option>
+      <option value="2">(2) class="foo {{exp}}" (class interpolation)</option>
       <option value="3">(3) [class.foo]="boolExp" binding</option>
       <option value="4">(4) class="foo" [class.bar]="boolExp" (mix of static and class. bindings</option>
       <option value="5">(5) class="foo" [ngClass]="{bar: boolExp}" (mix of static class and ngClass binding)</option>

modules/benchmarks/src/styling/styling_perf.spec.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright Google Inc. 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} from 'protractor';
+import {openBrowser, verifyNoBrowserErrors} from '../../../e2e_util/e2e_util';
+import {runBenchmark} from '../../../e2e_util/perf_util';
+
+/** List of possible scenarios that should be tested.  */
+const SCENARIOS = [
+  {optionIndex: 0, id: 'no_styling_involved'}, {optionIndex: 1, id: 'static_class'},
+  {optionIndex: 2, id: 'static_class_with_interpolation'}, {optionIndex: 3, id: 'class_binding'},
+  {optionIndex: 4, id: 'static_class_and_class_binding'},
+  {optionIndex: 5, id: 'static_class_and_ngclass_binding'},
+  {optionIndex: 6, id: 'static_class_and_ngstyle_binding_and_style_binding'}
+];
+
+describe('styling benchmark spec', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  it('should render and interact to change detection', () => {
+    openBrowser({url: '/', ignoreBrowserSynchronization: true});
+    create();
+    const items = element.all(by.css('styling-bindings button'));
+    expect(items.count()).toBe(2000);
+    expect(items.first().getAttribute('title')).toBe('bar');
+    detectChanges();
+    expect(items.first().getAttribute('title')).toBe('baz');
+  });
+
+  // Create benchmarks for each possible test scenario.
+  SCENARIOS.forEach(({optionIndex, id}) => {
+    describe(id, () => {
+      it('should run detect_changes benchmark', done => {
+        runStylingBenchmark(`styling.${id}.detect_changes`, {
+          work: () => detectChanges(),
+          prepare: () => {
+            // Switch to the current scenario by clicking the corresponding option.
+            element.all(by.tagName('option')).get(optionIndex).click();
+            // Create the elements with styling.
+            create();
+          },
+        }).then(done, done.fail);
+      });
+    });
+  });
+});
+
+function create() {
+  $('#create').click();
+}
+
+function detectChanges() {
+  $('#detectChanges').click();
+}
+
+/**
+ * Runs the styling benchmark with the given id and worker. The worker describes
+ * the actions that should run for preparation and measurement.
+ */
+function runStylingBenchmark(id: string, worker: {prepare: () => void, work: () => void}) {
+  return runBenchmark({
+    id,
+    url: '/',
+    params: [],
+    ignoreBrowserSynchronization: true,
+    prepare: worker.prepare,
+    work: worker.work
+  });
+}