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

`@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.

Author: alan-agius4

packages/schematics/angular/application/files/karma.conf.js.template

@@ -213,7 +213,6 @@ function addAppToWorkspaceFile(
               main: `${sourceRoot}/test.ts`,
               polyfills: `${sourceRoot}/polyfills.ts`,
               tsConfig: `${projectRoot}tsconfig.spec.json`,
-              karmaConfig: `${projectRoot}karma.conf.js`,
               inlineStyleLanguage,
               assets: [`${sourceRoot}/favicon.ico`, `${sourceRoot}/assets`],
               styles: [`${sourceRoot}/styles.${options.style}`],
@@ -231,7 +230,7 @@ function addAppToWorkspaceFile(
   });
 }
 function minimalPathFilter(path: string): boolean {
-  const toRemoveList = /(test.ts|tsconfig.spec.json|karma.conf.js).template$/;
+  const toRemoveList = /(test.ts|tsconfig.spec.json).template$/;
 
   return !toRemoveList.test(path);
 }

packages/schematics/angular/application/index.ts

@@ -52,7 +52,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/environments/environment.ts',
@@ -170,14 +169,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
@@ -255,7 +246,6 @@ describe('Application Schematic', () => {
     const files = tree.files;
     [
       '/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.html',
@@ -286,7 +276,6 @@ describe('Application Schematic', () => {
     const files = tree.files;
     [
       '/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',
@@ -317,7 +306,6 @@ describe('Application Schematic', () => {
     const files = tree.files;
     [
       '/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',
@@ -405,7 +393,6 @@ describe('Application Schematic', () => {
       const files = tree.files;
       expect(files).toEqual(
         jasmine.arrayContaining([
-          '/karma.conf.js',
           '/tsconfig.app.json',
           '/tsconfig.spec.json',
           '/src/environments/environment.ts',
@@ -443,7 +430,7 @@ describe('Application Schematic', () => {
       const testOpt = prj.architect.test.options;
       expect(testOpt.main).toEqual('src/test.ts');
       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']);
     });
 
@@ -596,10 +583,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')`,
-    );
   });
 });

packages/schematics/angular/application/index_spec.ts

@@ -110,7 +110,6 @@ function addLibToWorkspaceFile(
           options: {
             main: `${projectRoot}/src/test.ts`,
             tsConfig: `${projectRoot}/tsconfig.spec.json`,
-            karmaConfig: `${projectRoot}/karma.conf.js`,
           },
         },
       },

packages/schematics/angular/library/files/karma.conf.js.template

@@ -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',
@@ -311,11 +310,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 () => {
@@ -340,14 +334,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: '' })

packages/schematics/angular/library/index.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');
 }

packages/schematics/angular/library/index_spec.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'));
 }

tests/legacy-cli/e2e/tests/basic/test.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 = {

tests/legacy-cli/e2e/tests/generate/application/application-basic.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 {

tests/legacy-cli/e2e/tests/generate/directive/directive-prefix.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.

tests/legacy-cli/e2e/tests/misc/cli-exit-interop.ts

@@ -84,8 +84,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.
@@ -159,7 +159,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];
@@ -181,11 +181,12 @@ 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();
+  process.env.CHROME_BIN = chromePath;
 
   // Use Puppeteer in protractor if a config is found on the project.
   if (fs.existsSync(protractorConf)) {
@@ -218,6 +219,12 @@ export async function useCIChrome(projectDir: string = ''): Promise<void> {
   if (fs.existsSync(karmaConf)) {
     await prependToFile(karmaConf, `process.env.CHROME_BIN = String.raw\`${chromePath}\`;`);
     await replaceInFile(karmaConf, `browsers: ['Chrome']`, `browsers: ['ChromeHeadless']`);
+  } else {
+    return updateJsonFile('angular.json', (workspaceJson) => {
+      const project = workspaceJson.projects[projectName];
+      const appTargets = project.targets || project.architect;
+      appTargets.test.options.browsers = 'ChromeHeadless';
+    });
   }
 }