[Vitest]: Viewport configuration missing

[wein2011]

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.