fix(angular): karma setup should be generated correctly for v14 (#14459)

Author: Coly010

packages/angular/src/generators/application/angular-v14/lib/update-config-files.ts

@@ -134,4 +134,8 @@ function updateAppAndE2EProjectConfigurations(
       removeProjectConfiguration(host, options.e2eProjectName);
     }
   }
+
+  // delete some default test configs
+  host.delete(`${options.appProjectRoot}/karma.conf.js`);
+  host.delete(`${options.appProjectRoot}/src/test.ts`);
 }

packages/angular/src/generators/application/application.ts

@@ -54,8 +54,7 @@ export async function applicationGenerator(
     let previousGenerator = await import(
       join(__dirname, generatorDirectory, 'application')
     );
-    await previousGenerator.default(tree, schema);
-    return;
+    return await previousGenerator.default(tree, schema);
   }
 
   const options = normalizeOptions(tree, schema);

packages/angular/src/generators/karma-project/karma-project.spec.ts

@@ -2,9 +2,13 @@ import type { Tree } from '@nrwl/devkit';
 import * as devkit from '@nrwl/devkit';
 import {
   readProjectConfiguration,
+  updateJson,
   updateProjectConfiguration,
 } from '@nrwl/devkit';
-import { createTreeWithEmptyV1Workspace } from '@nrwl/devkit/testing';
+import {
+  createTreeWithEmptyV1Workspace,
+  createTreeWithEmptyWorkspace,
+} from '@nrwl/devkit/testing';
 import { karmaProjectGenerator } from './karma-project';
 import libraryGenerator from '../library/library';
 import { Linter } from '@nrwl/linter';
@@ -274,5 +278,54 @@ describe('karmaProject', () => {
       ).toMatchSnapshot();
       expect(tree.read('karma.conf.js', 'utf-8')).toMatchSnapshot();
     });
+
+    describe('--angular v14', () => {
+      it('should generate the correct karma files for v14', async () => {
+        // ARRANGE
+        const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+        updateJson(tree, 'package.json', (json) => ({
+          ...json,
+          dependencies: {
+            ...json.dependencies,
+            '@angular/core': '14.2.0',
+          },
+        }));
+
+        // ACT
+        await applicationGenerator(tree, {
+          name: 'app',
+          unitTestRunner: UnitTestRunner.Karma,
+        });
+
+        // ASSERT
+        expect(tree.exists('apps/app/src/test.ts')).toBeTruthy();
+        expect(tree.exists('apps/app/karma.conf.js')).toBeTruthy();
+        expect(
+          readProjectConfiguration(tree, 'app').targets.test.options.main
+        ).toEqual('apps/app/src/test.ts');
+        expect(tree.read('apps/app/tsconfig.spec.json', 'utf-8'))
+          .toMatchInlineSnapshot(`
+          "{
+            \\"extends\\": \\"./tsconfig.json\\",
+            \\"compilerOptions\\": {
+              \\"outDir\\": \\"../../dist/out-tsc\\",
+              \\"types\\": [
+                \\"jasmine\\",
+                \\"node\\"
+              ]
+            },
+            \\"include\\": [
+              \\"src/**/*.spec.ts\\",
+              \\"src/**/*.test.ts\\",
+              \\"src/**/*.d.ts\\"
+            ],
+            \\"files\\": [
+              \\"src/test.ts\\"
+            ]
+          }
+          "
+        `);
+      });
+    });
   });
 });

packages/angular/src/generators/karma-project/lib/generate-karma-project-files.ts

@@ -7,6 +7,8 @@ import {
   readProjectConfiguration,
 } from '@nrwl/devkit';
 import { tsquery } from '@phenomnomnominal/tsquery';
+import { getInstalledAngularVersionInfo } from '../../utils/angular-version-utils';
+import { v14TestFile } from './v14-test-file';
 
 export function generateKarmaProjectFiles(tree: Tree, project: string): void {
   const projectConfig = readProjectConfiguration(tree, project);
@@ -49,6 +51,14 @@ export function generateKarmaProjectFiles(tree: Tree, project: string): void {
       }
     );
   }
+
+  const installedAngularVersion = getInstalledAngularVersionInfo(tree);
+  if (installedAngularVersion.major === 14) {
+    tree.write(
+      joinPathFragments(projectConfig.sourceRoot, 'test.ts'),
+      v14TestFile({ isLibrary: projectConfig.projectType === 'library' })
+    );
+  }
 }
 
 function isWorkspaceWithProjectAtRoot(tree: Tree): boolean {

packages/angular/src/generators/karma-project/lib/update-tsconfig.ts

@@ -4,6 +4,7 @@ import {
   readProjectConfiguration,
   updateJson,
 } from '@nrwl/devkit';
+import { getInstalledAngularVersionInfo } from '../../utils/angular-version-utils';
 
 export function updateTsConfigs(tree: Tree, project: string): void {
   const projectConfig = readProjectConfiguration(tree, project);
@@ -24,7 +25,9 @@ export function updateTsConfigs(tree: Tree, project: string): void {
     }
   );
 
-  let extraFiles: string[] = [];
+  const installedAngularVersion = getInstalledAngularVersionInfo(tree);
+  let extraFiles: string[] =
+    installedAngularVersion.major === 14 ? ['src/test.ts'] : [];
   if (
     projectConfig.projectType == 'application' &&
     projectConfig.targets.build?.options?.polyfills &&
@@ -34,7 +37,7 @@ export function updateTsConfigs(tree: Tree, project: string): void {
     polyfillsPath = polyfillsPath.startsWith(projectConfig.root)
       ? polyfillsPath.replace(`${projectConfig.root}/`, '')
       : polyfillsPath;
-    extraFiles = [polyfillsPath];
+    extraFiles = [...extraFiles, polyfillsPath];
   }
 
   if (!extraFiles.length) {

packages/angular/src/generators/karma-project/lib/update-workspace-config.ts

@@ -4,12 +4,17 @@ import {
   readProjectConfiguration,
   updateProjectConfiguration,
 } from '@nrwl/devkit';
+import { getInstalledAngularVersionInfo } from '../../utils/angular-version-utils';
 
 export function updateWorkspaceConfig(tree: Tree, project: string): void {
+  const installedAngularVersionInfo = getInstalledAngularVersionInfo(tree);
   const projectConfig = readProjectConfiguration(tree, project);
   projectConfig.targets.test = {
     executor: '@angular-devkit/build-angular:karma',
     options: {
+      ...(installedAngularVersionInfo.major === 14
+        ? { main: joinPathFragments(projectConfig.sourceRoot, 'test.ts') }
+        : {}),
       tsConfig: joinPathFragments(projectConfig.root, 'tsconfig.spec.json'),
       karmaConfig: joinPathFragments(projectConfig.root, 'karma.conf.js'),
       polyfills: ['zone.js', 'zone.js/testing'],

packages/angular/src/generators/karma-project/lib/v14-test-file.ts

@@ -0,0 +1,28 @@
+export const v14TestFile = (opts: {
+  isLibrary: boolean;
+}) => `// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+${
+  opts.isLibrary
+    ? `
+import 'zone.js/dist/zone';
+`
+    : ``
+}
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);`;