From faa04e2e11700f786e5bf082a0b158e0733608b5 Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Tue, 30 Sep 2025 15:25:35 -0400 Subject: [PATCH] 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. --- goldens/public-api/angular/build/index.api.md | 1 + .../angular/build/src/builders/unit-test/options.ts | 4 +++- .../src/builders/unit-test/runners/karma/executor.ts | 6 ++++++ .../unit-test/runners/vitest/browser-provider.ts | 2 ++ .../builders/unit-test/runners/vitest/executor.ts | 12 +++++++++++- .../angular/build/src/builders/unit-test/schema.json | 5 +++++ 6 files changed, 28 insertions(+), 2 deletions(-) diff --git a/goldens/public-api/angular/build/index.api.md b/goldens/public-api/angular/build/index.api.md index b1338ae84508..2615db9fd0b0 100644 --- a/goldens/public-api/angular/build/index.api.md +++ b/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; diff --git a/packages/angular/build/src/builders/unit-test/options.ts b/packages/angular/build/src/builders/unit-test/options.ts index 9be37f055237..c94acc27a932 100644 --- a/packages/angular/build/src/builders/unit-test/options.ts +++ b/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), diff --git a/packages/angular/build/src/builders/unit-test/runners/karma/executor.ts b/packages/angular/build/src/builders/unit-test/runners/karma/executor.ts index d3b1abb98539..2a642cfb0a09 100644 --- a/packages/angular/build/src/builders/unit-test/runners/karma/executor.ts +++ b/packages/angular/build/src/builders/unit-test/runners/karma/executor.ts @@ -21,6 +21,12 @@ export class KarmaExecutor implements TestExecutor { async *execute(): AsyncIterable { 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.', diff --git a/packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider.ts b/packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider.ts index 3fef091e3717..b493ac7c9447 100644 --- a/packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider.ts +++ b/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), })), 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 23996d4b43ef..b20f88fbc60b 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 @@ -126,7 +126,16 @@ export class VitestExecutor implements TestExecutor { } private async initializeVitest(): Promise { - 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('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')); diff --git a/packages/angular/build/src/builders/unit-test/schema.json b/packages/angular/build/src/builders/unit-test/schema.json index 303bd6905019..5c6820204071 100644 --- a/packages/angular/build/src/builders/unit-test/schema.json +++ b/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": {