From 4e06f37c4087c64c0b4d5e87c76bcba0cd4e11aa Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Thu, 13 Mar 2025 11:46:16 -0400
Subject: [PATCH] fix(@angular/build): ensure relative karma stack traces for
 test failures

The karma configuration will now automatically set the `basePath` option
to the temporary output path when using the application build system's
karma testing. This ensures that only the relative path of the test files
is represented in the stack traces of test failures.
---
 .../src/builders/karma/application_builder.ts   | 17 ++++++++++-------
 .../legacy-cli/e2e/tests/test/test-sourcemap.ts |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/angular/build/src/builders/karma/application_builder.ts b/packages/angular/build/src/builders/karma/application_builder.ts
index bfe7af7711ca..7651ecaaff5d 100644
--- a/packages/angular/build/src/builders/karma/application_builder.ts
+++ b/packages/angular/build/src/builders/karma/application_builder.ts
@@ -438,7 +438,8 @@ async function initializeApplication(
   await writeTestFiles(buildOutput.files, buildOptions.outputPath);
 
   // We need to add this to the beginning *after* the testing framework has
-  // prepended its files.
+  // prepended its files. The output path is required for each since they are
+  // added later in the test process via a plugin.
   const polyfillsFile: FilePattern = {
     pattern: `${outputPath}/polyfills.js`,
     included: true,
@@ -454,12 +455,14 @@ async function initializeApplication(
     watched: false,
   };
 
+  karmaOptions.basePath = outputPath;
+
   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`,
+      pattern: `scripts.js`,
       watched: false,
       type: 'js',
     });
@@ -467,18 +470,18 @@ async function initializeApplication(
 
   karmaOptions.files.push(
     // Serve global setup script.
-    { pattern: `${outputPath}/${mainName}.js`, type: 'module', watched: false },
+    { pattern: `${mainName}.js`, type: 'module', watched: false },
     // Serve all source maps.
-    { pattern: `${outputPath}/*.map`, included: false, watched: false },
+    { pattern: `*.map`, included: false, watched: false },
     // These are the test entrypoints.
-    { pattern: `${outputPath}/spec-*.js`, type: 'module', watched: false },
+    { pattern: `spec-*.js`, type: 'module', watched: false },
   );
 
   if (hasChunkOrWorkerFiles(buildOutput.files)) {
     karmaOptions.files.push(
       // Allow loading of chunk-* files but don't include them all on load.
       {
-        pattern: `${outputPath}/{chunk,worker}-*.js`,
+        pattern: `{chunk,worker}-*.js`,
         type: 'module',
         included: false,
         watched: false,
@@ -488,7 +491,7 @@ async function initializeApplication(
 
   if (options.styles?.length) {
     // Serve CSS outputs on page load, these are the global styles.
-    karmaOptions.files.push({ pattern: `${outputPath}/*.css`, type: 'css', watched: false });
+    karmaOptions.files.push({ pattern: `*.css`, type: 'css', watched: false });
   }
 
   const parsedKarmaConfig: Config & ConfigOptions = await karma.config.parseConfig(
diff --git a/tests/legacy-cli/e2e/tests/test/test-sourcemap.ts b/tests/legacy-cli/e2e/tests/test/test-sourcemap.ts
index 797aba88e17f..e75e214a2457 100644
--- a/tests/legacy-cli/e2e/tests/test/test-sourcemap.ts
+++ b/tests/legacy-cli/e2e/tests/test/test-sourcemap.ts
@@ -20,7 +20,7 @@ export default async function () {
     throw new Error('ng test should have failed.');
   } catch (error) {
     assertIsError(error);
-    assert.match(error.message, /src\/app\/app\.component\.spec\.ts/);
+    assert.match(error.message, /\(src\/app\/app\.component\.spec\.ts:3:27/);
     assert.doesNotMatch(error.message, /_karma_webpack_/);
   }