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 1 commit intoangular:mainfrom
Conversation
…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
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
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.
| 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]);
});
});1 participant
PR Checklist
PR Type
What is the current behavior?
When running
ng addfor a Vitest browser provider (e.g.,@vitest/browser-playwright), the schematic adds dependencies and updatestsconfig.spec.jsonbut does not configure thebrowsersoption inangular.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
browsersoption in the test target ofangular.jsonusingupdateWorkspace():chromiumfor Playwright and Preview providerschromefor WebDriverIOExisting
browsersconfigurations are preserved and not overwritten. Tests cover all three provider types and the preservation of existing config.Does this PR introduce a breaking change?