feat(@schematics/angular): remove karma.conf.js from newly generated projects

alan-agius4 · alan-agius4 · commit b6897dbb0a1e · 2022-09-28T17:37:53.000+02:00
`@angular-devkit/build-angular` now has a built in Karma config. Users can still create their own Karma configuration if they want to override the default configuration.
diff --git a/packages/schematics/angular/application/files/karma.conf.js.template b/packages/schematics/angular/application/files/karma.conf.js.template
diff --git a/packages/schematics/angular/application/index.ts b/packages/schematics/angular/application/index.ts
@@ -206,7 +206,6 @@ function addAppToWorkspaceFile(
             options: {
               polyfills: ['zone.js', 'zone.js/testing'],
               tsConfig: `${projectRoot}tsconfig.spec.json`,
-              karmaConfig: `${projectRoot}karma.conf.js`,
               inlineStyleLanguage,
               assets: [`${sourceRoot}/favicon.ico`, `${sourceRoot}/assets`],
               styles: [`${sourceRoot}/styles.${options.style}`],
@@ -224,9 +223,7 @@ function addAppToWorkspaceFile(
   });
 }
 function minimalPathFilter(path: string): boolean {
-  const toRemoveList = /(tsconfig.spec.json|karma.conf.js).template$/;
-
-  return !toRemoveList.test(path);
+  return !path.endsWith('tsconfig.spec.json.template');
 }
 
 export default function (options: ApplicationOptions): Rule {
diff --git a/packages/schematics/angular/application/index_spec.ts b/packages/schematics/angular/application/index_spec.ts
@@ -9,7 +9,6 @@
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 import { parse as parseJson } from 'jsonc-parser';
 import { latestVersions } from '../utility/latest-versions';
-import { getFileContent } from '../utility/test';
 import { Schema as WorkspaceOptions } from '../workspace/schema';
 import { Schema as ApplicationOptions, Style, ViewEncapsulation } from './schema';
 
@@ -52,7 +51,6 @@ describe('Application Schematic', () => {
     const files = tree.files;
     expect(files).toEqual(
       jasmine.arrayContaining([
-        '/projects/foo/karma.conf.js',
         '/projects/foo/tsconfig.app.json',
         '/projects/foo/tsconfig.spec.json',
         '/projects/foo/src/favicon.ico',
@@ -165,14 +163,6 @@ describe('Application Schematic', () => {
     expect(_extends).toBe('../../tsconfig.json');
   });
 
-  it('should set the right coverage folder in the karma.json file', async () => {
-    const tree = await schematicRunner
-      .runSchematicAsync('application', defaultOptions, workspaceTree)
-      .toPromise();
-    const karmaConf = getFileContent(tree, '/projects/foo/karma.conf.js');
-    expect(karmaConf).toContain(`dir: require('path').join(__dirname, '../../coverage/foo')`);
-  });
-
   it('should set the skipTests flag for other schematics when using --skipTests=true', async () => {
     const options: ApplicationOptions = { ...defaultOptions, skipTests: true };
     const tree = await schematicRunner
@@ -250,7 +240,6 @@ describe('Application Schematic', () => {
     const files = tree.files;
     [
       '/projects/foo/tsconfig.spec.json',
-      '/projects/foo/karma.conf.js',
       '/projects/foo/src/app/app.component.css',
       '/projects/foo/src/app/app.component.html',
       '/projects/foo/src/app/app.component.spec.ts',
@@ -278,6 +267,7 @@ describe('Application Schematic', () => {
     [
       '/projects/foo/tsconfig.spec.json',
       '/projects/foo/karma.conf.js',
+      '/projects/foo/src/test.ts',
       '/projects/foo/src/app/app.component.html',
       '/projects/foo/src/app/app.component.spec.ts',
     ].forEach((x) => expect(files).not.toContain(x));
@@ -305,6 +295,7 @@ describe('Application Schematic', () => {
     [
       '/projects/foo/tsconfig.spec.json',
       '/projects/foo/karma.conf.js',
+      '/projects/foo/src/test.ts',
       '/projects/foo/src/app/app.component.css',
       '/projects/foo/src/app/app.component.spec.ts',
     ].forEach((x) => expect(files).not.toContain(x));
@@ -388,7 +379,6 @@ describe('Application Schematic', () => {
       const files = tree.files;
       expect(files).toEqual(
         jasmine.arrayContaining([
-          '/karma.conf.js',
           '/tsconfig.app.json',
           '/tsconfig.spec.json',
           '/src/favicon.ico',
@@ -421,7 +411,7 @@ describe('Application Schematic', () => {
 
       const testOpt = prj.architect.test.options;
       expect(testOpt.tsConfig).toEqual('tsconfig.spec.json');
-      expect(testOpt.karmaConfig).toEqual('karma.conf.js');
+      expect(testOpt.karmaConfig).toBeUndefined();
       expect(testOpt.styles).toEqual(['src/styles.css']);
     });
 
@@ -574,10 +564,5 @@ describe('Application Schematic', () => {
 
     const cfg = JSON.parse(tree.readContent('/angular.json'));
     expect(cfg.projects['@myscope/myapp']).toBeDefined();
-
-    const karmaConf = getFileContent(tree, '/projects/myscope/myapp/karma.conf.js');
-    expect(karmaConf).toContain(
-      `dir: require('path').join(__dirname, '../../../coverage/myscope/myapp')`,
-    );
   });
 });
diff --git a/packages/schematics/angular/library/files/karma.conf.js.template b/packages/schematics/angular/library/files/karma.conf.js.template
diff --git a/packages/schematics/angular/library/index.ts b/packages/schematics/angular/library/index.ts
@@ -110,7 +110,6 @@ function addLibToWorkspaceFile(
           options: {
             tsConfig: `${projectRoot}/tsconfig.spec.json`,
             polyfills: ['zone.js', 'zone.js/testing'],
-            karmaConfig: `${projectRoot}/karma.conf.js`,
           },
         },
       },
diff --git a/packages/schematics/angular/library/index_spec.ts b/packages/schematics/angular/library/index_spec.ts
@@ -51,7 +51,6 @@ describe('Library Schematic', () => {
     const files = tree.files;
     expect(files).toEqual(
       jasmine.arrayContaining([
-        '/projects/foo/karma.conf.js',
         '/projects/foo/ng-package.json',
         '/projects/foo/package.json',
         '/projects/foo/README.md',
@@ -310,11 +309,6 @@ describe('Library Schematic', () => {
 
     const rootTsCfg = getJsonFileContent(tree, '/tsconfig.json');
     expect(rootTsCfg.compilerOptions.paths['@myscope/mylib']).toEqual(['dist/myscope/mylib']);
-
-    const karmaConf = getFileContent(tree, '/projects/myscope/mylib/karma.conf.js');
-    expect(karmaConf).toContain(
-      `dir: require('path').join(__dirname, '../../../coverage/myscope/mylib')`,
-    );
   });
 
   it(`should dasherize scoped libraries`, async () => {
@@ -339,14 +333,6 @@ describe('Library Schematic', () => {
     expect(cfg.projects['@myScope/myLib']).toBeDefined();
   });
 
-  it(`should set coverage folder to "coverage/foo"`, async () => {
-    const tree = await schematicRunner
-      .runSchematicAsync('library', defaultOptions, workspaceTree)
-      .toPromise();
-    const karmaConf = getFileContent(tree, '/projects/foo/karma.conf.js');
-    expect(karmaConf).toContain(`dir: require('path').join(__dirname, '../../coverage/foo')`);
-  });
-
   it(`should create correct paths when 'newProjectRoot' is blank`, async () => {
     const workspaceTree = await schematicRunner
       .runSchematicAsync('workspace', { ...workspaceOptions, newProjectRoot: '' })
diff --git a/tests/legacy-cli/e2e/tests/basic/test.ts b/tests/legacy-cli/e2e/tests/basic/test.ts
@@ -1,9 +1,41 @@
 import { ng } from '../../utils/process';
-import { moveFile } from '../../utils/fs';
+import { writeMultipleFiles } from '../../utils/fs';
 
-export default function () {
+export default async function () {
   // make sure both --watch=false work
-  return ng('test', '--watch=false')
-    .then(() => moveFile('./karma.conf.js', './karma.conf.bis.js'))
-    .then(() => ng('test', '--watch=false', '--karma-config=karma.conf.bis.js'));
+  await ng('test', '--watch=false');
+
+  // Works with custom config
+  await writeMultipleFiles({
+    './karma.conf.bis.js': `
+      // Karma configuration file, see link for more information
+      // https://karma-runner.github.io/1.0/config/configuration-file.html
+      module.exports = function (config) {
+        config.set({
+          basePath: '',
+          frameworks: ['jasmine', '@angular-devkit/build-angular'],
+          plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage'),
+            require('@angular-devkit/build-angular/plugins/karma')
+          ],
+          client: {
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+          },
+          reporters: ['progress', 'kjhtml'],
+          port: 9876,
+          colors: true,
+          logLevel: config.LOG_INFO,
+          autoWatch: true,
+          browsers: ['ChromeHeadless'],
+          singleRun: false,
+          restartOnFileChange: true
+        });
+      };
+      `,
+  });
+
+  await ng('test', '--watch=false', '--karma-config=karma.conf.bis.js');
 }
diff --git a/tests/legacy-cli/e2e/tests/generate/application/application-basic.ts b/tests/legacy-cli/e2e/tests/generate/application/application-basic.ts
@@ -5,6 +5,6 @@ import { useCIChrome } from '../../../utils/project';
 export default function () {
   return ng('generate', 'application', 'app2')
     .then(() => expectFileToMatch('angular.json', /\"app2\":/))
-    .then(() => useCIChrome('projects/app2'))
+    .then(() => useCIChrome('app2', 'projects/app2'))
     .then(() => ng('test', 'app2', '--watch=false'));
 }
diff --git a/tests/legacy-cli/e2e/tests/generate/directive/directive-prefix.ts b/tests/legacy-cli/e2e/tests/generate/directive/directive-prefix.ts
@@ -21,7 +21,7 @@ export default function () {
       )
       .then(() => ng('generate', 'application', 'app-two', '--skip-install'))
       .then(() => useCIDefaults('app-two'))
-      .then(() => useCIChrome('./projects/app-two'))
+      .then(() => useCIChrome('app-two', './projects/app-two'))
       .then(() =>
         updateJsonFile('angular.json', (configJson) => {
           configJson.projects['test-project'].schematics = {
diff --git a/tests/legacy-cli/e2e/tests/misc/cli-exit-interop.ts b/tests/legacy-cli/e2e/tests/misc/cli-exit-interop.ts
@@ -26,7 +26,7 @@ export default async function () {
     // Simulates issue https://github.com/angular/angular-cli/issues/23289
     await replaceInFile('angular.json', /styles\.css/g, 'styles.scss');
 
-    await useCIChrome();
+    await useCIChrome('thirteen-project');
     await useCIDefaults('thirteen-project');
     await noSilentNg('test', '--watch=false');
   } finally {
diff --git a/tests/legacy-cli/e2e/tests/update/update.ts b/tests/legacy-cli/e2e/tests/update/update.ts
@@ -72,8 +72,8 @@ export default async function () {
   await ng('update', '@angular/cli', ...extraUpdateArgs);
 
   // Setup testing to use CI Chrome.
-  await useCIChrome('./');
-  await useCIChrome('./e2e/');
+  await useCIChrome('twelve-project', './');
+  await useCIChrome('twelve-project', './e2e/');
   await useCIDefaults('twelve-project');
 
   // Run CLI commands.
diff --git a/tests/legacy-cli/e2e/utils/process.ts b/tests/legacy-cli/e2e/utils/process.ts
@@ -167,7 +167,7 @@ export function extractNpmEnv() {
 
 function extractCIEnv(): NodeJS.ProcessEnv {
   return Object.keys(process.env)
-    .filter((v) => v.startsWith('SAUCE_') || v === 'CI' || v === 'CIRCLECI')
+    .filter((v) => v.startsWith('SAUCE_') || v === 'CI' || v === 'CIRCLECI' || v === 'CHROME_BIN')
     .reduce<NodeJS.ProcessEnv>((vars, n) => {
       vars[n] = process.env[n];
       return vars;
diff --git a/tests/legacy-cli/e2e/utils/project.ts b/tests/legacy-cli/e2e/utils/project.ts
@@ -83,8 +83,8 @@ export async function prepareProjectForE2e(name: string) {
     await runWebdriverUpdate();
   }
 
-  await useCIChrome('e2e');
-  await useCIChrome('');
+  await useCIChrome(name, 'e2e');
+  await useCIChrome(name, '');
   await useCIDefaults(name);
 
   // Force sourcemaps to be from the root of the filesystem.
@@ -160,7 +160,7 @@ export function useSha() {
   }
 }
 
-export function useCIDefaults(projectName = 'test-project') {
+export function useCIDefaults(projectName = 'test-project'): Promise<void> {
   return updateJsonFile('angular.json', (workspaceJson) => {
     // Disable progress reporting on CI to reduce spam.
     const project = workspaceJson.projects[projectName];
@@ -182,10 +182,8 @@ export function useCIDefaults(projectName = 'test-project') {
   });
 }
 
-export async function useCIChrome(projectDir: string = ''): Promise<void> {
+export async function useCIChrome(projectName: string, projectDir = ''): Promise<void> {
   const protractorConf = path.join(projectDir, 'protractor.conf.js');
-  const karmaConf = path.join(projectDir, 'karma.conf.js');
-
   const chromePath = require('puppeteer').executablePath();
 
   // Use Puppeteer in protractor if a config is found on the project.
@@ -215,11 +213,12 @@ export async function useCIChrome(projectDir: string = ''): Promise<void> {
     );
   }
 
-  // Use Puppeteer in karma if a config is found on the project.
-  if (fs.existsSync(karmaConf)) {
-    await prependToFile(karmaConf, `process.env.CHROME_BIN = String.raw\`${chromePath}\`;`);
-    await replaceInFile(karmaConf, `browsers: ['Chrome']`, `browsers: ['ChromeHeadless']`);
-  }
+  // Use ChromeHeadless.
+  return updateJsonFile('angular.json', (workspaceJson) => {
+    const project = workspaceJson.projects[projectName];
+    const appTargets = project.targets || project.architect;
+    appTargets.test.options.browsers = 'ChromeHeadless';
+  });
 }
 
 export function getNgCLIVersion(): SemVer {
diff --git a/tests/legacy-cli/e2e_runner.ts b/tests/legacy-cli/e2e_runner.ts
@@ -170,6 +170,9 @@ console.log(['Tests:', ...testsToRun].join('\n '));
 
 setGlobalVariable('argv', argv);
 setGlobalVariable('package-manager', argv.yarn ? 'yarn' : 'npm');
+// This is needed by karma-chrome-launcher
+// https://github.com/karma-runner/karma-chrome-launcher#headless-chromium-with-puppeteer
+process.env['CHROME_BIN'] = require('puppeteer').executablePath();
 
 Promise.all([findFreePort(), findFreePort(), findPackageTars()])
   .then(async ([httpPort, httpsPort, packageTars]) => {

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,6 @@ import { useCIChrome } from '../../../utils/project';`
`5`	`5`	`export default function () {`
`6`	`6`	`return ng('generate', 'application', 'app2')`
`7`	`7`	`.then(() => expectFileToMatch('angular.json', /\"app2\":/))`
`8`		`- .then(() => useCIChrome('projects/app2'))`
	`8`	`+ .then(() => useCIChrome('app2', 'projects/app2'))`
`9`	`9`	`.then(() => ng('test', 'app2', '--watch=false'));`
`10`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ export default function () {`
`21`	`21`	`)`
`22`	`22`	`.then(() => ng('generate', 'application', 'app-two', '--skip-install'))`
`23`	`23`	`.then(() => useCIDefaults('app-two'))`
`24`		`- .then(() => useCIChrome('./projects/app-two'))`
	`24`	`+ .then(() => useCIChrome('app-two', './projects/app-two'))`
`25`	`25`	`.then(() =>`
`26`	`26`	`updateJsonFile('angular.json', (configJson) => {`
`27`	`27`	`configJson.projects['test-project'].schematics = {`