build: switch karma tests to rules_browsers

Switches Karma tests to our new browser testing ruleset, that is using
much more recent browser versions, and a more up-to-date future-proof
test runner called `@web/test-runner`; that is also one of the options
for Angular CLI.

Also updates the browsers because now we are using Puppeteer, yay! this
should allow us to stay up-to-date much easier!

Author: devversion

WORKSPACE

@@ -65,9 +65,9 @@ build_bazel_rules_nodejs_dependencies()
 
 http_archive(
     name = "aspect_rules_js",
-    sha256 = "75c25a0f15a9e4592bbda45b57aa089e4bf17f9176fd735351e8c6444df87b52",
-    strip_prefix = "rules_js-2.1.0",
-    url = "https://github.com/aspect-build/rules_js/releases/download/v2.1.0/rules_js-v2.1.0.tar.gz",
+    sha256 = "3388abe9b9728ef68ea8d8301f932b11b2c9a271d74741ddd5f3b34d1db843ac",
+    strip_prefix = "rules_js-2.1.1",
+    url = "https://github.com/aspect-build/rules_js/releases/download/v2.1.1/rules_js-v2.1.1.tar.gz",
 )
 
 load("@aspect_rules_js//js:repositories.bzl", "rules_js_dependencies")
@@ -249,7 +249,7 @@ load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
 git_repository(
     name = "devinfra",
-    commit = "e4bf37af223483ce00f9316d227fd62cd744dc4b",
+    commit = "b45dfa77df2021b23eeda5928ca6cd8bb89b21e7",
     remote = "https://github.com/angular/dev-infra.git",
 )
 
@@ -299,3 +299,17 @@ esbuild_register_toolchains(
     name = "esbuild",
     esbuild_version = LATEST_ESBUILD_VERSION,
 )
+
+git_repository(
+    name = "rules_browsers",
+    commit = "7e23dc705680369a323f520909d3984ae794965e",
+    remote = "https://github.com/devversion/rules_browsers.git",
+)
+
+load("@rules_browsers//setup:step_1.bzl", "rules_browsers_setup_1")
+
+rules_browsers_setup_1()
+
+load("@rules_browsers//setup:step_2.bzl", "rules_browsers_setup_2")
+
+rules_browsers_setup_2()

src/cdk/a11y/key-manager/list-key-manager.spec.ts

@@ -272,34 +272,40 @@ describe('Key managers', () => {
         });
       });
 
-      describe('with `vertical` direction', function (this: KeyEventTestContext) {
+      describe('with `vertical` direction', () => {
+        let context: KeyEventTestContext = {} as KeyEventTestContext;
+
         beforeEach(() => {
           keyManager.withVerticalOrientation();
-          this.nextKeyEvent = createKeyboardEvent('keydown', DOWN_ARROW);
-          this.prevKeyEvent = createKeyboardEvent('keydown', UP_ARROW);
+          context.nextKeyEvent = createKeyboardEvent('keydown', DOWN_ARROW);
+          context.prevKeyEvent = createKeyboardEvent('keydown', UP_ARROW);
         });
 
-        runDirectionalKeyTests.call(this);
+        runDirectionalKeyTests.call(context);
       });
 
-      describe('with `ltr` direction', function (this: KeyEventTestContext) {
+      describe('with `ltr` direction', () => {
+        let context: KeyEventTestContext = {} as KeyEventTestContext;
+
         beforeEach(() => {
           keyManager.withHorizontalOrientation('ltr');
-          this.nextKeyEvent = createKeyboardEvent('keydown', RIGHT_ARROW);
-          this.prevKeyEvent = createKeyboardEvent('keydown', LEFT_ARROW);
+          context.nextKeyEvent = createKeyboardEvent('keydown', RIGHT_ARROW);
+          context.prevKeyEvent = createKeyboardEvent('keydown', LEFT_ARROW);
         });
 
-        runDirectionalKeyTests.call(this);
+        runDirectionalKeyTests.call(context);
       });
 
-      describe('with `rtl` direction', function (this: KeyEventTestContext) {
+      describe('with `rtl` direction', () => {
+        let context: KeyEventTestContext = {} as KeyEventTestContext;
+
         beforeEach(() => {
           keyManager.withHorizontalOrientation('rtl');
-          this.nextKeyEvent = createKeyboardEvent('keydown', LEFT_ARROW);
-          this.prevKeyEvent = createKeyboardEvent('keydown', RIGHT_ARROW);
+          context.nextKeyEvent = createKeyboardEvent('keydown', LEFT_ARROW);
+          context.prevKeyEvent = createKeyboardEvent('keydown', RIGHT_ARROW);
         });
 
-        runDirectionalKeyTests.call(this);
+        runDirectionalKeyTests.call(context);
       });
 
       /**

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

@@ -12,13 +12,13 @@ def webdriver_test(name, deps, tags = [], **kwargs):
         tags = tags + ["manual"],
         data = [
             ":%s_bundle" % name,
-            "@npm//@angular/build-tooling/bazel/browsers/chromium",
+            "@rules_browsers//src/browsers/chromium",
         ],
         env = {
-            "CHROMIUM_BIN": "$(CHROMIUM)",
+            "CHROME_HEADLESS_BIN": "$(CHROME-HEADLESS-SHELL)",
             "CHROMEDRIVER": "$(CHROMEDRIVER)",
         },
-        toolchains = ["@npm//@angular/build-tooling/bazel/browsers/chromium:toolchain_alias"],
+        toolchains = ["@rules_browsers//src/browsers/chromium:toolchain_alias"],
         **kwargs
     )
 

src/cdk/testing/tests/webdriver.e2e.spec.ts

@@ -21,7 +21,7 @@ const projectRoot = path.resolve(__dirname, '../../../');
 const port = process.env['TEST_SERVER_PORT'];
 
 const chromeDriver = path.join(projectRoot, process.env['CHROMEDRIVER']!);
-const chromiumBin = path.join(projectRoot, process.env['CHROMIUM_BIN']!);
+const chromiumBin = path.join(projectRoot, process.env['CHROME_HEADLESS_BIN']!);
 
 setDefaultService(
   new ServiceBuilder(chromeDriver).enableVerboseLogging().loggingTo('/tmp/test.txt').build(),

test/BUILD.bazel

@@ -16,10 +16,12 @@ ts_project(
     name = "angular_test_init",
     testonly = True,
     # This file *must* end with "spec" in order for "karma_web_test_suite" to load it.
-    srcs = ["angular-test-init-spec.ts"],
+    srcs = ["angular-test.init.ts"],
     tsconfig = ":tsconfig",
     deps = [
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/platform-browser",
+        "//:node_modules/reflect-metadata",
+        "//:node_modules/zone.js",
     ],
 )

test/angular-test-init-spec.ts renamed to test/angular-test.init.ts

@@ -6,6 +6,10 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import 'zone.js';
+import 'zone.js/testing';
+import 'reflect-metadata';
+
 import {ErrorHandler, NgModule, provideExperimentalZonelessChangeDetection} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {BrowserTestingModule, platformBrowserTesting} from '@angular/platform-browser/testing';

tools/defaults.bzl

@@ -8,7 +8,6 @@ load("@npm//@angular/build-tooling/bazel/integration:index.bzl", _integration_te
 load("@npm//@angular/build-tooling/bazel/esbuild:index.bzl", _esbuild = "esbuild", _esbuild_config = "esbuild_config")
 load("@npm//@angular/build-tooling/bazel/http-server:index.bzl", _http_server = "http_server")
 load("@npm//@angular/build-tooling/bazel:extract_js_module_output.bzl", "extract_js_module_output")
-load("@npm//@bazel/protractor:index.bzl", _protractor_web_test_suite = "protractor_web_test_suite")
 load("//:packages.bzl", "NO_STAMP_NPM_PACKAGE_SUBSTITUTIONS", "NPM_PACKAGE_SUBSTITUTIONS")
 load("//:pkg-externals.bzl", "PKG_EXTERNALS")
 load("//tools/markdown-to-html:index.bzl", _markdown_to_html = "markdown_to_html")
@@ -148,12 +147,12 @@ def protractor_web_test_suite(name, deps, **kwargs):
         external = ["protractor", "selenium-webdriver"],
     )
 
-    _protractor_web_test_suite(
-        name = name,
-        browsers = ["@npm//@angular/build-tooling/bazel/browsers/chromium:chromium"],
-        deps = ["%s_bundle" % name],
-        **kwargs
-    )
+    #_protractor_web_test_suite(
+    #    name = name,
+    #    browsers = ["@npm//@angular/build-tooling/bazel/browsers/chromium:chromium"],
+    #    deps = ["%s_bundle" % name],
+    #    **kwargs
+    #)
 
 def node_integration_test(setup_chromium = False, node_repository = "nodejs", **kwargs):
     """Macro for defining an integration test with `node` and `yarn` being
@@ -191,20 +190,6 @@ def node_integration_test(setup_chromium = False, node_repository = "nodejs", **
     )
 
 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/main/packages/schematics/angular/application/files/src/polyfills.ts.template#L58
-        # https://github.com/angular/angular-cli/blob/main/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/bundles/zone.umd.js",
-        "@npm//:node_modules/zone.js/bundles/zone-testing.umd.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
@@ -213,6 +198,8 @@ def ng_web_test_suite(deps = [], static_css = [], exclude_init_script = False, *
         "//src/material/prebuilt-themes:azure-blue",
     ]
 
+    bootstrap = []
+
     # Workaround for https://github.com/bazelbuild/rules_typescript/issues/301
     # Since some of our tests depend on CSS files which are not part of the `ng_project` rule,
     # we need to somehow load static CSS files within Karma (e.g. overlay prebuilt). Those styles
@@ -226,7 +213,7 @@ def ng_web_test_suite(deps = [], static_css = [], exclude_init_script = False, *
         native.genrule(
             name = css_id,
             srcs = [css_label],
-            outs = ["%s.css.js" % css_id],
+            outs = ["%s.css.init.js" % css_id],
             output_to_bindir = True,
             cmd = """
         files=($(execpaths %s))
@@ -244,8 +231,8 @@ def ng_web_test_suite(deps = [], static_css = [], exclude_init_script = False, *
 
     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 = bootstrap,
+        deps = deps,
+        bootstrap = ["//test:angular_test_init"] + bootstrap,
         **kwargs
     )
 

tools/defaults2.bzl

@@ -3,8 +3,8 @@ load("//tools/bazel:ts_project_interop.bzl", _ts_project = "ts_project")
 load("//tools/bazel:module_name.bzl", "compute_module_name")
 load("@aspect_rules_js//npm:defs.bzl", _npm_package = "npm_package")
 load("@rules_angular//src/ng_project:index.bzl", _ng_project = "ng_project")
-load("@devinfra//bazel/spec-bundling:index_rjs.bzl", "spec_bundle_amd", _spec_bundle = "spec_bundle")
-load("@devinfra//bazel/karma:index.bzl", _karma_web_test_suite = "karma_web_test_suite")
+load("@devinfra//bazel/spec-bundling:index_rjs.bzl", _spec_bundle = "spec_bundle")
+load("@rules_browsers//src/wtr:index.bzl", "wtr_test")
 
 spec_bundle = _spec_bundle
 
@@ -77,11 +77,11 @@ def jasmine_test(name, data = [], args = [], external = [], **kwargs):
         **kwargs
     )
 
-def karma_web_test_suite(name, tags = [], deps = [], browsers = None, **kwargs):
-    spec_bundle_amd(
+def karma_web_test_suite(name, tags = [], deps = [], bootstrap = [], **kwargs):
+    spec_bundle(
         name = "%s_bundle" % name,
-        workspace_name = "angular_material",
         srcs = ["//src:build-tsconfig"],
+        bootstrap = bootstrap,
         deps = deps,
         config = {
             "resolveExtensions": [".js"],
@@ -91,20 +91,8 @@ def karma_web_test_suite(name, tags = [], deps = [], browsers = None, **kwargs):
 
     test_tags = ["partial-compilation-integration"] + tags
 
-    # Set up default browsers if no explicit `browsers` have been specified.
-    if browsers == None:
-        test_tags.append("native")
-        browsers = [
-            # Note: when changing the browser names here, also update the "yarn test"
-            # script to reflect the new browser names.
-            "@npm//@angular/build-tooling/bazel/browsers/chromium:chromium",
-            "@npm//@angular/build-tooling/bazel/browsers/firefox:firefox",
-        ]
-
-    _karma_web_test_suite(
+    wtr_test(
         name = name,
-        tags = test_tags,
         deps = [":%s_bundle" % name],
-        browsers = browsers,
-        **kwargs
+        tags = test_tags,
     )