feat(@angular-devkit/build-angular): support karma with esbuild

Adds a new "builderMode" setting for Karma that can be used to switch
between webpack ("browser") and esbuild ("application"). It supports a
third value "detect" that will use the same bundler that's also used for
development builds.

The detect mode is modelled after the logic used for the dev-server builder.

This initial implementation doesn't properly support `--watch` mode or code
coverage.

Author: jkrems

packages/angular_devkit/build_angular/src/builders/karma/index.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Google LLC 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.dev/license
+ */
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+// Initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true,
+});

packages/angular_devkit/build_angular/src/builders/karma/init_test_bed.js

@@ -267,6 +267,12 @@
         "type": "string"
       }
     },
+    "builderMode": {
+      "type": "string",
+      "description": "Determines how to build the code under test. If set to 'detect', attempts to follow the development builder.",
+      "enum": ["detect", "browser", "application"],
+      "default": "browser"
+    },
     "webWorkerTsConfig": {
       "type": "string",
       "description": "TypeScript configuration for Web Worker modules."

packages/angular_devkit/build_angular/src/builders/karma/schema.json

@@ -23,6 +23,12 @@ const coveragePath = 'coverage/lcov.info';
 
 describeKarmaBuilder(execute, KARMA_BUILDER_INFO, (harness, setupTarget, isApplicationBuilder) => {
   describe('Behavior: "codeCoverage"', () => {
+    if (isApplicationBuilder) {
+      beforeEach(() => {
+        pending('Code coverage not implemented yet for application builder');
+      });
+    }
+
     beforeEach(() => {
       setupTarget(harness);
     });

packages/angular_devkit/build_angular/src/builders/karma/tests/behavior/code-coverage_spec.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright Google LLC 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.dev/license
+ */
+
+import { execute } from '../../index';
+import { BASE_OPTIONS, KARMA_BUILDER_INFO, describeKarmaBuilder } from '../setup';
+import { BuilderMode } from '../../schema';
+
+const ESBUILD_LOG_TEXT = 'Application bundle generation complete.';
+
+describeKarmaBuilder(execute, KARMA_BUILDER_INFO, (harness, setupTarget, isApplicationTarget) => {
+  describe('option: "builderMode"', () => {
+    beforeEach(() => {
+      setupTarget(harness);
+    });
+
+    it('"application" always uses esbuild', async () => {
+      harness.useTarget('test', {
+        ...BASE_OPTIONS,
+        builderMode: BuilderMode.Application,
+      });
+
+      const { result, logs } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+      expect(logs).toContain(
+        jasmine.objectContaining({
+          message: jasmine.stringMatching(ESBUILD_LOG_TEXT),
+        }),
+      );
+    });
+
+    it('"browser" always uses webpack', async () => {
+      harness.useTarget('test', {
+        ...BASE_OPTIONS,
+        builderMode: BuilderMode.Browser,
+      });
+
+      const { result, logs } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+      expect(logs).not.toContain(
+        jasmine.objectContaining({
+          message: jasmine.stringMatching(ESBUILD_LOG_TEXT),
+        }),
+      );
+    });
+
+    it('"detect" follows configuration of the development builder', async () => {
+      harness.useTarget('test', {
+        ...BASE_OPTIONS,
+        builderMode: BuilderMode.Detect,
+      });
+
+      const { result, logs } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+      if (isApplicationTarget) {
+        expect(logs).toContain(
+          jasmine.objectContaining({
+            message: jasmine.stringMatching(ESBUILD_LOG_TEXT),
+          }),
+        );
+      } else {
+        expect(logs).not.toContain(
+          jasmine.objectContaining({
+            message: jasmine.stringMatching(ESBUILD_LOG_TEXT),
+          }),
+        );
+      }
+    });
+  });
+});

packages/angular_devkit/build_angular/src/builders/karma/tests/options/builder-mode_spec.ts

@@ -18,8 +18,14 @@ import { BASE_OPTIONS, KARMA_BUILDER_INFO, describeKarmaBuilder } from '../setup
 
 const coveragePath = 'coverage/lcov.info';
 
-describeKarmaBuilder(execute, KARMA_BUILDER_INFO, (harness, setupTarget) => {
+describeKarmaBuilder(execute, KARMA_BUILDER_INFO, (harness, setupTarget, isApplicationBuilder) => {
   describe('Option: "codeCoverageExclude"', () => {
+    if (isApplicationBuilder) {
+      beforeEach(() => {
+        pending('Code coverage not implemented yet for application builder');
+      });
+    }
+
     beforeEach(() => {
       setupTarget(harness);
     });

packages/angular_devkit/build_angular/src/builders/karma/tests/options/code-coverage-exclude_spec.ts

@@ -19,8 +19,14 @@ import { BASE_OPTIONS, KARMA_BUILDER_INFO, describeKarmaBuilder } from '../setup
 
 const coveragePath = 'coverage/lcov.info';
 
-describeKarmaBuilder(execute, KARMA_BUILDER_INFO, (harness, setupTarget) => {
+describeKarmaBuilder(execute, KARMA_BUILDER_INFO, (harness, setupTarget, isApplicationBuilder) => {
   describe('Option: "codeCoverage"', () => {
+    if (isApplicationBuilder) {
+      beforeEach(() => {
+        pending('Code coverage not implemented yet for application builder');
+      });
+    }
+
     beforeEach(() => {
       setupTarget(harness);
     });

packages/angular_devkit/build_angular/src/builders/karma/tests/options/code-coverage_spec.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { Schema } from '../schema';
+import { BuilderMode, Schema } from '../schema';
 import { BuilderHandlerFn } from '@angular-devkit/architect';
 import { json } from '@angular-devkit/core';
 import { ApplicationBuilderOptions as ApplicationSchema, buildApplication } from '@angular/build';
@@ -41,6 +41,7 @@ export const BASE_OPTIONS = Object.freeze<Schema>({
   browsers: 'ChromeHeadlessCI',
   progress: false,
   watch: false,
+  builderMode: BuilderMode.Detect,
 });
 
 const optionSchemaCache = new Map<string, json.schema.JsonSchema>();