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.

(cherry picked from commit f2248ba)

Author: clydin

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;
 };
 

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))

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,
       },

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.",