Command

test

Description

The new Vitest unit-test configuration is missing the viewport configuration. This is required for our tests to ensure that:

1. No resize events occur during testing (e.g. dynamic scrollbars)
2. Columns will have the full text information

In the Karma environment, this was available through the karma.conf.js and customLaunchers such as:

customLaunchers: {
 LargeChromeHeadless: {
 base: 'ChromeHeadless',
 flags: ['--window-size=3840,2160']
 }
 }

In the Vitest environment, this should be available through the angular.json configuration and Vitest's browser.viewport.

Describe the solution you'd like

An additional configuration in the angular.json configuration would work well:

"test": {
 "builder": "@angular/build:unit-test",
 "options": {
 "viewport": {
 "width": 1920,
 "height": 1080
 }
 }
}

Describe alternatives you've considered

Besides re-writing all tests, we are not aware of an alternative solution.

As a workaround, we added the viewport configuration to @angular/build/src/builders/unit-test/builder.js.

const browser = {
 enabled: true,
 provider,
 headless: browsers.some((name) => name.toLowerCase().includes('headless')),
 // Added viewport for testing
 viewport: { width: 1920, height: 1080 },
 instances: browsers.map((browserName) => ({
 browser: normalizeBrowserName(browserName),
 })),
};

However, this should really be using the potential normalizedOptions.viewport configuration.