test: WIP - update legecy e2e test to bazel

Author: jbedard

.bazelrc

@@ -30,6 +30,7 @@ build --symlink_prefix=dist/
 build --nowatchfs
 
 # Turn off legacy external runfiles
+build --nolegacy_external_runfiles
 run --nolegacy_external_runfiles
 test --nolegacy_external_runfiles
 
@@ -148,3 +149,7 @@ try-import .bazelrc.user
 # Enable runfiles even on Windows.
 # Architect resolves output files from data files, and this isn't possible without runfile support.
 test --enable_runfiles
+build --enable_runfiles
+
+# Fixes use of npm paths with spaces such as some within the puppeteer module
+build --experimental_inprocess_symlink_creation

.circleci/config.yml

@@ -223,6 +223,36 @@ jobs:
             node ./tests/legacy-cli/run_e2e --nb-shards=${CIRCLE_NODE_TOTAL} --shard=${CIRCLE_NODE_INDEX} <<# parameters.snapshots >>--ng-snapshots<</ parameters.snapshots >> --esbuild --tmpdir=/mnt/ramdisk/e2e-esbuild --glob="{tests/basic/**,tests/build/prod-build.ts}" --ignore="tests/basic/{environment,rebuild,serve,scripts-array}.ts"
       - fail_fast
 
+  e2e-cli-bazel:
+    parameters:
+      nodeversion:
+        type: string
+        default: *default_nodeversion
+      snapshots:
+        type: boolean
+        default: false
+    executor:
+      name: test-executor
+    steps:
+      - custom_attach_workspace
+      - browser-tools/install-chrome
+      - setup_bazel_rbe
+      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
+      - run:
+          name: Initialize Environment
+          command: |
+            ./.circleci/env.sh
+      - run:
+          name: Execute CLI E2E Tests (bazel)
+          command: yarn bazel run //tests/legacy-cli:e2e
+      - run:
+          name: Execute CLI E2E Tests Subset with Yarn (bazel)
+          command: yarn bazel run //tests/legacy-cli:e2e.yarn
+      - run:
+          name: Execute CLI E2E Tests Subset with esbuild builder (bazel)
+          command: yarn bazel run //tests/legacy-cli:e2e.esbuild
+      - fail_fast
+
   test-browsers:
     executor:
       name: test-executor
@@ -248,6 +278,34 @@ jobs:
       - run: ./scripts/saucelabs/stop-tunnel.sh
       - fail_fast
 
+  test-browsers-bazel:
+    executor:
+      name: test-executor
+    environment:
+      E2E_BROWSERS: true
+    resource_class: medium
+    steps:
+      - custom_attach_workspace
+      - browser-tools/install-chrome
+      - setup_bazel_rbe
+      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
+      - run:
+          name: Initialize Environment
+          command: ./.circleci/env.sh
+      - run:
+          name: Initialize Saucelabs
+          command: setSecretVar SAUCE_ACCESS_KEY $(echo $SAUCE_ACCESS_KEY | rev)
+      - run:
+          name: Start Saucelabs Tunnel
+          command: ./scripts/saucelabs/start-tunnel.sh
+          background: true
+        # Waits for the Saucelabs tunnel to be ready. This ensures that we don't run tests
+        # too early without Saucelabs not being ready.
+      - run: ./scripts/saucelabs/wait-for-tunnel.sh
+      - run: yarn bazel run //tests/legacy-cli:e2e.browsers
+      - run: ./scripts/saucelabs/stop-tunnel.sh
+      - fail_fast
+
   build:
     executor: action-executor
     steps:
@@ -263,7 +321,7 @@ jobs:
       - setup_bazel_rbe
       - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
       - run:
-          command: yarn bazel:test
+          command: yarn bazel test //packages/...
           # This timeout provides time for the actual tests to timeout and report status
           # instead of CircleCI stopping the job without test failure information.
           no_output_timeout: 40m
@@ -370,13 +428,22 @@ workflows:
           requires:
             - build
 
-      # Bazel jobs
-      # These jobs only really depend on Setup, but the build job is very quick to run (~35s) and
-      # will catch any build errors before proceeding to the more lengthy and resource intensive
       # Bazel jobs.
       - test:
           requires:
-            - build
+            - setup
+      - test-browsers-bazel:
+          requires:
+            - setup
+      - e2e-cli-bazel:
+          nodeversion: '14.17'
+          requires:
+            - setup
+      # - e2e-cli-bazel:
+      #     name: e2e-cli-bazel-node-16
+      #     nodeversion: '16.10'
+      #     requires:
+      #       - setup
 
       # Windows jobs
       - e2e-cli-win:

BUILD.bazel

@@ -13,7 +13,9 @@ exports_files([
     "tsconfig.json",  # @external
     "tsconfig-test.json",  # @external
     "tsconfig-build.json",  # @external
+    ".monorepo.json",
     "package.json",
+    ".gitignore",
 ])
 
 # Detect if the build is running under --stamp

WORKSPACE

@@ -68,6 +68,8 @@ yarn_install(
     #  1. Missing Windows support currently.
     #  2. Incompatibilites with the `ts_library` rule.
     exports_directories_only = False,
+    # TODO: exports_directories_only=True, will get errors about files with spaces, delete those in a package.json postinstall
+    # OR set https://docs.bazel.build/versions/main/command-line-reference.html#flag--experimental_inprocess_symlink_creation which might solve it
     package_json = "//: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.

lib/BUILD.bazel

@@ -0,0 +1,15 @@
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "lib",
+    srcs = ["packages.ts"],
+    data = [
+        "//:.monorepo.json",
+    ],
+    visibility = ["//visibility:public"],
+    deps = [
+        "//packages/angular_devkit/core",
+        "@npm//@types/node",
+        "@npm//typescript",
+    ],
+)

lib/bootstrap-local.js

@@ -20,6 +20,10 @@ const os = require('os');
 const path = require('path');
 const ts = require('typescript');
 
+if (process.env.BAZEL_TARGET) {
+  throw new Error(`${__filename} should not be used when executing under bazel`);
+}
+
 const tmpRoot = fs.mkdtempSync(path.join(fs.realpathSync(os.tmpdir()), 'angular-devkit-'));
 
 debugLocal('starting bootstrap local');

lib/packages.ts

@@ -148,6 +148,7 @@ const pattern =
 const excludeRe = new RegExp(pattern);
 
 // Find all the package.json that aren't excluded from tsconfig.
+// TODO(bazel): do not traverse source/cwd directories for this.
 const packageJsonPaths = [
   ..._findPrimaryPackageJsonFiles(path.join(__dirname, '..', 'packages'), excludeRe),
 ];

package.json

@@ -59,7 +59,8 @@
     ]
   },
   "resolutions": {
-    "**/ajv-formats/ajv": "8.11.0"
+    "**/ajv-formats/ajv": "8.11.0",
+    "**/webdriver-manager": "^12.1.8"
   },
   "devDependencies": {
     "@ampproject/remapping": "2.2.0",
@@ -213,6 +214,7 @@
     "typescript": "4.7.1-rc",
     "verdaccio": "5.10.2",
     "verdaccio-auth-memory": "^10.0.0",
+    "webdriver-manager": "^12.1.8",
     "webpack": "5.72.1",
     "webpack-dev-middleware": "5.3.1",
     "webpack-dev-server": "4.9.0",

packages/schematics/angular/third_party/github.com/Microsoft/TypeScript/BUILD.bazel

@@ -17,5 +17,8 @@ ts_library(
     name = "TypeScript",
     srcs = ["lib/typescript.d.ts"],
     data = ["lib/typescript.js"],
-    visibility = ["//packages/schematics/angular:__subpackages__"],
+    visibility = [
+        "//packages/schematics/angular:__subpackages__",
+        "//tests/legacy-cli:__subpackages__",
+    ],
 )

tests/legacy-cli/BUILD.bazel

@@ -0,0 +1,178 @@
+load(":cli_integration_test.bzl", "cli_integration_test")
+load("//tools:defaults.bzl", "ts_library")
+
+# bazel query --output=label "kind('pkg_npm', //packages/...)"
+TESTED_PACKAGES = [
+    "//packages/schematics/angular:npm_package",
+    "//packages/ngtools/webpack:npm_package",
+    "//packages/angular_devkit/schematics_cli:npm_package",
+    "//packages/angular_devkit/schematics:npm_package",
+    "//packages/angular_devkit/core:npm_package",
+    "//packages/angular_devkit/build_webpack:npm_package",
+    "//packages/angular_devkit/build_angular:npm_package",
+    # this is private so don't use here
+    # "//packages/angular_devkit/benchmark:npm_package",
+    "//packages/angular_devkit/architect_cli:npm_package",
+    "//packages/angular_devkit/architect:npm_package",
+    "//packages/angular/pwa:npm_package",
+    "//packages/angular/cli:npm_package",
+]
+
+ts_library(
+    name = "runner",
+    testonly = True,
+    srcs = glob(["**/*.ts"]),
+    data = [
+        "verdaccio.yaml",
+        "verdaccio_auth.yaml",
+    ],
+    deps = [
+        "//packages/angular_devkit/core",
+        "//packages/angular_devkit/core/node",
+        "//tests/legacy-cli/e2e/assets",
+        "//tests/legacy-cli/e2e/utils",
+        "@npm//@types/glob",
+        "@npm//@types/yargs-parser",
+        "@npm//ansi-colors",
+        "@npm//yargs-parser",
+
+        # Loaded dynamically at runtime, not compiletime deps
+        "//tests/legacy-cli/e2e/setup",
+        "//tests/legacy-cli/e2e/tests",
+    ],
+)
+
+# TODO(bazel): run e2e tests on node14+16, npm+yarn+esbuild
+
+cli_integration_test(
+    name = "e2e",
+    data = [
+        # Test runner
+        ":runner",
+
+        # Runtime deps
+        # TODO: not needed when no longer compiling inline?
+        "//:.gitignore",
+        "//:package.json",
+        "//:tsconfig.json",
+
+        # Runtime deps of everything
+        # TODO: do this dynamically within cli_integration_test, for now for simplicity
+        # just put every potential runtime dep.
+        #
+        # > cat `find packages/ | grep BUILD` | grep "@npm" | grep -v "@types" | sed -e 's/ //g' | sed -e 's/#.*//g' | sort -u
+        "@npm//@ampproject/remapping",
+        "@npm//@angular/animations",
+        "@npm//@angular/common",
+        "@npm//@angular/compiler",
+        "@npm//@angular/compiler-cli",
+        "@npm//@angular/core",
+        "@npm//@angular/localize",
+        "@npm//@angular/material",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/platform-server",
+        "@npm//@angular/router",
+        "@npm//@angular/service-worker",
+        "@npm//@babel/core",
+        "@npm//@babel/generator",
+        "@npm//@babel/helper-annotate-as-pure",
+        "@npm//@babel/plugin-proposal-async-generator-functions",
+        "@npm//@babel/plugin-transform-async-to-generator",
+        "@npm//@babel/plugin-transform-runtime",
+        "@npm//@babel/preset-env",
+        "@npm//@babel/runtime",
+        "@npm//@babel/template",
+        "@npm//@discoveryjs/json-ext",
+        "@npm//@yarnpkg/lockfile",
+        "@npm//ajv",
+        "@npm//ajv-formats",
+        "@npm//ansi-colors",
+        "@npm//babel-loader",
+        "@npm//babel-plugin-istanbul",
+        "@npm//bootstrap",
+        "@npm//browserslist",
+        "@npm//cacache",
+        "@npm//chokidar",
+        "@npm//copy-webpack-plugin",
+        "@npm//critters",
+        "@npm//css-loader",
+        "@npm//esbuild",
+        "@npm//esbuild-wasm",
+        "@npm//express",
+        "@npm//font-awesome",
+        "@npm//glob",
+        "@npm//http-proxy",
+        "@npm//https-proxy-agent",
+        "@npm//ini",
+        "@npm//inquirer",
+        "@npm//jasmine",
+        "@npm//jasmine-spec-reporter",
+        "@npm//jquery",
+        "@npm//jsonc-parser",
+        "@npm//karma",
+        "@npm//karma-chrome-launcher",
+        "@npm//karma-coverage",
+        "@npm//karma-jasmine",
+        "@npm//karma-jasmine-html-reporter",
+        "@npm//karma-source-map-support",
+        "@npm//less",
+        "@npm//less-loader",
+        "@npm//license-webpack-plugin",
+        "@npm//loader-utils",
+        "@npm//magic-string",
+        "@npm//mini-css-extract-plugin",
+        "@npm//minimatch",
+        "@npm//ng-packagr",
+        "@npm//node-fetch",
+        "@npm//npm",
+        "@npm//npm-package-arg",
+        "@npm//open",
+        "@npm//ora",
+        "@npm//pacote",
+        "@npm//parse5-html-rewriting-stream",
+        "@npm//pidtree",
+        "@npm//pidusage",
+        "@npm//piscina",
+        "@npm//popper.js",
+        "@npm//postcss",
+        "@npm//postcss-import",
+        "@npm//postcss-loader",
+        "@npm//postcss-preset-env",
+        "@npm//prettier",
+        "@npm//protractor",
+        "@npm//puppeteer",
+        "@npm//regenerator-runtime",
+        "@npm//resolve-url-loader",
+        "@npm//rxjs",
+        "@npm//sass",
+        "@npm//sass-loader",
+        "@npm//semver",
+        "@npm//source-map",
+        "@npm//source-map-loader",
+        "@npm//source-map-support",
+        "@npm//stylus",
+        "@npm//stylus-loader",
+        "@npm//symbol-observable",
+        "@npm//terser",
+        "@npm//text-table",
+        "@npm//tree-kill",
+        "@npm//ts-node",
+        "@npm//tslib",
+        "@npm//typescript",
+        "@npm//webpack",
+        "@npm//webpack-dev-middleware",
+        "@npm//webpack-dev-server",
+        "@npm//webpack-merge",
+        "@npm//webpack-subresource-integrity",
+        "@npm//yargs",
+        "@npm//yargs-parser",
+        "@npm//yarn",
+        "@npm//zone.js",
+    ] + TESTED_PACKAGES,  # TODO(bazel): required for package discovery in lib/packages.ts
+    entry_point = ":bazel_runner.js",
+    # Pass the archive (.tar) of the packages to avoid sandbox symlinks within
+    # the npm package directory.
+    packages = [("%s_archive" % p) for p in TESTED_PACKAGES],
+    shard_count = 1,
+)