From 6330d9ec970fd3587a170de489be4559c442edc4 Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Fri, 20 Jan 2023 10:06:36 +0000 Subject: [PATCH] fix(angular): karma setup should be generated correctly for v14 (#14459) --- .../angular-v14/lib/update-config-files.ts | 4 ++ .../src/generators/application/application.ts | 3 +- .../karma-project/karma-project.spec.ts | 55 ++++++++++++++++++- .../lib/generate-karma-project-files.ts | 10 ++++ .../karma-project/lib/update-tsconfig.ts | 7 ++- .../lib/update-workspace-config.ts | 5 ++ .../karma-project/lib/v14-test-file.ts | 28 ++++++++++ 7 files changed, 107 insertions(+), 5 deletions(-) create mode 100644 packages/angular/src/generators/karma-project/lib/v14-test-file.ts diff --git a/packages/angular/src/generators/application/angular-v14/lib/update-config-files.ts b/packages/angular/src/generators/application/angular-v14/lib/update-config-files.ts index 3476327b3faf2..21e56a03312f2 100644 --- a/packages/angular/src/generators/application/angular-v14/lib/update-config-files.ts +++ b/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`); } diff --git a/packages/angular/src/generators/application/application.ts b/packages/angular/src/generators/application/application.ts index 01a755299734c..86439d18d9c97 100644 --- a/packages/angular/src/generators/application/application.ts +++ b/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); diff --git a/packages/angular/src/generators/karma-project/karma-project.spec.ts b/packages/angular/src/generators/karma-project/karma-project.spec.ts index 6bc379083c565..274ab1089e382 100644 --- a/packages/angular/src/generators/karma-project/karma-project.spec.ts +++ b/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\\" + ] + } + " + `); + }); + }); }); }); diff --git a/packages/angular/src/generators/karma-project/lib/generate-karma-project-files.ts b/packages/angular/src/generators/karma-project/lib/generate-karma-project-files.ts index 55912fe9b15bb..3151414c4042b 100644 --- a/packages/angular/src/generators/karma-project/lib/generate-karma-project-files.ts +++ b/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 { diff --git a/packages/angular/src/generators/karma-project/lib/update-tsconfig.ts b/packages/angular/src/generators/karma-project/lib/update-tsconfig.ts index 541dff215d768..0925d6a19efc5 100644 --- a/packages/angular/src/generators/karma-project/lib/update-tsconfig.ts +++ b/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) { diff --git a/packages/angular/src/generators/karma-project/lib/update-workspace-config.ts b/packages/angular/src/generators/karma-project/lib/update-workspace-config.ts index df671656cc077..c5e14d25c0999 100644 --- a/packages/angular/src/generators/karma-project/lib/update-workspace-config.ts +++ b/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'], diff --git a/packages/angular/src/generators/karma-project/lib/v14-test-file.ts b/packages/angular/src/generators/karma-project/lib/v14-test-file.ts new file mode 100644 index 0000000000000..64b5dd60fdac2 --- /dev/null +++ b/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);`;