build: convert largeform benchmarks to bazel (#28645)

Switches the `largeform` benchmarks to Bazel.
This is the last remaining e2e test within `modules/`.

PR Close #28645

modules/benchmarks/src/largeform/BUILD.bazel

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

modules/benchmarks/src/largeform/largeform_perf.spec.ts

@@ -0,0 +1,65 @@
+/**
+ * @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';
+
+interface Worker {
+  id: string;
+  prepare?(): void;
+  work(): void;
+}
+
+const CreateAndDestroyWorker = {
+  id: 'createDestroy',
+  work: () => {
+    $('#createDom').click();
+    $('#destroyDom').click();
+  }
+};
+
+describe('largeform benchmark spec', () => {
+
+  afterEach(verifyNoBrowserErrors);
+
+  it('should work for ng2', () => {
+    openBrowser({
+      url: '/',
+      params: [{name: 'copies', value: 1}],
+      ignoreBrowserSynchronization: true,
+    });
+    $('#createDom').click();
+    expect(element.all(By.css('input[name=value0]')).get(0).getAttribute('value'))
+        .toBe('someValue0');
+    $('#destroyDom').click();
+    expect(element.all(By.css('input[name=value0]')).count()).toBe(0);
+  });
+
+  [CreateAndDestroyWorker].forEach((worker) => {
+    describe(worker.id, () => {
+      it('should run for ng2', done => {
+        runLargeFormBenchmark({url: '/', id: `largeform.ng2.${worker.id}`, worker: worker})
+            .then(done, done.fail);
+      });
+    });
+  });
+
+  function runLargeFormBenchmark(
+      config: {id: string, url: string, ignoreBrowserSynchronization?: boolean, worker: Worker}) {
+    return runBenchmark({
+      id: config.id,
+      url: config.url,
+      params: [{name: 'copies', value: 8}],
+      ignoreBrowserSynchronization: config.ignoreBrowserSynchronization,
+      prepare: config.worker.prepare,
+      work: config.worker.work
+    });
+  }
+});

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

@@ -0,0 +1,45 @@
+load("//tools:defaults.bzl", "ng_module")
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
+load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test")
+
+package(default_visibility = ["//modules/benchmarks:__subpackages__"])
+
+# Note that this benchmark has been designed for Angular with ViewEngine, but once ViewEngine is
+# removed, we should keep this benchmark and run it with Ivy (potentially rename it to "render3")
+ng_module(
+    name = "ng2",
+    srcs = glob(["*.ts"]),
+    # FIXME-IVY(FW-998): ExpressionTranslatorVisitor#visitWriteKeyExpr is not implemented.
+    tags = ["fixme-ivy-aot"],
+    tsconfig = "//modules/benchmarks:tsconfig-build.json",
+    # TODO: FW-1004 Type checking is currently not complete.
+    type_check = False,
+    deps = [
+        "//modules/benchmarks/src:util_lib",
+        "//packages/core",
+        "//packages/forms",
+        "//packages/platform-browser",
+        "//packages/platform-browser-dynamic",
+    ],
+)
+
+ts_devserver(
+    name = "devserver",
+    entry_module = "angular/modules/benchmarks/src/largeform/ng2/index",
+    index_html = "index.html",
+    port = 4200,
+    scripts = ["@ngdeps//node_modules/tslib:tslib.js"],
+    static_files = [
+        "@ngdeps//node_modules/zone.js:dist/zone.js",
+        "@ngdeps//node_modules/reflect-metadata:Reflect.js",
+    ],
+    tags = ["fixme-ivy-aot"],
+    deps = [":ng2"],
+)
+
+benchmark_test(
+    name = "perf",
+    server = ":devserver",
+    tags = ["fixme-ivy-aot"],
+    deps = ["//modules/benchmarks/src/largeform:tests_lib"],
+)

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

@@ -19,11 +19,5 @@
   <div>
     <app id="root">Loading...</app>
   </div>
-
-  <script>
-    var mainUrl = window.location.search.split(/[?&]main=([^&]+)/)[1]
-      || '../../bootstrap_ng2.js';
-    document.write('<script src="' + mainUrl + '">\u003c/script>');
-  </script>
 </body>
 </html>

modules/benchmarks/src/largeform/ng2/index.ts

@@ -12,7 +12,5 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {AppModule} from './app';
 import {init} from './init';
 
-export function main() {
-  enableProdMode();
-  platformBrowserDynamic().bootstrapModule(AppModule).then(init);
-}
+enableProdMode();
+platformBrowserDynamic().bootstrapModule(AppModule).then(init);

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

@@ -4,6 +4,9 @@ load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test")
 
 package(default_visibility = ["//modules/benchmarks:__subpackages__"])
 
+# Note that this benchmark has been designed for Angular with ViewEngine, but once
+# ViewEngine is removed, we should should consider removing this one since there
+# already is a "render3" benchmark.
 ng_module(
     name = "ng2",
     srcs = glob(["*.ts"]),