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.

(cherry picked from commit 430dad5)

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

@@ -1,21 +1,23 @@
 import { ng } from '../../utils/process';
 import { writeFile, writeMultipleFiles } from '../../utils/fs';
 import { updateJsonFile } from '../../utils/project';
+import { getGlobalVariable } from '../../utils/env';
+
+export default async function () {
+  const isWebpack = !getGlobalVariable('argv')['esbuild'];
 
-export default function () {
   // Tests run in 'dev' environment by default.
-  return (
-    writeMultipleFiles({
-      'src/environment.prod.ts': `
+  await writeMultipleFiles({
+    'src/environment.prod.ts': `
       export const environment = {
         production: true
       };`,
-      'src/environment.ts': `
+    'src/environment.ts': `
       export const environment = {
         production: false
       };
       `,
-      'src/app/environment.spec.ts': `
+    'src/app/environment.spec.ts': `
       import { environment } from '../environment';
 
       describe('Test environment', () => {
@@ -24,29 +26,33 @@ export default function () {
         });
       });
     `,
-    })
-      .then(() => ng('test', '--watch=false'))
-      .then(() =>
-        updateJsonFile('angular.json', (configJson) => {
-          const appArchitect = configJson.projects['test-project'].architect;
-          appArchitect.test.configurations = {
-            production: {
-              fileReplacements: [
-                {
-                  replace: 'src/environment.ts',
-                  with: 'src/environment.prod.ts',
-                },
-              ],
-            },
-          };
-        }),
-      )
-
-      // Tests can run in different environment.
-      .then(() =>
-        writeFile(
-          'src/app/environment.spec.ts',
-          `
+  });
+
+  await ng('test', '--watch=false');
+
+  await updateJsonFile('angular.json', (configJson) => {
+    const appArchitect = configJson.projects['test-project'].architect;
+    appArchitect[isWebpack ? 'test' : 'build'].configurations = {
+      production: {
+        fileReplacements: [
+          {
+            replace: 'src/environment.ts',
+            with: 'src/environment.prod.ts',
+          },
+        ],
+      },
+    };
+    if (!isWebpack) {
+      appArchitect.test.options ??= {};
+      appArchitect.test.options.buildTarget = '::production';
+    }
+  });
+
+  // Tests can run in different environment.
+
+  await writeFile(
+    'src/app/environment.spec.ts',
+    `
       import { environment } from '../environment';
 
       describe('Test environment', () => {
@@ -55,8 +61,11 @@ export default function () {
         });
       });
     `,
-        ),
-      )
-      .then(() => ng('test', '--configuration=production', '--watch=false'))
   );
+
+  if (isWebpack) {
+    await ng('test', '--watch=false', '--configuration=production');
+  } else {
+    await ng('test', '--watch=false');
+  }
 }

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

@@ -1,3 +1,4 @@
+import { getGlobalVariable } from '../../utils/env';
 import { writeMultipleFiles } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
@@ -60,9 +61,10 @@ export default async function () {
   // should fail because the global scripts were not added to scripts array
   await expectToFail(() => ng('test', '--watch=false'));
 
+  const isWebpack = !getGlobalVariable('argv')['esbuild'];
   await updateJsonFile('angular.json', (workspaceJson) => {
     const appArchitect = workspaceJson.projects['test-project'].architect;
-    appArchitect.test.options.scripts = [
+    appArchitect[isWebpack ? 'test' : 'build'].options.scripts = [
       { input: 'src/string-script.js' },
       { input: 'src/input-script.js' },
     ];

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

@@ -1,10 +1,13 @@
 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';
+import { getGlobalVariable } from '../../utils/env';
 
 export default async function () {
+  const isWebpack = !getGlobalVariable('argv')['esbuild'];
+
   await writeFile(
     'src/app/app.spec.ts',
     `
@@ -15,8 +18,16 @@ 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;
+    if (isWebpack) {
+      appArchitect['test'].options.sourceMap = true;
+    } else {
+      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 +36,16 @@ 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;
+    if (isWebpack) {
+      appArchitect['test'].options.sourceMap = false;
+    } else {
+      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';
+    }
   });
 }