From 38a00c24409098bc5e522e27a64b41592f38259a Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Thu, 23 Oct 2025 14:39:31 -0400
Subject: [PATCH] fix(@angular/build): add --ui option for Vitest runner

Adds a new `--ui` option to the `unit-test` builder to enable the Vitest UI for interactive test execution. This provides a rich, browser-based interface for viewing, filtering, and re-running tests, improving the overall developer experience.

The UI option implicitly enables watch mode to provide a live dashboard. If a user explicitly disables watch mode via `--no-watch` while the UI is enabled, a warning will be logged, and watch mode will be enforced to ensure the UI functions as expected.

This option is only available for the Vitest runner. An error will be thrown if used with the Karma runner.
---
 goldens/public-api/angular/build/index.api.md  |  1 +
 .../build/src/builders/unit-test/options.ts    | 18 ++++++++++++++++--
 .../unit-test/runners/vitest/executor.ts       |  2 ++
 .../build/src/builders/unit-test/schema.json   |  5 +++++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/goldens/public-api/angular/build/index.api.md b/goldens/public-api/angular/build/index.api.md
index 632618f3e27f..bce60e18850d 100644
--- a/goldens/public-api/angular/build/index.api.md
+++ b/goldens/public-api/angular/build/index.api.md
@@ -237,6 +237,7 @@ export type UnitTestBuilderOptions = {
     runner?: Runner;
     setupFiles?: string[];
     tsConfig?: string;
+    ui?: boolean;
     watch?: boolean;
 };
 
diff --git a/packages/angular/build/src/builders/unit-test/options.ts b/packages/angular/build/src/builders/unit-test/options.ts
index 95e4afb5305c..47db08e52d17 100644
--- a/packages/angular/build/src/builders/unit-test/options.ts
+++ b/packages/angular/build/src/builders/unit-test/options.ts
@@ -54,7 +54,12 @@ export async function normalizeOptions(
   const buildTargetSpecifier = options.buildTarget ?? `::development`;
   const buildTarget = targetFromTargetString(buildTargetSpecifier, projectName, 'build');
 
-  const { runner, browsers, progress, filter, browserViewport } = options;
+  const { runner, browsers, progress, filter, browserViewport, ui } = options;
+
+  if (ui && runner !== 'vitest') {
+    throw new Error('The "ui" option is only available for the "vitest" runner.');
+  }
+
   const [width, height] = browserViewport?.split('x').map(Number) ?? [];
 
   let tsConfig = options.tsConfig;
@@ -71,6 +76,14 @@ export async function normalizeOptions(
     }
   }
 
+  let watch = options.watch ?? isTTY();
+  if (options.ui && options.watch === false) {
+    context.logger.warn(
+      `The '--ui' option requires watch mode. The '--no-watch' flag will be ignored.`,
+    );
+    watch = true;
+  }
+
   return {
     // Project/workspace information
     workspaceRoot,
@@ -105,8 +118,9 @@ export async function normalizeOptions(
     outputFile: options.outputFile,
     browsers,
     browserViewport: width && height ? { width, height } : undefined,
-    watch: options.watch ?? isTTY(),
+    watch,
     debug: options.debug ?? false,
+    ui: options.ui ?? false,
     providersFile: options.providersFile && path.join(workspaceRoot, options.providersFile),
     setupFiles: options.setupFiles
       ? options.setupFiles.map((setupFile) => path.join(workspaceRoot, setupFile))
diff --git a/packages/angular/build/src/builders/unit-test/runners/vitest/executor.ts b/packages/angular/build/src/builders/unit-test/runners/vitest/executor.ts
index e665c54290df..520e8c461201 100644
--- a/packages/angular/build/src/builders/unit-test/runners/vitest/executor.ts
+++ b/packages/angular/build/src/builders/unit-test/runners/vitest/executor.ts
@@ -137,6 +137,7 @@ export class VitestExecutor implements TestExecutor {
       debug,
       watch,
       browserViewport,
+      ui,
     } = this.options;
     let vitestNodeModule;
     try {
@@ -201,6 +202,7 @@ export class VitestExecutor implements TestExecutor {
         reporters: reporters ?? ['default'],
         outputFile,
         watch,
+        ui,
         coverage: await generateCoverageOption(coverage, this.projectName),
         ...debugOptions,
       },
diff --git a/packages/angular/build/src/builders/unit-test/schema.json b/packages/angular/build/src/builders/unit-test/schema.json
index d3ae766d05b6..7ab96760a20a 100644
--- a/packages/angular/build/src/builders/unit-test/schema.json
+++ b/packages/angular/build/src/builders/unit-test/schema.json
@@ -60,6 +60,11 @@
       "description": "Enables debugging mode for tests, allowing the use of the Node Inspector.",
       "default": false
     },
+    "ui": {
+      "type": "boolean",
+      "description": "Enables the Vitest UI for interactive test execution. This option is only available for the Vitest runner.",
+      "default": false
+    },
     "coverage": {
       "type": "boolean",
       "description": "Enables coverage reporting for tests.",