build: run esbuild as build step before running browser or e2e tests

Similar to the reason why we switched the dev-app and e2e-app to use
ESBuild, we will use ESBuild as a step in between for running browser
Karma tests, or running e2e protractor/selenium-webdriver tests.

This allows us to incorporate the framework linked ESM bundles and
helps working around the change that no UMD bundles are available for
APF v13 packages. Running ESBuild as a build step in between seems
non-significant as on the other hand the module resolution in the
browser for Karma seemed noticeable slower (due to it loading hundreds
of files individually); and also the Karma browser setup required more
manual maintenance (through RequireJS configurations).

Author: devversion

.bazelrc

@@ -51,6 +51,10 @@ build:release --stamp
 build:snapshot-build --workspace_status_command="yarn -s ng-dev release build-env-stamp --mode=snapshot"
 build:snapshot-build --stamp
 
+####################################
+# Bazel custom flags               #
+####################################
+build --flag_alias=partial_compilation=@npm//@angular/bazel/src:partial_compilation
 
 ##################################
 # Always enable Ivy compilation  #

package.json

@@ -39,9 +39,8 @@
     "merge": "ng-dev pr merge",
     "approve-api": "node ./scripts/approve-api-golden.js",
     "approve-size-tests": "node ./scripts/approve-size-golden.js",
-    "integration-tests": "bazel test --test_tag_filters=-view-engine-only,-linker-integration-test --build_tests_only -- //integration/... -//integration/size-test/...",
-    "integration-tests:view-engine": "bazel test --test_tag_filters=view-engine-only --build_tests_only -- //integration/... -//integration/size-test/...",
-    "integration-tests:partial-ivy": "bazel test --//tools:partial_compilation=True --test_tag_filters=partial-compilation-integration,-firefox --build_tests_only -- //integration/... //src/...",
+    "integration-tests": "bazel test --test_tag_filters=-linker-integration-test --build_tests_only -- //integration/... -//integration/size-test/...",
+    "integration-tests:partial-ivy": "bazel test --partial_compilation --test_tag_filters=partial-compilation-integration,-firefox --build_tests_only -- //integration/... //src/...",
     "integration-tests:size-test": "bazel test //integration/size-test/...",
     "check-mdc-tests": "ts-node --project scripts/tsconfig.json scripts/check-mdc-tests.ts",
     "check-mdc-exports": "ts-node --project scripts/tsconfig.json scripts/check-mdc-exports.ts",

src/cdk/a11y/focus-trap/focus-trap.spec.ts

@@ -11,7 +11,6 @@ import {PortalModule, CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal
 import {A11yModule, FocusTrap, CdkTrapFocus} from '../index';
 import {By} from '@angular/platform-browser';
 
-
 describe('FocusTrap', () => {
 
   beforeEach(waitForAsync(() => {

src/cdk/testing/BUILD.bazel

@@ -29,13 +29,7 @@ filegroup(
 
 ng_web_test_suite(
     name = "unit_tests",
-    # We need to load Kagekiri statically since it is not a named AMD module and needs to
-    # be manually configured through "require.js" which is used by "karma_web_test_suite".
-    static_files = [
-        "@npm//kagekiri",
-    ],
     deps = [
-        ":require-config.js",
         "//src/cdk/testing/tests:unit_test_sources",
     ],
 )

src/cdk/testing/require-config.js

@@ -1,11 +1,20 @@
 load("//tools:defaults.bzl", "jasmine_node_test")
 load("@io_bazel_rules_webtesting//web:web.bzl", "web_test")
 load("//tools/server-test:index.bzl", "server_test")
+load("//tools/spec-bundling:index.bzl", "spec_bundle")
+
+def webdriver_test(name, deps, tags = [], **kwargs):
+    spec_bundle(
+        name = "%s_bundle" % name,
+        deps = deps,
+        platform = "node",
+        external = ["selenium-webdriver"],
+    )
 
-def webdriver_test(name, tags = [], **kwargs):
     jasmine_node_test(
         name = "%s_jasmine_test" % name,
         tags = tags + ["manual"],
+        deps = ["%s_bundle" % name, "@npm//selenium-webdriver"],
         **kwargs
     )
 

src/cdk/testing/tests/webdriver-test.bzl

@@ -1,5 +1,4 @@
 load("//tools:defaults.bzl", "ng_module", "ng_package", "ng_test_library", "ng_web_test_suite")
-load("//tools/esbuild:index.bzl", "esbuild_amd")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -33,28 +32,10 @@ ng_test_library(
 ng_web_test_suite(
     name = "unit_tests",
     deps = [
-        ":amd_date_fns",
-        ":amd_date_fns_locales",
         ":unit_test_sources",
     ],
 )
 
-esbuild_amd(
-    name = "amd_date_fns",
-    testonly = True,
-    entry_point = "@npm//:node_modules/date-fns/esm/index.js",
-    module_name = "date-fns",
-    deps = ["@npm//date-fns"],
-)
-
-esbuild_amd(
-    name = "amd_date_fns_locales",
-    testonly = True,
-    entry_point = "@npm//:node_modules/date-fns/esm/locale/index.js",
-    module_name = "date-fns/locale",
-    deps = ["@npm//date-fns"],
-)
-
 ng_package(
     name = "npm_package",
     srcs = ["package.json"],

src/material-date-fns-adapter/BUILD.bazel

@@ -33,13 +33,7 @@ ng_test_library(
 
 ng_web_test_suite(
     name = "unit_tests",
-    # We need to load Luxon statically since it is not a named AMD module and needs to
-    # be manually configured through "require.js" which is used by "karma_web_test_suite".
-    static_files = [
-        "@npm//luxon",
-    ],
     deps = [
-        ":require-config.js",
         ":unit_test_sources",
     ],
 )

src/material-luxon-adapter/BUILD.bazel

@@ -16,12 +16,6 @@ ng_module(
     ],
 )
 
-ts_config(
-    name = "tsconfig",
-    src = "tsconfig-build.json",
-    deps = ["//src:bazel-tsconfig-build.json"],
-)
-
 ng_test_library(
     name = "unit_test_sources",
     srcs = glob(
@@ -38,13 +32,7 @@ ng_test_library(
 
 ng_web_test_suite(
     name = "unit_tests",
-    # We need to load Moment statically since it is not a named AMD module and needs to
-    # be manually configured through "require.js" which is used by "karma_web_test_suite".
-    static_files = [
-        "@npm//moment",
-    ],
     deps = [
-        ":require-config.js",
         ":unit_test_sources",
     ],
 )

src/material-moment-adapter/BUILD.bazel

@@ -13,7 +13,10 @@ import {DEC, FEB, JAN, MAR} from '../../material/testing';
 import {MomentDateModule} from './index';
 import {MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter} from './moment-date-adapter';
 
-import * as moment from 'moment';
+import moment from 'moment';
+
+// Import all locales for specs relying on non-US locales.
+import 'moment/min/locales';
 
 describe('MomentDateAdapter', () => {
   let adapter: MomentDateAdapter;

src/material-moment-adapter/adapter/moment-date-adapter.spec.ts

@@ -1,17 +1,15 @@
-load("@bazel_skylib//rules:common_settings.bzl", "bool_flag")
-
 package(default_visibility = ["//visibility:public"])
 
 exports_files([
     "system-config-tmpl.js",
-    "system-rxjs-operators.js",
 ])
 
-# Bazel config setting that matches if the partial compilation flag is set to `True`.
+# Bazel config setting that matches if the partial compilation flag
+# for `@angular/bazel` is set to `True`.
 config_setting(
     name = "partial_compilation_enabled",
     flag_values = {
-        ":partial_compilation": "True",
+        "@npm//@angular/bazel/src:partial_compilation": "True",
     },
 )
 

src/material-moment-adapter/require-config.js

@@ -11,6 +11,7 @@ load("//:packages.bzl", "VERSION_PLACEHOLDER_REPLACEMENTS")
 load("//:pkg-externals.bzl", "PKG_EXTERNALS")
 load("//tools/markdown-to-html:index.bzl", _markdown_to_html = "markdown_to_html")
 load("//tools/linker-process:index.bzl", "linker_process")
+load("//tools/spec-bundling:index.bzl", "spec_bundle")
 
 _DEFAULT_TSCONFIG_BUILD = "//src:bazel-tsconfig-build.json"
 _DEFAULT_TSCONFIG_TEST = "//src:tsconfig-test"
@@ -244,27 +245,15 @@ def ng_e2e_test_library(deps = [], tsconfig = None, **kwargs):
 
 def karma_web_test_suite(name, **kwargs):
     web_test_args = {}
-    test_deps = ["//tools/rxjs:rxjs_umd_modules"] + kwargs.get("deps", [])
-
-    # Note: Ideally we would not add all Angular and MDC UMD files to a test because
-    # some might be unused. This would require some custom tooling to resolve the
-    # correct named AMD files from transitive dependencies and is not worth the effort
-    # given the UMD files being small and most of the packages being used anyway.
-    # TODO(devversion): reconsider this if `rules_nodejs` can recognize named AMD files.
-    kwargs["srcs"] = ["@npm//:node_modules/tslib/tslib.js"] + getAngularUmdTargets() + \
-                     MDC_PACKAGE_UMD_BUNDLES.values() + kwargs.get("srcs", [])
+    test_deps = kwargs.get("deps", [])
+
     kwargs["tags"] = ["partial-compilation-integration"] + kwargs.get("tags", [])
-    kwargs["deps"] = select({
-        # Based on whether partial compilation is enabled, use the linker processed dependencies.
-        "//tools:partial_compilation_enabled": ["%s_linker_processed_deps" % name],
-        "//conditions:default": test_deps,
-    })
-
-    linker_process(
-        name = "%s_linker_processed_deps" % name,
-        srcs = test_deps,
-        testonly = True,
-        tags = ["manual"],
+    kwargs["deps"] = ["%s_bundle" % name]
+
+    spec_bundle(
+        name = "%s_bundle" % name,
+        deps = test_deps,
+        platform = "browser",
     )
 
     # Set up default browsers if no explicit `browsers` have been specified.
@@ -306,13 +295,36 @@ def karma_web_test_suite(name, **kwargs):
         **kwargs
     )
 
-def protractor_web_test_suite(**kwargs):
+def protractor_web_test_suite(name, deps, **kwargs):
+    spec_bundle(
+        name = "%s_bundle" % name,
+        deps = deps,
+        platform = "node",
+        external = ["protractor", "selenium-webdriver"],
+    )
+
     _protractor_web_test_suite(
+        name = name,
         browsers = ["@npm//@angular/dev-infra-private/bazel/browsers/chromium:chromium"],
+        deps = ["%s_bundle" % name],
         **kwargs
     )
 
-def ng_web_test_suite(deps = [], static_css = [], bootstrap = [], exclude_init_script = False, **kwargs):
+def ng_web_test_suite(deps = [], static_css = [], exclude_init_script = False, **kwargs):
+    bootstrap = [
+        # This matches the ZoneJS bundles used in default CLI projects. See:
+        # https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/application/files/src/polyfills.ts.template#L58
+        # https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/application/files/src/test.ts.template#L3
+        # Note `zone.js/dist/zone.js` is aliased in the CLI to point to the evergreen
+        # output that does not include legacy patches. See: https://github.com/angular/angular/issues/35157.
+        # TODO: Consider adding the legacy patches when testing Saucelabs/Browserstack with Bazel.
+        # CLI loads the legacy patches conditionally for ES5 legacy browsers. See:
+        # https://github.com/angular/angular-cli/blob/277bad3895cbce6de80aa10a05c349b10d9e09df/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L141
+        "@npm//:node_modules/zone.js/dist/zone-evergreen.js",
+        "@npm//:node_modules/zone.js/dist/zone-testing.js",
+        "@npm//:node_modules/reflect-metadata/Reflect.js",
+    ] + kwargs.pop("bootstrap", [])
+
     # Always include a prebuilt theme in the test suite because otherwise tests, which depend on CSS
     # that is needed for measuring, will unexpectedly fail. Also always adding a prebuilt theme
     # reduces the amount of setup that is needed to create a test suite Bazel target. Note that the
@@ -330,12 +342,12 @@ def ng_web_test_suite(deps = [], static_css = [], bootstrap = [], exclude_init_s
     # loads the given CSS file.
     for css_label in static_css:
         css_id = "static-css-file-%s" % (css_label.replace("/", "_").replace(":", "-"))
-        deps += [":%s" % css_id]
+        bootstrap += [":%s" % css_id]
 
         native.genrule(
             name = css_id,
             srcs = [css_label],
-            outs = ["%s.js" % css_id],
+            outs = ["%s.css.js" % css_id],
             output_to_bindir = True,
             cmd = """
         files=($(execpaths %s))
@@ -354,18 +366,6 @@ def ng_web_test_suite(deps = [], static_css = [], bootstrap = [], exclude_init_s
     karma_web_test_suite(
         # Depend on our custom test initialization script. This needs to be the first dependency.
         deps = deps if exclude_init_script else ["//test:angular_test_init"] + deps,
-        bootstrap = [
-            # This matches the ZoneJS bundles used in default CLI projects. See:
-            # https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/application/files/src/polyfills.ts.template#L58
-            # https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/application/files/src/test.ts.template#L3
-            # Note `zone.js/dist/zone.js` is aliased in the CLI to point to the evergreen
-            # output that does not include legacy patches. See: https://github.com/angular/angular/issues/35157.
-            # TODO: Consider adding the legacy patches when testing Saucelabs/Browserstack with Bazel.
-            # CLI loads the legacy patches conditionally for ES5 legacy browsers. See:
-            # https://github.com/angular/angular-cli/blob/277bad3895cbce6de80aa10a05c349b10d9e09df/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L141
-            "@npm//:node_modules/zone.js/dist/zone-evergreen.js",
-            "@npm//:node_modules/zone.js/dist/zone-testing.js",
-            "@npm//:node_modules/reflect-metadata/Reflect.js",
-        ] + bootstrap,
+        bootstrap = bootstrap,
         **kwargs
     )

tools/BUILD.bazel

@@ -0,0 +1,3 @@
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["esbuild.config-tmpl.mjs"])

tools/defaults.bzl

@@ -0,0 +1,29 @@
+/**
+ * @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
+ */
+
+// Note: This needs to be a workspace manifest path as this ESBuild config
+// is generated and can end up in arbitrary Bazel packages.
+import {
+  createLinkerEsbuildPlugin
+} from 'angular_material/tools/angular/create_linker_esbuild_plugin.mjs';
+
+// Conditionally, based on whether partial compilation is enabled, we run the
+// linker on all files part of the test.
+const plugins = TMPL_PARTIAL_COMPILATION_ENABLED ?
+  [await createLinkerEsbuildPlugin(/.*/, /* ensureNoPartialDeclaration */ true)] : []
+
+export default {
+  // `tslib` sets the `module` condition to resolve to ESM.
+  conditions: ['es2020', 'es2015', 'module'],
+  // This ensures that we prioritize ES2020. RxJS would otherwise use the ESM5 output.
+  mainFields: ['es2020', 'es2015', 'module', 'main'],
+  // Use the `iife` format for the test entry-point as tests should run immediately.
+  // For browser tests which are wrapped in an AMD header and footer, this works as well.
+  format: 'iife',
+  plugins,
+};