From 5678c57721834ce1a9f2f4d9ada5f90946abc92c 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.

(cherry picked from commit f780e8beb3ccea27ef0442d1d3814ec2a668057d)
---
 .../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 465e28db350e..a1274700dd89 100644
--- a/packages/angular/build/src/builders/karma/application_builder.ts
+++ b/packages/angular/build/src/builders/karma/application_builder.ts
@@ -442,7 +442,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,
@@ -458,12 +459,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',
     });
@@ -471,18 +474,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,
@@ -492,7 +495,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_/);
   }