build: switch integration tests to pnpm and use rules_js-based rule

Switchs all integration tests to pnpm, solving one of our annoying bugs
when installing integration test deps. It also seems much faster.

In the future, we are considering allowing the local profile pnpm cache,
even within the Bazel sandbox, but for now we continue installing
dependencies via internet.

In practice we even install a bit more dependencies now, but that is a
trade-off we accept, because it's not making anything worse, but instead
allows us to finally:

- easily update the lock files manually
- let renovate maintain versions of our integration tests; keeping them
  up-to-date.

Author: devversion

WORKSPACE

@@ -102,7 +102,6 @@ rules_js_register_toolchains(
 )
 
 load("@build_bazel_rules_nodejs//:index.bzl", "yarn_install")
-load("//tools:integration.bzl", "create_npm_package_archive_build_file")
 
 yarn_install(
     name = "npm",
@@ -120,8 +119,6 @@ yarn_install(
     #  1. Missing Windows support currently.
     #  2. Incompatibilites with the `ts_library` rule.
     exports_directories_only = False,
-    # Add archive targets for some NPM packages that are needed in integration tests.
-    manual_build_file_contents = create_npm_package_archive_build_file(),
     package_json = "//:package.json",
     quiet = False,
     yarn = "//:.yarn/releases/yarn-1.22.17.cjs",
@@ -205,6 +202,7 @@ npm_translate_lock(
         "@angular/material-luxon-adapter": ["//integration:__subpackages__"],
     },
     pnpm_lock = "//:pnpm-lock.yaml",
+    pnpm_version = "9.14.1",
     update_pnpm_lock = True,
     verify_node_modules_ignored = "//:.bazelignore",
     yarn_lock = "//:yarn.lock",
@@ -251,7 +249,7 @@ load("@bazel_tools//tools/build_defs/repo:git.bzl", "git_repository")
 
 git_repository(
     name = "devinfra",
-    commit = "cddc66a76ac0183790bc7a9fc1e5cf9f87512375",
+    commit = "c4f7d3cdec164044284139182b709dfd4be339ed",
     remote = "https://github.com/angular/dev-infra.git",
 )
 

integration/harness-e2e-cli/BUILD.bazel

@@ -1,36 +1,16 @@
-load("@bazel_skylib//lib:dicts.bzl", "dicts")
-load("//tools:integration.bzl", "CLI_PROJECT_MAPPINGS")
-load("//tools:defaults.bzl", "node_integration_test")
+load("//tools:integration.bzl", "LOCAL_NPM_PACKAGES", "integration_test")
 
-npmPackageMappings = dicts.add(
-    dicts.omit(
-        CLI_PROJECT_MAPPINGS,
-        # Exclude rxjs, because we want to use the version from the package.json.
-        # Version 6.x that the rest of the project uses has some packaging issues. See:
-        # https://github.com/angular/components/pull/25241#issuecomment-1178701633
-        ["@npm//:rxjs_archive"],
-    ),
-    {
-        "//src/cdk:npm_package_archive": "@angular/cdk",
-        "//src/material:npm_package_archive": "@angular/material",
-    },
-)
-
-node_integration_test(
+integration_test(
     name = "test",
     srcs = glob(["**/*"]),
     commands = [
-        # Note: We use a cache folder within the integration test as otherwise
-        # the NPM package mapped archive would be cached in the system.
-        # See: https://github.com/yarnpkg/yarn/issues/2165.
-        # TODO(devversion): determine if a solution/workaround could live in the test runner.
-        "yarn install --cache-folder .yarn_cache_folder/",
-        "yarn e2e",
+        "pnpm i",
+        "pnpm run e2e",
     ],
-    npm_packages = npmPackageMappings,
+    npm_packages = LOCAL_NPM_PACKAGES,
     setup_chromium = True,
     tags = [
-        # This test relies on `yarn` so there needs to be internet access.
+        # This test relies on `pnpm` so there needs to be internet access.
         "requires-network",
     ],
 )

integration/harness-e2e-cli/package.json

@@ -8,36 +8,35 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "run-e2e-specs": "node --loader ts-node/esm node_modules/jasmine/bin/jasmine --config=e2e/jasmine.json",
-    "wait-and-run-e2e": "wait-on http://localhost:4200 && yarn run-e2e-specs",
-    "e2e": "concurrently -s first -k 'ng serve' 'yarn wait-and-run-e2e'"
+    "wait-and-run-e2e": "wait-on http://localhost:4200 && pnpm run-e2e-specs",
+    "e2e": "concurrently -s first -k 'pnpm ng serve' 'pnpm wait-and-run-e2e'"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "file:../../node_modules/@angular/animations",
-    "@angular/cdk": "file:../../dist/releases/cdk",
-    "@angular/common": "file:../../node_modules/@angular/common",
-    "@angular/compiler": "file:../../node_modules/@angular/compiler",
-    "@angular/core": "file:../../node_modules/@angular/core",
-    "@angular/forms": "file:../../node_modules/@angular/forms",
-    "@angular/material": "file:../../dist/releases/material",
-    "@angular/platform-browser": "file:../../node_modules/@angular/platform-browser",
-    "@angular/platform-browser-dynamic": "file:../../node_modules/@angular/platform-browser-dynamic",
-    "@angular/router": "file:../../node_modules/@angular/router",
+    "@angular/animations": "20.0.0-next.5",
+    "@angular/cdk": "next",
+    "@angular/common": "20.0.0-next.5",
+    "@angular/compiler": "20.0.0-next.5",
+    "@angular/core": "20.0.0-next.5",
+    "@angular/forms": "20.0.0-next.5",
+    "@angular/material": "next",
+    "@angular/platform-browser": "20.0.0-next.5",
+    "@angular/router": "20.0.0-next.5",
     "rxjs": "^7.5.5",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "file:../../node_modules/@angular-devkit/build-angular",
-    "@angular/cli": "file:../../node_modules/@angular/cli",
-    "@angular/compiler-cli": "file:../../node_modules/@angular/compiler-cli",
-    "@types/jasmine": "~3.10.0",
-    "@types/node": "^12.11.1",
+    "@angular-devkit/build-angular": "20.0.0-next.4",
+    "@angular/cli": "20.0.0-next.4",
+    "@angular/compiler-cli": "20.0.0-next.5",
+    "@types/jasmine": "5.1.7",
+    "@types/node": "22.14.0",
     "@types/selenium-webdriver": "3.0.19",
     "concurrently": "^7.0.0",
-    "jasmine": "^4.0.2",
-    "jasmine-core": "~3.10.0",
-    "karma": "~6.3.0",
+    "jasmine": "5.6.0",
+    "jasmine-core": "5.6.0",
+    "karma": "6.4.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "~4.0.0",
@@ -46,9 +45,5 @@
     "ts-node": "~10.9.1",
     "typescript": "5.8.2",
     "wait-on": "^6.0.0"
-  },
-  "resolutions": {
-    "string-width": "4.2.3",
-    "wrap-ansi": "7.0.0"
   }
 }