build: bundle tests for karma web test suites (#48538)

Since Karma with Bazel does not support ESM natively, we bundle the
tests using ESBuild into a single AMD file. This not only solves the
ESM issue until we can run browser ESM tests natively (also pending
in the components repo - the esbuild generation follows ESM semantics
but since collapsed we don't rely on the real module system).

A benefit of bundling is also faster and more reliable Karma browser
tests since only a single file needs to be loaded- compared to hundreds
of individual files.

PR Close #48538

BUILD.bazel

@@ -26,20 +26,6 @@ alias(
     actual = "//packages:tsconfig-build.json",
 )
 
-filegroup(
-    name = "web_test_bootstrap_scripts",
-    # do not sort
-    srcs = [
-        "@npm//:node_modules/core-js-bundle/index.js",
-        "//packages/zone.js/bundles:zone.umd.js",
-        "//packages/zone.js/bundles:zone-testing.umd.js",
-        "//packages/zone.js/bundles:task-tracking.umd.js",
-        # Including systemjs because it defines `__eval`, which produces correct stack traces.
-        "@npm//:node_modules/systemjs/dist/system.src.js",
-        "@npm//:node_modules/reflect-metadata/Reflect.js",
-    ],
-)
-
 filegroup(
     name = "angularjs_scripts",
     srcs = [

packages/core/test/BUILD.bazel

@@ -127,6 +127,7 @@ jasmine_node_test(
 
 karma_web_test_suite(
     name = "test_web",
+    external = ["@angular/platform-server"],
     runtime_deps = [":downleveled_es5_fixture"],
     deps = [
         ":test_lib",

packages/platform-browser/test/BUILD.bazel

@@ -52,7 +52,6 @@ karma_web_test_suite(
     name = "test_web",
     bootstrap = [
         "dom/events/zone_event_unpatched_init.js",
-        "//:web_test_bootstrap_scripts",
     ],
     static_files = [
         ":static_assets/test.html",

packages/private/testing/BUILD.bazel

@@ -9,6 +9,7 @@ exports_files(["package.json"])
 
 ng_module(
     name = "testing",
+    package_name = "@angular/private/testing",
     testonly = True,
     srcs = glob(
         ["**/*.ts"],

packages/zone.js/lib/BUILD.bazel

@@ -16,6 +16,7 @@ ts_library(
 
 ts_library(
     name = "lib",
+    package_name = "zone.js/lib",
     srcs = glob(
         ["**/*.ts"],
         exclude = ["zone.ts"],

tools/defaults.bzl

@@ -16,6 +16,7 @@ load("@npm//@angular/build-tooling/bazel:extract_js_module_output.bzl", "extract
 load("@npm//@angular/build-tooling/bazel:extract_types.bzl", _extract_types = "extract_types")
 load("@npm//@angular/build-tooling/bazel/esbuild:index.bzl", _esbuild = "esbuild", _esbuild_config = "esbuild_config")
 load("@npm//@angular/build-tooling/bazel/spec-bundling:spec-entrypoint.bzl", "spec_entrypoint")
+load("@npm//@angular/build-tooling/bazel/spec-bundling:index.bzl", "spec_bundle")
 load("@npm//tsec:index.bzl", _tsec_test = "tsec_test")
 load("//packages/bazel:index.bzl", _ng_module = "ng_module", _ng_package = "ng_package")
 load("//tools/esm-interop:index.bzl", "enable_esm_node_module_loader", "extract_esm_outputs", _nodejs_binary = "nodejs_binary", _nodejs_test = "nodejs_test")
@@ -297,35 +298,33 @@ def pkg_npm(name, validate = True, use_prodmode_output = False, **kwargs):
         visibility = visibility,
     )
 
-def karma_web_test_suite(name, **kwargs):
+def karma_web_test_suite(name, external = [], **kwargs):
     """Default values for karma_web_test_suite"""
 
     # Default value for bootstrap
-    bootstrap = kwargs.pop("bootstrap", [
-        "//:web_test_bootstrap_scripts",
-    ])
-
-    # Add common deps
-    deps = kwargs.pop("deps", []) + [
-        "@npm//karma-sauce-launcher",
-        "@npm//:node_modules/tslib/tslib.js",
-        "//tools/rxjs:rxjs_umd_modules",
-        "//packages/zone.js:npm_package",
-    ]
-
-    # Add common runtime deps
-    runtime_deps = kwargs.pop("runtime_deps", []) + [
+    bootstrap = kwargs.pop("bootstrap", []) + [
         "//tools/testing:browser",
     ]
 
+    # Add common deps
+    deps = kwargs.pop("deps", [])
     data = kwargs.pop("data", [])
     tags = kwargs.pop("tags", [])
 
+    spec_bundle(
+        name = "%s_bundle" % name,
+        # Specs from this attribute are filtered and will be executed. We
+        # add bootstrap here for discovery of the module mappings aspect.
+        deps = deps + bootstrap,
+        bootstrap = bootstrap,
+        workspace_name = "angular",
+        external = external,
+        platform = "browser",
+    )
+
     _karma_web_test_suite(
         name = name,
-        runtime_deps = runtime_deps,
-        bootstrap = bootstrap,
-        deps = deps,
+        deps = [":%s_bundle" % name],
         browsers = [
             "@npm//@angular/build-tooling/bazel/browsers/chromium:chromium",
             "@npm//@angular/build-tooling/bazel/browsers/firefox:firefox",
@@ -343,10 +342,12 @@ def karma_web_test_suite(name, **kwargs):
         # unnecessarily being acquired. Our specified Saucelabs idle timeout is 10min, so we use
         # Bazel's long timeout (15min). This ensures that Karma can shut down properly.
         timeout = "long",
-        runtime_deps = runtime_deps,
         bootstrap = bootstrap,
         config_file = "//:karma-js.conf.js",
-        deps = deps,
+        deps = [
+            "@npm//karma-sauce-launcher",
+            ":%s_bundle" % name,
+        ],
         data = data + [
             "//:browser-providers.conf.js",
         ],

tools/testing/BUILD.bazel

@@ -2,15 +2,26 @@ load("//tools:defaults.bzl", "jasmine_node_test", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
+ts_library(
+    name = "zone_base_setup_lib",
+    testonly = 1,
+    srcs = ["zone_base_setup.ts"],
+    deps = [
+        "//packages/zone.js/lib",
+    ],
+)
+
 ts_library(
     name = "browser",
     testonly = 1,
     srcs = ["browser_tests.init.ts"],
     deps = [
+        ":zone_base_setup_lib",
         "//packages/compiler",
         "//packages/core/testing",
         "//packages/platform-browser-dynamic/testing",
         "//packages/platform-browser/animations",
+        "//packages/zone.js/lib",
     ],
 )
 
@@ -19,6 +30,7 @@ ts_library(
     testonly = 1,
     srcs = ["node_tests.init.ts"],
     deps = [
+        ":zone_base_setup_lib",
         "//packages/compiler",
         "//packages/core/testing",
         "//packages/platform-server",

tools/testing/browser_tests.init.ts

@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import 'zone.js/lib/browser/rollup-main';
+import './zone_base_setup';
 import '@angular/compiler'; // For JIT mode. Must be in front of any other @angular/* imports.
 
 import {TestBed} from '@angular/core/testing';

tools/testing/node_tests.init.ts

@@ -7,14 +7,7 @@
  */
 
 import 'zone.js/lib/node/rollup-main';
-import 'zone.js/lib/zone-spec/long-stack-trace';
-import 'zone.js/lib/zone-spec/task-tracking';
-import 'zone.js/lib/zone-spec/proxy';
-import 'zone.js/lib/zone-spec/sync-test';
-import 'zone.js/lib/testing/async-testing';
-import 'zone.js/lib/testing/fake-async';
-import 'reflect-metadata/Reflect';
-import 'zone.js/lib/jasmine/jasmine';
+import './zone_base_setup';
 
 (global as any).isNode = true;
 (global as any).isBrowser = false;

tools/testing/zone_base_setup.ts

@@ -0,0 +1,16 @@
+/**
+ * @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 'zone.js/lib/zone-spec/long-stack-trace';
+import 'zone.js/lib/zone-spec/task-tracking';
+import 'zone.js/lib/zone-spec/proxy';
+import 'zone.js/lib/zone-spec/sync-test';
+import 'zone.js/lib/testing/async-testing';
+import 'zone.js/lib/testing/fake-async';
+import 'reflect-metadata/Reflect';
+import 'zone.js/lib/jasmine/jasmine';