build(bazel): incrementally run aio example e2e tests

Replaces the workflow where all example e2es are run at once

BUILD.bazel

@@ -1,11 +1,13 @@
 load("//tools:defaults.bzl", "nodejs_binary")
+load("//:yarn.bzl", "YARN_PATH")
 
 package(default_visibility = ["//visibility:public"])
 
 exports_files([
     "LICENSE",
     "karma-js.conf.js",
     "browser-providers.conf.js",
+    YARN_PATH,
     "scripts/ci/bazel-payload-size.sh",
     "scripts/ci/payload-size.sh",
     "scripts/ci/payload-size.js",
@@ -68,5 +70,8 @@ nodejs_binary(
     name = "yarn_vendored",
     data = [".yarn/releases/yarn-1.22.17.cjs"],
     entry_point = ".yarn/releases/yarn-1.22.17.cjs",
-    visibility = ["//integration:__subpackages__"],
+    visibility = [
+        "//aio/tools/examples/shared:__pkg__",
+        "//integration:__subpackages__",
+    ],
 )

WORKSPACE

@@ -7,6 +7,7 @@ workspace(
 )
 
 load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
+load("//:yarn.bzl", "YARN_LABEL")
 
 # Add a patch fix for rules_webtesting v0.3.5 required for enabling runfiles on Windows.
 # TODO: Remove the http_archive for this transitive dependency when a release is cut
@@ -94,7 +95,7 @@ yarn_install(
     # Note that we add the postinstall scripts here so that the dependencies are re-installed
     # when the postinstall patches are modified.
     data = [
-        "//:.yarn/releases/yarn-1.22.17.cjs",
+        YARN_LABEL,
         "//:.yarnrc",
         "//:scripts/puppeteer-chromedriver-versions.js",
         "//:scripts/webdriver-manager-update.js",
@@ -109,7 +110,7 @@ yarn_install(
     # We prefer to symlink the `node_modules` to only maintain a single install.
     # See https://github.com/angular/dev-infra/pull/446#issuecomment-1059820287 for details.
     symlink_node_modules = True,
-    yarn = "//:.yarn/releases/yarn-1.22.17.cjs",
+    yarn = YARN_LABEL,
     yarn_lock = "//:yarn.lock",
 )
 
@@ -118,7 +119,7 @@ yarn_install(
     # Note that we add the postinstall scripts here so that the dependencies are re-installed
     # when the postinstall patches are modified.
     data = [
-        "//:.yarn/releases/yarn-1.22.17.cjs",
+        YARN_LABEL,
         "//:.yarnrc",
         "//aio:tools/cli-patches/patch.js",
     ],
@@ -131,27 +132,7 @@ yarn_install(
     # We prefer to symlink the `node_modules` to only maintain a single install.
     # See https://github.com/angular/dev-infra/pull/446#issuecomment-1059820287 for details.
     symlink_node_modules = True,
-    yarn = "//:.yarn/releases/yarn-1.22.17.cjs",
-    yarn_lock = "//aio:yarn.lock",
-)
-
-# Needed for the aio example e2e tests which run with patched node_module resolution through bazel
-yarn_install(
-    name = "docs_examples_npm",
-    data = [
-        "//:.yarn/releases/yarn-1.22.17.cjs",
-        "//:.yarnrc",
-    ],
-    # Currently disabled due to:
-    #  1. Missing Windows support currently.
-    #  2. Incompatibilites with the `ts_library` rule.
-    exports_directories_only = False,
-    manual_build_file_contents = npm_package_archives(),
-    package_json = "//aio/tools/examples/shared:package.json",
-    # We prefer to symlink the `node_modules` to only maintain a single install.
-    # See https://github.com/angular/dev-infra/pull/446#issuecomment-1059820287 for details.
-    symlink_node_modules = True,
-    yarn = "//:.yarn/releases/yarn-1.22.17.cjs",
+    yarn = YARN_LABEL,
     yarn_lock = "//aio:yarn.lock",
 )
 
@@ -215,5 +196,5 @@ http_archive(
 load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
 
 sass_repositories(
-    yarn_script = "//:.yarn/releases/yarn-1.22.17.cjs",
+    yarn_script = YARN_LABEL,
 )

aio/content/examples/angular-compiler-options/example-config.json

@@ -9,9 +9,9 @@
         "cmd": "yarn",
         "args": [
           "e2e",
-          "--protractor-config=e2e/protractor-puppeteer.conf.js",
+          "--protractor-config=e2e/protractor-bazel.conf.js",
           "--no-webdriver-update",
-          "--port={PORT}"
+          "--port=0"
         ]
       }
     ]

aio/content/examples/examples.bzl

@@ -1,5 +1,7 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "npm_package_bin")
 load("@aspect_bazel_lib//lib:copy_to_directory.bzl", "copy_to_directory")
+load("//aio/tools:defaults.bzl", "nodejs_test")
+load("//:yarn.bzl", "YARN_LABEL")
 
 # This map controls which examples are included and whether or not to generate
 # a stackblitz live examples and zip archives. Keys are the example name, and values
@@ -96,11 +98,13 @@ EXAMPLES = {
     "what-is-angular": {"stackblitz": True, "zip": True},
 }
 
-def docs_example(name):
+def docs_example(name, test = True, test_tags = []):
     """Stamp targets for adding boilerplate to examples, creating live examples, and creating zips.
 
     Args:
         name: name of the example
+        test: whether to run e2e tests
+        test_tags: tags to add to e2e tests
     """
     if name not in EXAMPLES:
         # buildifier: disable=print
@@ -119,6 +123,7 @@ def docs_example(name):
         env = {
             "BAZEL_EXAMPLE_BOILERPLATE_OUTPUT_PATH": "$(@D)",
         },
+        data = [":files"],
         output_dir = True,
         tool = "//aio/tools/examples:example-boilerplate",
     )
@@ -134,6 +139,7 @@ def docs_example(name):
         ],
         replace_prefixes = {
             "boilerplate": "",
+            "aio/tools/examples/shared": "",
         },
         allow_overwrites = True,
     )
@@ -169,3 +175,38 @@ def docs_example(name):
             outs = outs,
             tool = "//aio/tools/example-zipper:generate-example-zip",
         )
+
+    if test:
+        # These node_modules deps are symlinked into each example. These tree
+        # artifact folder names must still be "node_modules" despite the symlink
+        # being named node_modules. Otherwise, some deps will fail to resolve.
+        node_modules_deps = {
+            "local": "//aio/tools/examples/shared:local/node_modules",
+            "npm": "//aio/tools/examples/shared:node_modules",
+        }
+
+        for [node_modules_source, node_modules_label] in node_modules_deps.items():
+            nodejs_test(
+                name = "e2e_%s" % node_modules_source,
+                data = [
+                    ":%s" % name,
+                    YARN_LABEL,
+                    node_modules_label,
+                    "@aio_npm//@angular/dev-infra-private/bazel/browsers/chromium",
+                ],
+                args = [
+                    "$(rootpath :%s)" % name,
+                    "$(rootpath %s)" % node_modules_label,
+                    "$(rootpath %s)" % YARN_LABEL,
+                ],
+                configuration_env_vars = ["NG_BUILD_CACHE"],
+                entry_point = "//aio/tools/examples:run-example-e2e",
+                env = {
+                    "CHROME_BIN": "$(CHROMIUM)",
+                    "CHROMEDRIVER_BIN": "$(CHROMEDRIVER)",
+                },
+                toolchains = [
+                    "@aio_npm//@angular/dev-infra-private/bazel/browsers/chromium:toolchain_alias",
+                ],
+                tags = test_tags,
+            )

aio/content/examples/forms-overview/example-config.json

@@ -1,6 +1,6 @@
 {
   "tests": [
     {"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
-    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
+    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-bazel.conf.js", "--no-webdriver-update", "--port=0"]}
   ]
 }

aio/content/examples/http/example-config.json

@@ -2,6 +2,6 @@
   "projectType": "testing",
   "tests": [
     {"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
-    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
+    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-bazel.conf.js", "--no-webdriver-update", "--port=0"]}
   ]
 }

aio/content/examples/i18n/example-config.json

@@ -8,9 +8,9 @@
       "cmd": "yarn",
       "args": [
         "e2e",
-        "--protractor-config=e2e/protractor-puppeteer.conf.js",
+        "--protractor-config=e2e/protractor-bazel.conf.js",
         "--no-webdriver-update",
-        "--port={PORT}"
+        "--port=0"
       ]
     }
   ]

aio/content/examples/ngcontainer/BUILD.bazel

@@ -4,4 +4,5 @@ package(default_visibility = ["//visibility:public"])
 
 docs_example(
     name = "ngcontainer",
+    test = False,
 )

aio/content/examples/schematics-for-libraries/BUILD.bazel

@@ -4,4 +4,5 @@ package(default_visibility = ["//visibility:public"])
 
 docs_example(
     name = "schematics-for-libraries",
+    test = False,
 )

aio/content/examples/service-worker-getting-started/example-config.json

@@ -1,7 +1,7 @@
 {
   "projectType": "service-worker",
   "tests": [
-    {"cmd": "yarn", "args": ["e2e", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
+    {"cmd": "yarn", "args": ["e2e", "--protractor-config=e2e/protractor-bazel.conf.js", "--no-webdriver-update", "--port=0"]},
     {"cmd": "yarn", "args": ["build"]},
     {"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw.json'), 'ngsw.json is missing')"]},
     {"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw-worker.js'), 'ngsw-worker.js is missing')"]},

aio/content/examples/setup/example-config.json

@@ -1,6 +1,6 @@
 {
   "tests": [
     {"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
-    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
+    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-bazel.conf.js", "--no-webdriver-update", "--port=0"]}
   ]
 }

aio/content/examples/testing/example-config.json

@@ -2,6 +2,6 @@
   "projectType": "testing",
   "tests": [
     {"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
-    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
+    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-bazel.conf.js", "--no-webdriver-update", "--port=0"]}
   ]
 }

aio/content/examples/toh-pt6/example-config.json

@@ -1,6 +1,6 @@
 {
   "tests": [
     {"cmd": "yarn", "args": ["test", "--browsers=ChromeHeadless", "--no-watch"]},
-    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]}
+    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-bazel.conf.js", "--no-webdriver-update", "--port=0"]}
   ]
 }

aio/content/examples/universal/example-config.json

@@ -1,7 +1,7 @@
 {
   "projectType": "universal",
   "e2e": [
-    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
+    {"cmd": "yarn", "args": ["e2e", "--configuration=production", "--protractor-config=e2e/protractor-bazel.conf.js", "--no-webdriver-update", "--port=0"]},
     {"cmd": "yarn", "args": ["run", "build:ssr"]}
   ]
 }

aio/content/examples/upgrade-module/BUILD.bazel

@@ -4,4 +4,5 @@ package(default_visibility = ["//visibility:public"])
 
 docs_example(
     name = "upgrade-module",
+    test_tags = ["exclusive"],  # Cannot run concurrently as it uses a hardcoded port for lite-server
 )

aio/content/examples/upgrade-phonecat-1-typescript/BUILD.bazel

@@ -4,4 +4,5 @@ package(default_visibility = ["//visibility:public"])
 
 docs_example(
     name = "upgrade-phonecat-1-typescript",
+    test_tags = ["exclusive"],  # Cannot run concurrently as it uses a hardcoded port for lite-server
 )

aio/content/examples/upgrade-phonecat-2-hybrid/BUILD.bazel

@@ -4,4 +4,5 @@ package(default_visibility = ["//visibility:public"])
 
 docs_example(
     name = "upgrade-phonecat-2-hybrid",
+    test_tags = ["exclusive"],  # Cannot run concurrently as it uses a hardcoded port for lite-server
 )

aio/content/examples/upgrade-phonecat-3-final/BUILD.bazel

@@ -4,4 +4,5 @@ package(default_visibility = ["//visibility:public"])
 
 docs_example(
     name = "upgrade-phonecat-3-final",
+    test_tags = ["exclusive"],  # Cannot run concurrently as it uses a hardcoded port for lite-server
 )

aio/tools/defaults.bzl

@@ -1,4 +1,4 @@
-load("@build_bazel_rules_nodejs//:index.bzl", _nodejs_binary = "nodejs_binary")
+load("@build_bazel_rules_nodejs//:index.bzl", _nodejs_binary = "nodejs_binary", _nodejs_test = "nodejs_test")
 
 def nodejs_binary(data = [], env = {}, templated_args = [], **kwargs):
     data = data + [
@@ -23,3 +23,27 @@ def nodejs_binary(data = [], env = {}, templated_args = [], **kwargs):
         templated_args = templated_args,
         **kwargs
     )
+
+def nodejs_test(data = [], env = {}, templated_args = [], **kwargs):
+    data = data + [
+        "//aio/tools/esm-loader",
+        "//aio/tools/esm-loader:esm-loader.mjs",
+    ]
+
+    env = dict(env, **{"NODE_MODULES_WORKSPACE_NAME": "aio_npm"})
+
+    templated_args = templated_args + [
+        # Disable the linker and rely on patched resolution which works better on Windows
+        # and is less prone to race conditions when targets build concurrently.
+        "--nobazel_run_linker",
+        # Provide a custom esm loader to resolve third-party depenencies. Unlike for cjs
+        # modules, rules_nodejs doesn't patch imports when the linker is disabled.
+        "--node_options=--loader=./$(rootpath //aio/tools/esm-loader:esm-loader.mjs)",
+    ]
+
+    _nodejs_test(
+        data = data,
+        env = env,
+        templated_args = templated_args,
+        **kwargs
+    )

aio/tools/example-zipper/exampleZipper.mjs

@@ -125,7 +125,7 @@ export class ExampleZipper {
       '!**/npm-debug.log',
       '!**/example-config.json',
       '!**/wallaby.js',
-      '!**/e2e/protractor-puppeteer.conf.js',
+      '!**/e2e/protractor-bazel.conf.js',
       // AOT related files
       '!**/aot/**/*.*',
       '!**/*-aot.*'

aio/tools/examples/BUILD.bazel

@@ -1,4 +1,5 @@
 load("//aio/tools:defaults.bzl", "nodejs_binary")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
 load("@aio_npm//@bazel/jasmine:index.bzl", "jasmine_node_test")
 
 package(default_visibility = ["//visibility:public"])
@@ -52,5 +53,23 @@ nodejs_binary(
 jasmine_node_test(
     name = "create-example-test",
     srcs = ["create-example.spec.js"],
-    deps = CREATE_EXAMPLE_SRCS + CREATE_EXAMPLE_DEPS,
+    deps =
+        CREATE_EXAMPLE_SRCS + CREATE_EXAMPLE_DEPS,
+)
+
+js_library(
+    name = "run-example-e2e",
+    srcs = [
+        "run-example-e2e.mjs",
+    ],
+    deps = [
+        "@aio_npm//@bazel/runfiles",
+        "@aio_npm//canonical-path",
+        "@aio_npm//cross-spawn",
+        "@aio_npm//fs-extra",
+        "@aio_npm//globby",
+        "@aio_npm//shelljs",
+        "@aio_npm//tree-kill",
+        "@aio_npm//yargs",
+    ],
 )

aio/tools/examples/README.md

@@ -89,7 +89,7 @@ The file is expected to contain a JSON object with zero or more of the following
       "args": [
         "e2e",
         "--configuration=production",
-        "--protractor-config=e2e/protractor-puppeteer.conf.js",
+        "--protractor-config=e2e/protractor-bazel.conf.js",
         "--no-webdriver-update",
         "--port={PORT}"
       ]