build(bazel): //modules/benchmarks/src/largetable/render3:perf bazel protractor test (#24788)

PR Close #24788

modules/benchmarks/BUILD.bazel

@@ -0,0 +1,8 @@
+package(default_visibility = ["//visibility:public"])
+
+filegroup(
+    name = "favicon",
+    srcs = [
+        "favicon.ico",
+    ],
+)

modules/benchmarks/src/BUILD.bazel

@@ -12,3 +12,14 @@ ts_library(
         "//packages/core",
     ],
 )
+
+ts_library(
+    name = "bootstrap",
+    srcs = [
+        "bootstrap_ng2.ts",
+        "bootstrap_plain.ts",
+    ],
+    deps = [
+        "//packages:types",
+    ],
+)

modules/benchmarks/src/README.md

@@ -0,0 +1,7 @@
+# Benchmark Directory Layout
+
+## Bazel
+
+Under bazel the rules for laying out test files are slightly different. Use `largetable/render3` as an example.
+
+Put the perf file in current subdirectory (ie `largetable`) such that the same perf file can be used for each of the sub-subdirectories. (ie `largetable/*` should all be testable with the same perf file `largetable/largetable_perf.spec.ts`). Under bazel, typescript protractor spec files must end with `.spec.ts` or `.test.ts`.

modules/benchmarks/src/largetable/BUILD.bazel

@@ -13,3 +13,15 @@ ts_library(
         "//packages/core",
     ],
 )
+
+ts_library(
+    name = "perf_lib",
+    testonly = 1,
+    srcs = [
+        "largetable_perf.spec.ts",
+    ],
+    deps = [
+        "//modules/e2e_util:lib",
+        "//packages:types",
+    ],
+)

modules/benchmarks/src/largetable/largetable_perf.spec.ts

@@ -0,0 +1,66 @@
+/**
+ * @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 {$} from 'protractor';
+
+import {runBenchmark, verifyNoBrowserErrors} from '../../../e2e_util/perf_util';
+
+interface Worker {
+  id: string;
+  prepare?(): void;
+  work(): void;
+}
+
+const CreateOnlyWorker: Worker = {
+  id: 'createOnly',
+  prepare: () => $('#destroyDom').click(),
+  work: () => $('#createDom').click()
+};
+
+const CreateAndDestroyWorker: Worker = {
+  id: 'createDestroy',
+  work: () => {
+    $('#createDom').click();
+    $('#destroyDom').click();
+  }
+};
+
+const UpdateWorker: Worker = {
+  id: 'update',
+  work: () => $('#createDom').click()
+};
+
+describe('largetable benchmark perf', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  [CreateOnlyWorker, CreateAndDestroyWorker, UpdateWorker].forEach((worker) => {
+    describe(worker.id, () => {
+      it('should run for render3', (done) => {
+        runTableBenchmark({
+          id: `largeTable.render3.${worker.id}`,
+          url: 'index.html',
+          ignoreBrowserSynchronization: true,
+          worker: worker
+        }).then(done, done.fail);
+      });
+    });
+  });
+
+  function runTableBenchmark(
+      config: {id: string, url: string, ignoreBrowserSynchronization?: boolean, worker: Worker}) {
+    return runBenchmark({
+      id: config.id,
+      url: config.url,
+      ignoreBrowserSynchronization: config.ignoreBrowserSynchronization,
+      params: [{name: 'cols', value: 40}, {name: 'rows', value: 200}],
+      prepare: config.worker.prepare,
+      work: config.worker.work
+    });
+  }
+});

modules/benchmarks/src/largetable/render3/BUILD.bazel

@@ -1,18 +1,63 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ts_library")
+load("//packages/bazel/src:ng_rollup_bundle.bzl", "ng_rollup_bundle")
+load("//packages/bazel:index.bzl", "protractor_web_test")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
 
-ng_module(
+ts_library(
     name = "largetable_lib",
     srcs = glob(
         [
             "**/*.ts",
         ],
+        exclude = ["protractor.on-prepare.ts"],
     ),
     deps = [
+        "//modules/benchmarks/src:util_lib",
         "//modules/benchmarks/src/largetable:util_lib",
         "//packages:types",
         "//packages/core",
         "@rxjs",
     ],
 )
+
+ng_rollup_bundle(
+    name = "bundle",
+    entry_point = "modules/benchmarks/src/largetable/render3/index.js",
+    deps = [
+        ":largetable_lib",
+    ],
+)
+
+genrule(
+    name = "favicon",
+    srcs = ["//modules/benchmarks:favicon"],
+    outs = ["favicon.ico"],
+    cmd = "cp $< $@",
+)
+
+ts_devserver(
+    name = "devserver",
+    static_files = [
+        ":bundle.min_debug.js",
+        ":bundle.min.js",
+        "index.html",
+        ":favicon",
+    ],
+)
+
+protractor_web_test(
+    name = "perf",
+    configuration = "//:protractor-perf.conf.js",
+    data = [
+        "//packages/bazel/src/protractor/utils",
+        "//packages/benchpress",
+    ],
+    on_prepare = ":protractor.on-prepare.js",
+    server = ":devserver",
+    tags = ["manual"],
+    deps = [
+        "//modules/benchmarks/src/largetable:perf_lib",
+    ],
+)

modules/benchmarks/src/largetable/render3/index.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
+
 <body>
 
   <h2>Params</h2>
   <form>
     Cols:
     <input type="number" name="cols" placeholder="cols" value="40">
-    <br>
-    Rows:
+    <br> Rows:
     <input type="number" name="rows" placeholder="rows" value="200">
     <br>
     <button>Apply</button>
@@ -28,9 +28,9 @@
   <script>
     // TODO(mlaval): remove once we have a proper solution
     ngDevMode = false;
-    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
-      || '../../bootstrap_ng2.js';
-    document.write('<script src="' + mainUrl + '">\u003c/script>');
+    var bazelBundle = document.location.search.endsWith('debug') ? 'bundle.min_debug.js' : 'bundle.min.js';
+    document.write('<script src="' + bazelBundle + '">\u003c/script>');
   </script>
 </body>
-</html>
+
+</html>

modules/benchmarks/src/largetable/render3/index.ts

@@ -26,3 +26,5 @@ export function main() {
         profile(() => createDom(component), () => destroyDom(component), 'create'));
   }
 }
+
+main();

modules/benchmarks/src/largetable/render3/protractor.on-prepare.js

@@ -0,0 +1,21 @@
+/**
+ * @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
+ */
+
+const protractorUtils = require('@angular/bazel/protractor-utils');
+const protractor = require('protractor');
+
+module.exports = function(config) {
+  return protractorUtils.runServer(config.workspace, config.server, '-port', [])
+      .then(serverSpec => {
+        const serverUrl = `http://localhost:${serverSpec.port}`;
+        // Since the browser restarts in this benchmark we need to set both the browser.baseUrl
+        // for the first test and the protractor config.baseUrl for the subsequent tests
+        protractor.browser.baseUrl = serverUrl;
+        return protractor.browser.getProcessedConfig().then((config) => config.baseUrl = serverUrl);
+      });
+};

modules/benchmarks/src/largetable/render3/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "lib": ["es2015"]
+  }
+}