test: use esbuild-based karma builder for e2e tests in esbuild suite

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

@@ -25,6 +25,7 @@ import * as path from 'path';
 import { Observable, Subscriber, catchError, defaultIfEmpty, from, of, switchMap } from 'rxjs';
 import { Configuration } from 'webpack';
 import { ExecutionTransformer } from '../../transforms';
+import { normalizeFileReplacements } from '../../utils';
 import { OutputHashing } from '../browser-esbuild/schema';
 import { findTests, getTestEntrypoints } from './find-tests';
 import { Schema as KarmaBuilderOptions } from './schema';
@@ -400,17 +401,24 @@ async function initializeApplication(
     index: false,
     outputHashing: OutputHashing.None,
     optimization: false,
-    sourceMap: {
-      scripts: true,
-      styles: true,
-      vendor: true,
-    },
+    sourceMap: options.codeCoverage
+      ? {
+          scripts: true,
+          styles: true,
+          vendor: true,
+        }
+      : options.sourceMap,
     instrumentForCoverage,
     styles: options.styles,
+    scripts: options.scripts,
     polyfills,
     webWorkerTsConfig: options.webWorkerTsConfig,
     watch: options.watch ?? !karmaOptions.singleRun,
     stylePreprocessorOptions: options.stylePreprocessorOptions,
+    inlineStyleLanguage: options.inlineStyleLanguage,
+    fileReplacements: options.fileReplacements
+      ? normalizeFileReplacements(options.fileReplacements, './')
+      : undefined,
   };
 
   // Build tests with `application` builder, using test files as entry points.
@@ -447,6 +455,16 @@ async function initializeApplication(
   };
 
   karmaOptions.files ??= [];
+  if (options.scripts?.length) {
+    // This should be more granular to support named bundles.
+    // However, it replicates the behavior of the Karma Webpack-based builder.
+    karmaOptions.files.push({
+      pattern: `${outputPath}/scripts.js`,
+      watched: false,
+      type: 'js',
+    });
+  }
+
   karmaOptions.files.push(
     // Serve global setup script.
     { pattern: `${outputPath}/${mainName}.js`, type: 'module', watched: false },

tests/legacy-cli/e2e/tests/test/test-scripts.ts

@@ -10,8 +10,8 @@ export default async function () {
 
   // prepare global scripts test files
   await writeMultipleFiles({
-    'src/string-script.js': `stringScriptGlobal = 'string-scripts.js';`,
-    'src/input-script.js': `inputScriptGlobal = 'input-scripts.js';`,
+    'src/string-script.js': `globalThis.stringScriptGlobal = 'string-scripts.js';`,
+    'src/input-script.js': `globalThis.inputScriptGlobal = 'input-scripts.js';`,
     'src/typings.d.ts': `
       declare var stringScriptGlobal: any;
       declare var inputScriptGlobal: any;

tests/legacy-cli/e2e/tests/test/test-sourcemap.ts

@@ -1,11 +1,19 @@
+import assert from 'node:assert';
+import { getGlobalVariable } from '../../utils/env';
 import { writeFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
+import { assertIsError } from '../../utils/utils';
 
 export default async function () {
+  if (getGlobalVariable('argv')['esbuild']) {
+    // TODO: enable once this is fixed when using the esbuild builder.
+    return;
+  }
+
   await writeFile(
     'src/app/app.component.spec.ts',
     `
-      it('show fail', () => {
+      it('should fail', () => {
         expect(undefined).toBeTruthy();
       });
     `,
@@ -16,18 +24,17 @@ export default async function () {
     await ng('test', '--no-watch', '--source-map');
     throw new Error('ng test should have failed.');
   } catch (error) {
-    if (!(error instanceof Error && error.message.includes('app.component.spec.ts'))) {
-      throw error;
-    }
+    assertIsError(error);
+    assert.match(error.message, /src\/app\/app\.component\.spec\.ts/);
+    assert.doesNotMatch(error.message, /_karma_webpack_/);
   }
 
   // when sourcemaps are 'off' the stacktrace won't point to the spec.ts file.
   try {
     await ng('test', '--no-watch', '--no-source-map');
     throw new Error('ng test should have failed.');
   } catch (error) {
-    if (!(error instanceof Error && error.message.includes('main.js'))) {
-      throw error;
-    }
+    assertIsError(error);
+    assert.match(error.message, /main\.js/);
   }
 }

tests/legacy-cli/e2e/utils/project.ts

@@ -192,6 +192,9 @@ export async function useCIChrome(projectName: string, projectDir = ''): Promise
     const project = workspaceJson.projects[projectName];
     const appTargets = project.targets || project.architect;
     appTargets.test.options.browsers = 'ChromeHeadlessNoSandbox';
+    appTargets.test.options.builderMode = getGlobalVariable('argv')['esbuild']
+      ? 'application'
+      : 'browser';
   });
 }