build: use shared karma web test suite from dev-infra

We recently moved the karma web test suite debug tooling to
the dev-infra repository, allowing for the code to be used in
framwork as well. This dedupes the logic in the COMP repo.

Author: devversion

DEV_ENVIRONMENT.md

@@ -22,6 +22,9 @@ To run unit tests, run `yarn test <target>`. The `target` can be either a short
 To run the e2e tests, run `yarn e2e`.
 To run lint, run `yarn lint`.
 
+You can debug unit tests by running `yarn test` with the `--debug` option. This will allow you to
+manually connect a browser to the Karma server.
+
 ### Getting Packages from Build Artifacts
 Each CI run for a Pull Request stores the built Angular packages as
 [build artifacts](https://circleci.com/docs/2.0/artifacts). The artifacts are not guaranteed to be

scripts/run-component-tests.js

@@ -12,9 +12,9 @@
  *
  * Supported command line flags:
  *
- *   --local    | If specified, no browser will be launched.
- *   --firefox  | Instead of Chrome being used for tests, Firefox will be used.
- *   --no-watch | Watch mode is enabled by default. This flag opts-out to standard Bazel.
+ *   --debug      | If specified, no browser will be launched.
+ *   --firefox    | Instead of Chrome being used for tests, Firefox will be used.
+ *   --no-watch   | Watch mode is enabled by default. This flag opts-out to standard Bazel.
  */
 
 const yargs = require('yargs');
@@ -35,13 +35,14 @@ shelljs.set('-e');
 shelljs.cd(projectDir);
 
 // Extracts the supported command line options.
-const {components, local, firefox, watch} = yargs(args)
+const {components, debug, firefox, watch} = yargs(args)
   .command('* <components..>', 'Run tests for specified components', args =>
     args.positional('components', {type: 'array'}),
   )
-  .option('local', {
+  .option('debug', {
+    alias: 'local',
     type: 'boolean',
-    description: 'Whether test should run in local mode. You can manually connect a browser then.',
+    description: 'Whether test should run in debug mode. You can manually connect a browser then.',
   })
   .option('firefox', {
     type: 'boolean',
@@ -58,13 +59,13 @@ const {components, local, firefox, watch} = yargs(args)
 // Whether tests for all components should be run.
 const all = components.length === 1 && components[0] === 'all';
 
-// We can only run a single target with "--local". Running multiple targets within the
+// We can only run a single target with "--debug". Running multiple targets within the
 // same Karma server is not possible since each test target runs isolated from the others.
-if (local && (components.length > 1 || all)) {
+if (debug && (components.length > 1 || all)) {
   console.error(
     chalk.red(
-      'Unable to run multiple components tests in local mode. ' +
-        'Only one component at a time can be run with "--local"',
+      'Unable to run multiple components tests in debug mode. ' +
+        'Only one component at a time can be run with "--debug"',
     ),
   );
   process.exit(1);
@@ -105,7 +106,7 @@ if (!components.length) {
   process.exit(1);
 }
 
-const bazelAction = local ? 'run' : 'test';
+const bazelAction = debug ? 'run' : 'test';
 const testLabels = components.map(t => `${getBazelPackageOfComponentName(t)}:${getTargetName(t)}`);
 
 // Runs Bazel for the determined test labels.
@@ -152,10 +153,10 @@ function convertPathToBazelLabel(name) {
 
 /** Gets the name of the target that should be run. */
 function getTargetName(packageName) {
-  // Schematics don't have _local and browser targets.
+  // Schematics don't have _debug and browser targets.
   if (packageName && packageName.endsWith('schematics')) {
     return 'unit_tests';
   }
 
-  return `unit_tests_${local ? 'local' : browserName}`;
+  return `unit_tests_${debug ? 'debug' : browserName}`;
 }

tools/defaults.bzl

@@ -5,12 +5,12 @@ load("@build_bazel_rules_nodejs//:index.bzl", _pkg_npm = "pkg_npm")
 load("@io_bazel_rules_sass//:defs.bzl", _npm_sass_library = "npm_sass_library", _sass_binary = "sass_binary", _sass_library = "sass_library")
 load("@npm//@angular/bazel:index.bzl", _ng_module = "ng_module", _ng_package = "ng_package")
 load("@npm//@angular/dev-infra-private/bazel/integration:index.bzl", _integration_test = "integration_test")
+load("@npm//@angular/dev-infra-private/bazel/karma:index.bzl", _karma_web_test_suite = "karma_web_test_suite")
 load("@npm//@angular/dev-infra-private/bazel/esbuild:index.bzl", _esbuild = "esbuild", _esbuild_config = "esbuild_config")
 load("@npm//@angular/dev-infra-private/bazel/spec-bundling:index.bzl", _spec_bundle = "spec_bundle")
 load("@npm//@angular/dev-infra-private/bazel/http-server:index.bzl", _http_server = "http_server")
 load("@npm//@angular/dev-infra-private/bazel:extract_js_module_output.bzl", "extract_js_module_output")
 load("@npm//@bazel/jasmine:index.bzl", _jasmine_node_test = "jasmine_node_test")
-load("@npm//@bazel/concatjs:index.bzl", _karma_web_test = "karma_web_test", _karma_web_test_suite = "karma_web_test_suite")
 load("@npm//@bazel/protractor:index.bzl", _protractor_web_test_suite = "protractor_web_test_suite")
 load("@npm//@bazel/typescript:index.bzl", _ts_library = "ts_library")
 load("@npm//tsec:index.bzl", _tsec_test = "tsec_test")
@@ -305,30 +305,8 @@ def karma_web_test_suite(name, **kwargs):
             "@npm//@angular/dev-infra-private/bazel/browsers/firefox:firefox",
         ]
 
-    for opt_name in kwargs.keys():
-        # Filter out options which are specific to "karma_web_test" targets. We cannot
-        # pass options like "browsers" to the local web test target.
-        if not opt_name in ["wrapped_test_tags", "browsers", "wrapped_test_tags", "tags"]:
-            web_test_args[opt_name] = kwargs[opt_name]
-
-    # Custom standalone web test that can be run to test against any browser
-    # that is manually connected to.
-    _karma_web_test(
-        name = "%s_local_bin" % name,
-        config_file = "//test:bazel-karma-local-config.js",
-        tags = ["manual"],
-        **web_test_args
-    )
-
-    # Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1429
-    native.sh_test(
-        name = "%s_local" % name,
-        srcs = ["%s_local_bin" % name],
-        tags = ["manual", "local", "ibazel_notify_changes"],
-        testonly = True,
-    )
-
-    # Default test suite with all configured browsers.
+    # Default test suite with all configured browsers, and the debug target being
+    # setup from `@angular/dev-infra-private`.
     _karma_web_test_suite(
         name = name,
         **kwargs