feat(@angular/build): add browserViewport option for vitest browser tests

Introduces a new option, `browserViewport`, to the unit-test builder to allow configuring the browser's viewport size during test execution.

This option accepts a string in the format `widthxheight` (e.g., `1280x720`) and is passed to the underlying browser provider when using the Vitest runner. This is particularly useful for testing responsive layouts or ensuring components render consistently at a specific size.

A warning has been added to the Karma runner to inform users that this option is not supported, preventing confusion and providing clear feedback.

Author: clydin

goldens/public-api/angular/build/index.api.md

@@ -215,6 +215,7 @@ export type NgPackagrBuilderOptions = {
 
 // @public
 export type UnitTestBuilderOptions = {
+    browserViewport?: string;
     browsers?: string[];
     buildTarget?: string;
     coverage?: boolean;

packages/angular/build/src/builders/unit-test/options.ts

@@ -54,7 +54,8 @@ export async function normalizeOptions(
   const buildTargetSpecifier = options.buildTarget ?? `::development`;
   const buildTarget = targetFromTargetString(buildTargetSpecifier, projectName, 'build');
 
-  const { runner, browsers, progress, filter } = options;
+  const { runner, browsers, progress, filter, browserViewport } = options;
+  const [width, height] = browserViewport?.split('x').map(Number) ?? [];
 
   let tsConfig = options.tsConfig;
   if (tsConfig) {
@@ -104,6 +105,7 @@ export async function normalizeOptions(
     reporters: normalizeReporterOption(options.reporters),
     outputFile: options.outputFile,
     browsers,
+    browserViewport: width && height ? { width, height } : undefined,
     watch: options.watch ?? isTTY(),
     debug: options.debug ?? false,
     providersFile: options.providersFile && path.join(workspaceRoot, options.providersFile),

packages/angular/build/src/builders/unit-test/runners/karma/executor.ts

@@ -21,6 +21,12 @@ export class KarmaExecutor implements TestExecutor {
   async *execute(): AsyncIterable<BuilderOutput> {
     const { context, options: unitTestOptions } = this;
 
+    if (unitTestOptions.browserViewport) {
+      context.logger.warn(
+        'The "karma" test runner does not support the "browserViewport" option. The option will be ignored.',
+      );
+    }
+
     if (unitTestOptions.debug) {
       context.logger.warn(
         'The "karma" test runner does not support the "debug" option. The option will be ignored.',

packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider.ts

@@ -43,6 +43,7 @@ export function setupBrowserConfiguration(
   browsers: string[] | undefined,
   debug: boolean,
   projectSourceRoot: string,
+  viewport: { width: number; height: number } | undefined,
 ): BrowserConfiguration {
   if (browsers === undefined) {
     return {};
@@ -91,6 +92,7 @@ export function setupBrowserConfiguration(
     provider,
     headless,
     ui: !headless,
+    viewport,
     instances: browsers.map((browserName) => ({
       browser: normalizeBrowserName(browserName),
     })),

packages/angular/build/src/builders/unit-test/runners/vitest/executor.ts

@@ -126,7 +126,16 @@ export class VitestExecutor implements TestExecutor {
   }
 
   private async initializeVitest(): Promise<Vitest> {
-    const { coverage, reporters, outputFile, workspaceRoot, browsers, debug, watch } = this.options;
+    const {
+      coverage,
+      reporters,
+      outputFile,
+      workspaceRoot,
+      browsers,
+      debug,
+      watch,
+      browserViewport,
+    } = this.options;
     let vitestNodeModule;
     try {
       vitestNodeModule = await loadEsmModule<typeof import('vitest/node')>('vitest/node');
@@ -146,6 +155,7 @@ export class VitestExecutor implements TestExecutor {
       browsers,
       debug,
       this.options.projectSourceRoot,
+      browserViewport,
     );
     if (browserOptions.errors?.length) {
       throw new Error(browserOptions.errors.join('\n'));

packages/angular/build/src/builders/unit-test/schema.json

@@ -26,6 +26,11 @@
       },
       "minItems": 1
     },
+    "browserViewport": {
+      "description": "Specifies the browser viewport dimensions for browser-based tests in the format `widthxheight`.",
+      "type": "string",
+      "pattern": "^\\d+x\\d+$"
+    },
     "include": {
       "type": "array",
       "items": {