fix(@schematics/angular): add browsers option during vitest browser provider ng-add - #32885
fix(@schematics/angular): add browsers option during vitest browser provider ng-add#32885maruthang wants to merge 3 commits into
Conversation
Sorry, something went wrong.
…vitest browser provider ng-add When adding a Vitest browser provider via ng-add, the schematic now automatically configures the 'browsers' option in angular.json with an appropriate default browser (chromium for Playwright/Preview, chrome for WebDriverIO) instead of only logging a manual instruction. Fixes angular#32401
There was a problem hiding this comment.
Code Review
This pull request updates the Vitest browser schematic to automatically configure the 'browsers' option in 'angular.json' based on the selected provider, defaulting to 'chrome' for WebdriverIO and 'chromium' for Playwright or Preview. It also includes unit tests to verify these configurations and ensure that existing settings are not overwritten. Feedback suggests refactoring the new tests into a parameterized format to reduce duplication and adding a specific test case for the preview provider to ensure full coverage.
Sorry, something went wrong.
| it('should add browsers option to angular.json for playwright', async () => { | ||
| const options = { | ||
| project: 'app', | ||
| package: '@vitest/browser-playwright', | ||
| skipInstall: true, | ||
| }; | ||
|
|
||
| const resultTree = await schematicRunner.runSchematic('vitest-browser', options, tree); | ||
|
|
||
| const angularJson = parse(resultTree.readContent('/angular.json')); | ||
| const project = angularJson.projects.app; | ||
| const targets = project.architect || project.targets; | ||
| expect(targets.test.options.browsers).toEqual(['chromium']); | ||
| }); | ||
|
|
||
| it('should add browsers option to angular.json for webdriverio', async () => { | ||
| const options = { | ||
| project: 'app', | ||
| package: '@vitest/browser-webdriverio', | ||
| skipInstall: true, | ||
| }; | ||
|
|
||
| const resultTree = await schematicRunner.runSchematic('vitest-browser', options, tree); | ||
|
|
||
| const angularJson = parse(resultTree.readContent('/angular.json')); | ||
| const project = angularJson.projects.app; | ||
| const targets = project.architect || project.targets; | ||
| expect(targets.test.options.browsers).toEqual(['chrome']); | ||
| }); |
There was a problem hiding this comment.
These two tests for playwright and webdriverio are very similar and can be combined into a single parameterized test. This will reduce code duplication and make it easier to add more cases in the future.
Additionally, the PR description mentions that tests cover three provider types, but a test for the preview provider is missing. You can add it to the parameterized test data to ensure full coverage as intended.
[
{ pkg: '@vitest/browser-playwright', browser: 'chromium' },
{ pkg: '@vitest/browser-webdriverio', browser: 'chrome' },
{ pkg: '@vitest/browser-preview', browser: 'chromium' },
].forEach(({ pkg, browser }) => {
it('should add ' + browser + ' to browsers option in angular.json for ' + pkg, async () => {
const options = {
project: 'app',
package: pkg,
skipInstall: true,
};
const resultTree = await schematicRunner.runSchematic('vitest-browser', options, tree);
const angularJson = parse(resultTree.readContent('/angular.json'));
const project = angularJson.projects.app;
const targets = project.architect || project.targets;
expect(targets.test.options.browsers).toEqual([browser]);
});
});
Sorry, something went wrong.
…eterized loop and add preview provider case
…ests Combine separate playwright/webdriverio/preview tests into a single parameterized forEach block to reduce duplication and improve coverage.
PR Checklist
PR Type
What is the current behavior?
When running ng add for a Vitest browser provider (e.g., @vitest/browser-playwright), the schematic adds dependencies and updates tsconfig.spec.json but does not configure the browsers option in angular.json. Users must manually add it for tests to run in a browser instead of Node.js/jsdom.
Issue Number: #32401
What is the new behavior?
The schematic now automatically configures the browsers option in the test target of angular.json using updateWorkspace():
Existing browsers configurations are preserved and not overwritten. Tests cover all three provider types and the preservation of existing config.
Does this PR introduce a breaking change?