fix(@schematics/angular): align Karma project generation with unified unit-test builder

Updates the application and ng-new schematics to correctly configure Karma-based projects.

- The test target in the generated angular.json now uses the `@angular/build:unit-test` builder.
- The builder options are simplified to only include runner: 'karma', as other settings are now handled by the unified builder.
- Corresponding schematic tests have been updated to reflect these changes.

Author: clydin

packages/schematics/angular/application/index.ts

@@ -396,13 +396,9 @@ function addAppToWorkspaceFile(options: ApplicationOptions, appDir: string): Rul
                 options: {},
               }
             : {
-                builder: Builders.BuildKarma,
+                builder: Builders.BuildUnitTest,
                 options: {
-                  polyfills: options.zoneless ? undefined : ['zone.js', 'zone.js/testing'],
-                  tsConfig: `${projectRoot}tsconfig.spec.json`,
-                  inlineStyleLanguage,
-                  assets: [{ 'glob': '**/*', 'input': `${projectRoot}public` }],
-                  styles: [`${sourceRoot}/styles.${options.style}`],
+                  runner: 'karma',
                 },
               },
     },

packages/schematics/angular/application/index_spec.ts

@@ -448,10 +448,11 @@ describe('Application Schematic', () => {
       const config = JSON.parse(tree.readContent('/angular.json'));
       const prj = config.projects.foo;
       const testOpt = prj.architect.test;
-      expect(testOpt.builder).toEqual('@angular/build:karma');
-      expect(testOpt.options.tsConfig).toEqual('tsconfig.spec.json');
-      expect(testOpt.options.assets).toEqual([{ glob: '**/*', input: 'public' }]);
-      expect(testOpt.options.styles).toEqual(['src/styles.css']);
+      expect(testOpt.builder).toEqual('@angular/build:unit-test');
+      expect(testOpt.options.runner).toEqual('karma');
+      expect(testOpt.options.tsConfig).toBeUndefined();
+      expect(testOpt.options.assets).toBeUndefined();
+      expect(testOpt.options.styles).toBeUndefined();
     });
 
     it('should set the relative tsconfig paths', async () => {

packages/schematics/angular/ng-new/index_spec.ts

@@ -169,7 +169,8 @@ describe('Ng New Schematic', () => {
         },
       },
     } = JSON.parse(tree.readContent('/bar/angular.json'));
-    expect(test.builder).toBe('@angular/build:karma');
+    expect(test.builder).toBe('@angular/build:unit-test');
+    expect(test.options).toEqual({ runner: 'karma' });
 
     const { devDependencies } = JSON.parse(tree.readContent('/bar/package.json'));
     expect(devDependencies['karma']).toBeDefined();

tests/legacy-cli/e2e/initialize/500-create-project.ts

@@ -64,6 +64,9 @@ export default async function () {
 
         const test = json['projects']['test-project']['architect']['test'];
         test.builder = '@angular-devkit/build-angular:karma';
+        test.options ??= {};
+        test.options.tsConfig = 'tsconfig.spec.json';
+        delete test.options.runner;
       });
       await updateJsonFile('tsconfig.json', (tsconfig) => {
         delete tsconfig.compilerOptions.esModuleInterop;

tests/legacy-cli/e2e/tests/basic/test.ts

@@ -1,5 +1,6 @@
 import { ng } from '../../utils/process';
 import { writeMultipleFiles } from '../../utils/fs';
+import { getGlobalVariable } from '../../utils/env';
 
 export default async function () {
   // make sure both --watch=false work
@@ -48,5 +49,11 @@ export default async function () {
       `,
   });
 
-  await ng('test', '--watch=false', '--karma-config=karma.conf.bis.js');
+  const isWebpack = !getGlobalVariable('argv')['esbuild'];
+
+  if (isWebpack) {
+    await ng('test', '--watch=false', '--karma-config=karma.conf.bis.js');
+  } else {
+    await ng('test', '--watch=false', '--runner-config=karma.conf.bis.js');
+  }
 }

tests/legacy-cli/e2e/tests/test/test-code-coverage-exclude.ts

@@ -1,19 +1,23 @@
+import { getGlobalVariable } from '../../utils/env';
 import { expectFileToExist, rimraf } from '../../utils/fs';
 import { silentNg } from '../../utils/process';
 import { expectToFail } from '../../utils/utils';
 
 export default async function () {
+  const isWebpack = !getGlobalVariable('argv')['esbuild'];
+  const coverageOptionName = isWebpack ? '--code-coverage' : '--coverage';
+
   // This test is already in build-angular, but that doesn't run on Windows.
-  await silentNg('test', '--no-watch', '--code-coverage');
+  await silentNg('test', '--no-watch', coverageOptionName);
   await expectFileToExist('coverage/test-project/app.ts.html');
   // Delete coverage directory
   await rimraf('coverage');
 
   await silentNg(
     'test',
     '--no-watch',
-    '--code-coverage',
-    `--code-coverage-exclude='src/**/app.ts'`,
+    coverageOptionName,
+    `${coverageOptionName}-exclude='src/**/app.ts'`,
   );
 
   // Doesn't include excluded.

tests/legacy-cli/e2e/tests/test/test-environment.ts

@@ -29,7 +29,7 @@ export default function () {
       .then(() =>
         updateJsonFile('angular.json', (configJson) => {
           const appArchitect = configJson.projects['test-project'].architect;
-          appArchitect.test.configurations = {
+          appArchitect.build.configurations = {
             production: {
               fileReplacements: [
                 {
@@ -39,6 +39,8 @@ export default function () {
               ],
             },
           };
+          appArchitect.test.options ??= {};
+          appArchitect.test.options.buildTarget = '::production';
         }),
       )
 
@@ -57,6 +59,6 @@ export default function () {
     `,
         ),
       )
-      .then(() => ng('test', '--configuration=production', '--watch=false'))
+      .then(() => ng('test', '--watch=false'))
   );
 }

tests/legacy-cli/e2e/tests/test/test-scripts.ts

@@ -62,7 +62,7 @@ export default async function () {
 
   await updateJsonFile('angular.json', (workspaceJson) => {
     const appArchitect = workspaceJson.projects['test-project'].architect;
-    appArchitect.test.options.scripts = [
+    appArchitect.build.options.scripts = [
       { input: 'src/string-script.js' },
       { input: 'src/input-script.js' },
     ];

tests/legacy-cli/e2e/tests/test/test-sourcemap.ts

@@ -1,8 +1,8 @@
 import assert from 'node:assert';
-import { getGlobalVariable } from '../../utils/env';
 import { writeFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { assertIsError } from '../../utils/utils';
+import { updateJsonFile } from '../../utils/project';
 
 export default async function () {
   await writeFile(
@@ -15,8 +15,12 @@ export default async function () {
   );
 
   // when sourcemaps are 'on' the stacktrace will point to the spec.ts file.
+  await updateJsonFile('angular.json', (configJson) => {
+    const appArchitect = configJson.projects['test-project'].architect;
+    appArchitect.build.configurations.development.sourceMap = true;
+  });
   try {
-    await ng('test', '--no-watch', '--source-map');
+    await ng('test', '--no-watch');
     throw new Error('ng test should have failed.');
   } catch (error) {
     assertIsError(error);
@@ -25,8 +29,12 @@ export default async function () {
   }
 
   // when sourcemaps are 'off' the stacktrace won't point to the spec.ts file.
+  await updateJsonFile('angular.json', (configJson) => {
+    const appArchitect = configJson.projects['test-project'].architect;
+    appArchitect.build.configurations.development.sourceMap = false;
+  });
   try {
-    await ng('test', '--no-watch', '--no-source-map');
+    await ng('test', '--no-watch');
     throw new Error('ng test should have failed.');
   } catch (error) {
     assertIsError(error);

tests/legacy-cli/e2e/utils/project.ts

@@ -191,7 +191,11 @@ export async function useCIChrome(projectName: string, projectDir = ''): Promise
   return updateJsonFile('angular.json', (workspaceJson) => {
     const project = workspaceJson.projects[projectName];
     const appTargets = project.targets || project.architect;
-    appTargets.test.options.browsers = 'ChromeHeadlessNoSandbox';
+    if (appTargets.test.builder === '@angular/build:unit-test') {
+      appTargets.test.options.browsers = ['ChromeHeadlessNoSandbox'];
+    } else {
+      appTargets.test.options.browsers = 'ChromeHeadlessNoSandbox';
+    }
   });
 }