[Vitest]: Add viewport configuration to angular.json

[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

This request is not a duplicate of [@angular/build:unit-test][vitest] Configurable vitest #30429 since #30429 requests configuration through vitest.config.ts.

This is a request to directly add the viewport configuration to angular.json.

It is the last remaining issue that keeps us from a pure angular.json configuration for unit-test in V21. All other issues have been resolved.

Describe the solution you'd like

An additional viewport 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 from above.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.