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

PR Close #24788

BUILD.bazel

@@ -5,6 +5,7 @@ load("@build_bazel_rules_nodejs//:defs.bzl", "node_modules_filegroup")
 exports_files([
     "tsconfig.json",
     "LICENSE",
+    "protractor-perf.conf.js",
 ])
 
 # Developers should always run `bazel run :install`

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>
+    <br> Rows:
-    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]
+    var bazelBundle = document.location.search.endsWith('debug') ? 'bundle.min_debug.js' : 'bundle.min.js';
-      || '../../bootstrap_ng2.js';
+    document.write('<script src="' + bazelBundle + '">\u003c/script>');
-    document.write('<script src="' + mainUrl + '">\u003c/script>');
   </script>
 </body>
+
 </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"]
+  }
+}

modules/e2e_util/BUILD.bazel

@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "lib",
+    testonly = 1,
+    srcs = glob(["*.ts"]),
+    deps = [
+        "//packages:types",
+        "//packages/benchpress",
+    ],
+)

modules/e2e_util/e2e_util.ts

@@ -20,9 +20,11 @@ export function readCommandLine(extraOptions?: {[key: string]: any}) {
   const options: {[key: string]: any} = {
     'bundles': {describe: 'Whether to use the angular bundles or not.', default: false}
   };
+  if (extraOptions) {
     for (const key in extraOptions) {
       options[key] = extraOptions[key];
     }
+  }
 
   cmdArgs = yargs.usage('Angular e2e test options.').options(options).help('ng-help').wrap(40).argv;
   return cmdArgs;

packages/benchpress/BUILD.bazel

@@ -0,0 +1,18 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "benchpress",
+    srcs = glob(
+        [
+            "*.ts",
+            "src/**/*.ts",
+        ],
+    ),
+    module_name = "@angular/benchpress",
+    deps = [
+        "//packages:types",
+        "//packages/core",
+    ],
+)

protractor-perf.conf.js

@@ -6,9 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+// Determine if we run under bazel
+const isBazel = !!process.env.RUNFILES;
+
 // Make sure that the command line is read as the first thing
 // as this could exit node if the help script should be printed.
-require('./dist/all/e2e_util/perf_util').readCommandLine();
+const BASE = isBazel ? 'angular/modules' : 'dist/all';
+require(`./${BASE}/e2e_util/perf_util`).readCommandLine();
 
 var CHROME_OPTIONS = {
   'args': ['--js-flags=--expose-gc', '--no-sandbox'],
@@ -38,14 +42,19 @@ var BROWSER_CAPS = {
   }
 };
 
-exports.config = {
+function mergeInto(src, target) {
+  for (var prop in src) {
+    target[prop] = src[prop];
+  }
+  return target;
+}
+
+const config = {
   onPrepare: function() { beforeEach(function() { browser.ignoreSynchronization = false; }); },
   restartBrowserBetweenTests: true,
   allScriptsTimeout: 11000,
-  specs: ['dist/all/**/e2e_test/**/*_perf.js'],
   capabilities: process.env.TRAVIS ? BROWSER_CAPS.ChromeOnTravis : BROWSER_CAPS.LocalChrome,
   directConnect: true,
-  baseUrl: 'http://localhost:8000/',
   framework: 'jasmine2',
   jasmineNodeOpts: {
     showColors: true,
@@ -55,9 +64,13 @@ exports.config = {
   useAllAngular2AppRoots: true
 };
 
-function mergeInto(src, target) {
+// Bazel has different strategy for how specs and baseUrl are specified
-  for (var prop in src) {
+if (!isBazel) {
-    target[prop] = src[prop];
+  config.baseUrl = 'http://localhost:8000/';
-  }
+  config.specs = [
-  return target;
+    'dist/all/**/e2e_test/**/*_perf.spec.js',
+    'dist/all/**/e2e_test/**/*_perf.js',
+  ]
 }
+
+exports.config = config;