mirror of
https://github.com/angular/angular-cli.git
synced 2025-05-16 18:43:42 +08:00
68dae539ad
This is a new `@angular-devkit/build-angular:web-test-runner` builder which invokes Web Test Runner to execute unit tests in a real browser.
The implementation calls `application` builder under the hood with some option overrides build the application to a temporary directory and then runs Web Test Runner on the output. This set up is still minimal, but sufficient to run and pass tests in the generated `ng new` application.
The `schema.json` file is directly copied from the `karma` builder, since this is intended to serve as a migration target for users coming from Karma. Most of the options don't actually work yet, which is logged when they are used.
The most interesting part of this change is configuring Jasmine to execute in Web Test Runner. This is done through the `testRunnerHtml` option which allows us to control the HTML page tests are executed on. We use `test_page.html` which very carefully controls the loading process. I opted to make a single `<script type="module">` which dynamic imports all the relevant pieces so the ordering can be directly controlled more easily. This is better than trying to manage multiple `<script>` tags and pass data between them. Ideally everything would be bundled into a single entry point, however this is not feasible due to the way that ordering requirements do not align with typical `import` structure. Jasmine must come before polyfills which must come before the runner which invokes user code. In an ideal world, this ordering relationship would be represented in `import` statements, but this is not practically feasible because Angular CLI doesn't own all the files (`./polyfills.js` is user-defined) and Jasmine's loading must be split into two places so Zone.js can properly patch it.
`jasmine_runner.js` serves the purpose of executing Jasmine tests and reporting their results to Web Test Runner. I tried to write `jasmine_runner.js` in TypeScript and compile it with a `ts_library`. Unfortunately I don't think this is feasible because it needs to import `@web/test-runner-core` at runtime. This dependency has some code generated at runtime in Web Test Runner, meaning we cannot bundle this dependency and must mark it as external and dynamic `import()` the package at runtime. This works fine in native ESM, but compiling with TypeScript outputs CommonJS code by default (and I don't believe our `@build_bazel_rules_nodejs` setup can easily change that), so any `import('@web/test-runner-core')` becomes `require('@web/test-runner-core')` which fails because that package is ESM-only. The `loadEsmModule` trick does work here either because Web Test Runner is applying Node module resolution at serve time, meaning it looks for `import('@web/test-runner-core')` and rewrites it to something like `import('/node_modules/@web/test-runner-core')`. In short, there is no easy syntax which circumvents the TypeScript compiler while also being statically analyzable to Web Test Runner.
438 lines
13 KiB
Python
438 lines
13 KiB
Python
# Copyright Google Inc. 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
|
|
|
|
load("@npm//@bazel/jasmine:index.bzl", "jasmine_node_test")
|
|
load("//tools:defaults.bzl", "pkg_npm", "ts_library")
|
|
load("//tools:ts_json_schema.bzl", "ts_json_schema")
|
|
load("@npm//@angular/build-tooling/bazel/api-golden:index.bzl", "api_golden_test_npm_package")
|
|
|
|
licenses(["notice"])
|
|
|
|
package(default_visibility = ["//visibility:public"])
|
|
|
|
ts_json_schema(
|
|
name = "application_schema",
|
|
src = "src/builders/application/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "app_shell_schema",
|
|
src = "src/builders/app-shell/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "browser_schema",
|
|
src = "src/builders/browser/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "browser_esbuild_schema",
|
|
src = "src/builders/browser-esbuild/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "dev_server_schema",
|
|
src = "src/builders/dev-server/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "extract_i18n_schema",
|
|
src = "src/builders/extract-i18n/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "jest_schema",
|
|
src = "src/builders/jest/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "karma_schema",
|
|
src = "src/builders/karma/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "protractor_schema",
|
|
src = "src/builders/protractor/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "server_schema",
|
|
src = "src/builders/server/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "ng_packagr_schema",
|
|
src = "src/builders/ng-packagr/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "ssr_dev_server_schema",
|
|
src = "src/builders/ssr-dev-server/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "prerender_schema",
|
|
src = "src/builders/prerender/schema.json",
|
|
)
|
|
|
|
ts_json_schema(
|
|
name = "web_test_runner_schema",
|
|
src = "src/builders/web-test-runner/schema.json",
|
|
)
|
|
|
|
ts_library(
|
|
name = "build_angular",
|
|
package_name = "@angular-devkit/build-angular",
|
|
srcs = glob(
|
|
include = [
|
|
"src/**/*.ts",
|
|
"plugins/**/*.ts",
|
|
],
|
|
exclude = [
|
|
"src/test-utils.ts",
|
|
"src/**/*_spec.ts",
|
|
"src/**/tests/**/*.ts",
|
|
"plugins/**/*_spec.ts",
|
|
"src/testing/**/*.ts",
|
|
],
|
|
) + [
|
|
"//packages/angular_devkit/build_angular:src/builders/app-shell/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/application/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/browser-esbuild/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/browser/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/dev-server/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/extract-i18n/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/jest/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/karma/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/ng-packagr/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/prerender/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/protractor/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/server/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/ssr-dev-server/schema.ts",
|
|
"//packages/angular_devkit/build_angular:src/builders/web-test-runner/schema.ts",
|
|
],
|
|
data = glob(
|
|
include = [
|
|
"package.json",
|
|
"builders.json",
|
|
"src/**/schema.json",
|
|
"src/**/*.js",
|
|
"src/**/*.mjs",
|
|
"src/**/*.html",
|
|
],
|
|
),
|
|
module_name = "@angular-devkit/build-angular",
|
|
module_root = "src/index.d.ts",
|
|
deps = [
|
|
"//packages/angular_devkit/architect",
|
|
"//packages/angular_devkit/build_angular/src/utils/routes-extractor",
|
|
"//packages/angular_devkit/build_webpack",
|
|
"//packages/angular_devkit/core",
|
|
"//packages/angular_devkit/core/node",
|
|
"//packages/ngtools/webpack",
|
|
"@npm//@ampproject/remapping",
|
|
"@npm//@angular/common",
|
|
"@npm//@angular/compiler-cli",
|
|
"@npm//@angular/core",
|
|
"@npm//@angular/localize",
|
|
"@npm//@angular/platform-server",
|
|
"@npm//@angular/service-worker",
|
|
"@npm//@babel/core",
|
|
"@npm//@babel/generator",
|
|
"@npm//@babel/helper-annotate-as-pure",
|
|
"@npm//@babel/helper-split-export-declaration",
|
|
"@npm//@babel/plugin-transform-async-generator-functions",
|
|
"@npm//@babel/plugin-transform-async-to-generator",
|
|
"@npm//@babel/plugin-transform-runtime",
|
|
"@npm//@babel/preset-env",
|
|
"@npm//@babel/runtime",
|
|
"@npm//@discoveryjs/json-ext",
|
|
"@npm//@types/babel__core",
|
|
"@npm//@types/browser-sync",
|
|
"@npm//@types/browserslist",
|
|
"@npm//@types/inquirer",
|
|
"@npm//@types/karma",
|
|
"@npm//@types/less",
|
|
"@npm//@types/loader-utils",
|
|
"@npm//@types/node",
|
|
"@npm//@types/picomatch",
|
|
"@npm//@types/semver",
|
|
"@npm//@types/text-table",
|
|
"@npm//@types/watchpack",
|
|
"@npm//@vitejs/plugin-basic-ssl",
|
|
"@npm//@web/test-runner",
|
|
"@npm//ajv",
|
|
"@npm//ansi-colors",
|
|
"@npm//autoprefixer",
|
|
"@npm//babel-loader",
|
|
"@npm//babel-plugin-istanbul",
|
|
"@npm//browserslist",
|
|
"@npm//copy-webpack-plugin",
|
|
"@npm//critters",
|
|
"@npm//css-loader",
|
|
"@npm//esbuild",
|
|
"@npm//esbuild-wasm",
|
|
"@npm//fast-glob",
|
|
"@npm//http-proxy-middleware",
|
|
"@npm//https-proxy-agent",
|
|
"@npm//inquirer",
|
|
"@npm//jsonc-parser",
|
|
"@npm//karma",
|
|
"@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//mrmime",
|
|
"@npm//ng-packagr",
|
|
"@npm//open",
|
|
"@npm//ora",
|
|
"@npm//parse5-html-rewriting-stream",
|
|
"@npm//piscina",
|
|
"@npm//postcss",
|
|
"@npm//postcss-loader",
|
|
"@npm//resolve-url-loader",
|
|
"@npm//rxjs",
|
|
"@npm//sass",
|
|
"@npm//sass-loader",
|
|
"@npm//semver",
|
|
"@npm//source-map-loader",
|
|
"@npm//source-map-support",
|
|
"@npm//terser",
|
|
"@npm//text-table",
|
|
"@npm//tree-kill",
|
|
"@npm//tslib",
|
|
"@npm//typescript",
|
|
"@npm//undici",
|
|
"@npm//vite",
|
|
"@npm//watchpack",
|
|
"@npm//webpack",
|
|
"@npm//webpack-dev-middleware",
|
|
"@npm//webpack-dev-server",
|
|
"@npm//webpack-merge",
|
|
"@npm//webpack-subresource-integrity",
|
|
],
|
|
)
|
|
|
|
ts_library(
|
|
name = "build_angular_test_lib",
|
|
testonly = True,
|
|
srcs = glob(
|
|
include = [
|
|
"src/**/*_spec.ts",
|
|
],
|
|
exclude = [
|
|
"src/builders/**/*_spec.ts",
|
|
],
|
|
),
|
|
data = glob(["test/**/*"]),
|
|
deps = [
|
|
":build_angular",
|
|
":build_angular_test_utils",
|
|
"//packages/angular_devkit/architect/testing",
|
|
"//packages/angular_devkit/core",
|
|
"@npm//fast-glob",
|
|
"@npm//prettier",
|
|
"@npm//typescript",
|
|
"@npm//webpack",
|
|
],
|
|
)
|
|
|
|
jasmine_node_test(
|
|
name = "build_angular_test",
|
|
srcs = [":build_angular_test_lib"],
|
|
)
|
|
|
|
genrule(
|
|
name = "license",
|
|
srcs = ["//:LICENSE"],
|
|
outs = ["LICENSE"],
|
|
cmd = "cp $(execpath //:LICENSE) $@",
|
|
)
|
|
|
|
pkg_npm(
|
|
name = "npm_package",
|
|
pkg_deps = [
|
|
"//packages/angular_devkit/architect:package.json",
|
|
"//packages/angular_devkit/build_webpack:package.json",
|
|
"//packages/angular_devkit/core:package.json",
|
|
"//packages/ngtools/webpack:package.json",
|
|
],
|
|
tags = ["release-package"],
|
|
deps = [
|
|
":README.md",
|
|
":build_angular",
|
|
":license",
|
|
],
|
|
)
|
|
|
|
api_golden_test_npm_package(
|
|
name = "build_angular_api",
|
|
data = [
|
|
":npm_package",
|
|
"//goldens:public-api",
|
|
],
|
|
golden_dir = "angular_cli/goldens/public-api/angular_devkit/build_angular",
|
|
npm_package = "angular_cli/packages/angular_devkit/build_angular/npm_package",
|
|
)
|
|
|
|
# Large build_angular specs
|
|
|
|
ts_library(
|
|
name = "build_angular_test_utils",
|
|
testonly = True,
|
|
srcs = glob(
|
|
include = [
|
|
"src/test-utils.ts",
|
|
"src/testing/**/*.ts",
|
|
"src/**/tests/*.ts",
|
|
],
|
|
exclude = [
|
|
"src/**/*_spec.ts",
|
|
],
|
|
),
|
|
data = glob(["test/**/*"]),
|
|
tsconfig = "//:tsconfig-test.json",
|
|
deps = [
|
|
":build_angular",
|
|
"//packages/angular_devkit/architect",
|
|
"//packages/angular_devkit/architect/node",
|
|
"//packages/angular_devkit/architect/testing",
|
|
"//packages/angular_devkit/core",
|
|
"//packages/angular_devkit/core/node",
|
|
"@npm//rxjs",
|
|
],
|
|
)
|
|
|
|
LARGE_SPECS = {
|
|
"application": {
|
|
"shards": 12,
|
|
"size": "large",
|
|
"flaky": True,
|
|
"extra_deps": [
|
|
"@npm//buffer",
|
|
],
|
|
},
|
|
"app-shell": {},
|
|
"dev-server": {
|
|
"shards": 10,
|
|
"size": "large",
|
|
"flaky": True,
|
|
"extra_deps": [
|
|
"@npm//@types/http-proxy",
|
|
"@npm//http-proxy",
|
|
"@npm//puppeteer",
|
|
"@npm//undici",
|
|
],
|
|
},
|
|
"extract-i18n": {},
|
|
"karma": {
|
|
"shards": 3,
|
|
"size": "large",
|
|
"flaky": True,
|
|
"extra_deps": [
|
|
"@npm//karma",
|
|
"@npm//karma-chrome-launcher",
|
|
"@npm//karma-coverage",
|
|
"@npm//karma-jasmine",
|
|
"@npm//karma-jasmine-html-reporter",
|
|
"@npm//puppeteer",
|
|
],
|
|
},
|
|
"protractor": {
|
|
"extra_deps": [
|
|
"@npm//jasmine-spec-reporter",
|
|
"@npm//protractor",
|
|
"@npm//puppeteer",
|
|
"@npm//ts-node",
|
|
],
|
|
# NB: does not run on rbe because webdriver manager uses an absolute path to chromedriver
|
|
"tags": ["no-remote-exec"],
|
|
# NB: multiple shards will compete for port 4200 so limiting to 1
|
|
"shards": 1,
|
|
},
|
|
"server": {
|
|
"extra_deps": [
|
|
"@npm//@angular/animations",
|
|
],
|
|
},
|
|
"ng-packagr": {},
|
|
"browser": {
|
|
"shards": 10,
|
|
"size": "large",
|
|
"flaky": True,
|
|
"extra_deps": [
|
|
"@npm//@angular/animations",
|
|
"@npm//@angular/material",
|
|
"@npm//bootstrap",
|
|
"@npm//jquery",
|
|
"@npm//popper.js",
|
|
],
|
|
},
|
|
"prerender": {},
|
|
"browser-esbuild": {},
|
|
"ssr-dev-server": {
|
|
"extra_deps": [
|
|
"@npm//@types/browser-sync",
|
|
"@npm//browser-sync",
|
|
"@npm//undici",
|
|
"//packages/angular/ssr",
|
|
],
|
|
},
|
|
}
|
|
|
|
[
|
|
ts_library(
|
|
name = "build_angular_" + spec + "_test_lib",
|
|
testonly = True,
|
|
srcs = glob(["src/builders/" + spec + "/**/*_spec.ts"]),
|
|
tsconfig = "//:tsconfig-test.json",
|
|
deps = [
|
|
# Dependencies needed to compile and run the specs themselves.
|
|
":build_angular",
|
|
":build_angular_test_utils",
|
|
"//packages/angular_devkit/architect",
|
|
"//packages/angular_devkit/architect/node",
|
|
"//packages/angular_devkit/architect/testing",
|
|
"//packages/angular_devkit/core",
|
|
"//packages/angular_devkit/core/node",
|
|
|
|
# Base dependencies for the application in hello-world-app.
|
|
# Some tests also require extra dependencies.
|
|
"@npm//@angular/common",
|
|
"@npm//@angular/compiler",
|
|
"@npm//@angular/compiler-cli",
|
|
"@npm//@angular/core",
|
|
"@npm//@angular/platform-browser",
|
|
"@npm//@angular/platform-browser-dynamic",
|
|
"@npm//@angular/router",
|
|
"@npm//rxjs",
|
|
"@npm//tslib",
|
|
"@npm//typescript",
|
|
"@npm//zone.js",
|
|
] + LARGE_SPECS[spec].get("extra_deps", []),
|
|
)
|
|
for spec in LARGE_SPECS
|
|
]
|
|
|
|
[
|
|
jasmine_node_test(
|
|
name = "build_angular_" + spec + "_test",
|
|
size = LARGE_SPECS[spec].get("size", "medium"),
|
|
flaky = LARGE_SPECS[spec].get("flaky", False),
|
|
shard_count = LARGE_SPECS[spec].get("shards", 2),
|
|
# These tests are resource intensive and should not be over-parallized as they will
|
|
# compete for the resources of other parallel tests slowing everything down.
|
|
# Ask Bazel to allocate multiple CPUs for these tests with "cpu:n" tag.
|
|
tags = [
|
|
"cpu:2",
|
|
] + LARGE_SPECS[spec].get("tags", []),
|
|
deps = [":build_angular_" + spec + "_test_lib"],
|
|
)
|
|
for spec in LARGE_SPECS
|
|
]
|