fix(@schematics/angular): add actionable feedback to vitest-browser schematic

This commit adds a message at the end of the vitest-browser schematic to
inform users how to configure browsers in angular.json or via the CLI.
It also adds unit tests for the schematic.

Author: clydin

packages/schematics/angular/vitest-browser/index.ts

@@ -98,6 +98,13 @@ export default function (options: VitestBrowserOptions): Rule {
           install: options.skipInstall ? InstallBehavior.None : InstallBehavior.Auto,
         }),
       ),
+      (_, context) => {
+        context.logger.info(
+          'Vitest browser testing support has been added. ' +
+            "To run tests in a browser, add a 'browsers' field to the 'test' target in 'angular.json', " +
+            "or use the '--browsers' command line option.",
+        );
+      },
     ]);
   };
 }

packages/schematics/angular/vitest-browser/index_spec.ts

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { Builders } from '../utility/workspace-models';
+
+describe('Vitest Browser Provider Schematic', () => {
+  const schematicRunner = new SchematicTestRunner(
+    '@schematics/angular',
+    require.resolve('../collection.json'),
+  );
+
+  let tree: UnitTestTree;
+
+  beforeEach(async () => {
+    tree = new UnitTestTree(new EmptyTree());
+    tree.create(
+      '/angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {
+          app: {
+            root: '',
+            projectType: 'application',
+            targets: {
+              test: {
+                builder: Builders.BuildUnitTest,
+                options: {
+                  tsConfig: 'tsconfig.spec.json',
+                },
+              },
+            },
+          },
+        },
+      }),
+    );
+    tree.create(
+      '/tsconfig.spec.json',
+      JSON.stringify({
+        compilerOptions: {
+          types: ['jasmine'],
+        },
+      }),
+    );
+    tree.create('/package.json', JSON.stringify({}));
+  });
+
+  it('should add dependencies and update tsconfig.spec.json', async () => {
+    const options = {
+      project: 'app',
+      package: '@vitest/browser-playwright',
+      skipInstall: true,
+    };
+
+    const resultTree = await schematicRunner.runSchematic('vitest-browser', options, tree);
+
+    const packageJson = JSON.parse(resultTree.readContent('/package.json'));
+    expect(packageJson.devDependencies['@vitest/browser-playwright']).toBeDefined();
+    expect(packageJson.devDependencies['playwright']).toBeDefined();
+
+    const tsConfig = JSON.parse(resultTree.readContent('/tsconfig.spec.json'));
+    expect(tsConfig.compilerOptions.types).toContain('vitest/globals');
+    expect(tsConfig.compilerOptions.types).toContain('@vitest/browser-playwright');
+    expect(tsConfig.compilerOptions.types).not.toContain('jasmine');
+  });
+
+  it('should add webdriverio dependency when @vitest/browser-webdriverio is used', async () => {
+    const options = {
+      project: 'app',
+      package: '@vitest/browser-webdriverio',
+      skipInstall: true,
+    };
+
+    const resultTree = await schematicRunner.runSchematic('vitest-browser', options, tree);
+
+    const packageJson = JSON.parse(resultTree.readContent('/package.json'));
+    expect(packageJson.devDependencies['@vitest/browser-webdriverio']).toBeDefined();
+    expect(packageJson.devDependencies['webdriverio']).toBeDefined();
+  });
+
+  it('should throw if project does not exist', async () => {
+    const options = {
+      project: 'invalid',
+      package: '@vitest/browser-playwright',
+    };
+
+    await expectAsync(
+      schematicRunner.runSchematic('vitest-browser', options, tree),
+    ).toBeRejectedWithError('Project "invalid" does not exist.');
+  });
+
+  it('should throw if project uses Karma', async () => {
+    const angularJson = JSON.parse(tree.readContent('/angular.json'));
+    angularJson.projects.app.targets.test.options.runner = 'karma';
+    tree.overwrite('/angular.json', JSON.stringify(angularJson));
+
+    const options = {
+      project: 'app',
+      package: '@vitest/browser-playwright',
+    };
+
+    await expectAsync(
+      schematicRunner.runSchematic('vitest-browser', options, tree),
+    ).toBeRejectedWithError(
+      'Project "app" is configured to use Karma. Please migrate to Vitest before adding browser testing support.',
+    );
+  });
+});