fix(angular): upgrade karma and fix settings (#9056)

packages/angular/src/generators/init/init.spec.ts

@@ -73,9 +73,7 @@ describe('init', () => {
         // ASSERT
         expect(devDependencies['karma']).toBeDefined();
         expect(devDependencies['karma-chrome-launcher']).toBeDefined();
-        expect(
+        expect(devDependencies['karma-coverage']).toBeDefined();
-          devDependencies['karma-coverage-istanbul-reporter']
-        ).toBeDefined();
         expect(devDependencies['karma-jasmine']).toBeDefined();
         expect(devDependencies['karma-jasmine-html-reporter']).toBeDefined();
         expect(devDependencies['jasmine-core']).toBeDefined();

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

@@ -61,8 +61,8 @@ module.exports = function(config) {
   const baseConfig = getBaseKarmaConfig();
   config.set({
     ...baseConfig,
-    coverageIstanbulReporter: {
+    coverageReporter: {
-      ...baseConfig.coverageIstanbulReporter,
+      ...baseConfig.coverageReporter,
       dir: join(__dirname, '../../coverage/libs/lib1')
     }
   });

packages/angular/src/generators/karma-project/files/karma.conf.js__tmpl__

@@ -8,8 +8,8 @@ module.exports = function(config) {
   const baseConfig = getBaseKarmaConfig();
   config.set({
     ...baseConfig,
-    coverageIstanbulReporter: {
+    coverageReporter: {
-      ...baseConfig.coverageIstanbulReporter,
+      ...baseConfig.coverageReporter,
       dir: join(__dirname, '<%= offsetFromRoot %>coverage/<%= projectRoot %>')
     }
   });

packages/angular/src/generators/karma/files/karma.conf.js__tmpl__

@@ -12,16 +12,22 @@ module.exports = () => {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
       clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
+    coverageReporter: {
-      dir: join(__dirname, '../../coverage'),
+      dir: join(__dirname, './coverage'),
-      reports: ['html', 'lcovonly'],
+      subdir: '.',
-      fixWebpackSourcePaths: true,
+      reporters: [{ type: 'html' }, { type: 'text-summary' }],
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,

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

@@ -29,7 +29,7 @@ describe('karma', () => {
     const { devDependencies } = devkit.readJson(tree, 'package.json');
     expect(devDependencies['karma']).toBeDefined();
     expect(devDependencies['karma-chrome-launcher']).toBeDefined();
-    expect(devDependencies['karma-coverage-istanbul-reporter']).toBeDefined();
+    expect(devDependencies['karma-coverage']).toBeDefined();
     expect(devDependencies['karma-jasmine']).toBeDefined();
     expect(devDependencies['karma-jasmine-html-reporter']).toBeDefined();
     expect(devDependencies['jasmine-core']).toBeDefined();

packages/angular/src/generators/karma/karma.ts

@@ -20,12 +20,12 @@ export function karmaGenerator(tree: Tree, options: GeneratorOptions) {
         tree,
         {},
         {
-          karma: '~5.0.0',
+          karma: '~6.3.0',
           'karma-chrome-launcher': '~3.1.0',
-          'karma-coverage-istanbul-reporter': '~3.0.2',
+          'karma-coverage': '~2.2.0',
           'karma-jasmine': '~4.0.0',
-          'karma-jasmine-html-reporter': '^1.5.0',
+          'karma-jasmine-html-reporter': '~1.7.0',
-          'jasmine-core': '~3.6.0',
+          'jasmine-core': '~3.10.0',
           'jasmine-spec-reporter': '~5.0.0',
           '@types/jasmine': '~3.5.0',
         }

packages/angular/src/migrations/update-13-8-4/__snapshots__/migrate-karma-conf.spec.ts.snap

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Migrate Karma Config should successfully migrate outdate karma setup 1`] = `
+"{
+  \\"name\\": \\"test-name\\",
+  \\"dependencies\\": {},
+  \\"devDependencies\\": {
+    \\"jasmine-core\\": \\"~3.10.0\\",
+    \\"karma\\": \\"~6.3.0\\",
+    \\"karma-coverage\\": \\"~2.2.0\\",
+    \\"karma-jasmine-html-reporter\\": \\"~1.7.0\\"
+  }
+}
+"
+`;
+
+exports[`Migrate Karma Config should successfully migrate outdate karma setup 2`] = `
+"// Karma configuration file, see link for more information
+        // https://karma-runner.github.io/1.0/config/configuration-file.html
+        
+        const { join } = require('path');
+        const { constants } = require('karma');
+        
+        module.exports = () => {
+          return {
+            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
+            },
+            coverageReporter: {
+              dir: join(__dirname, './coverage'),
+              subdir: '.',
+reporters: [{ type: 'html' }, { type: 'text-summary' }],
+              fixWebpackSourcePaths: true,
+            },
+            reporters: ['progress', 'kjhtml'],
+            port: 9876,
+            colors: true,
+            logLevel: constants.LOG_INFO,
+            autoWatch: true,
+            browsers: ['Chrome'],
+            singleRun: true,
+          };
+        };"
+`;
+
+exports[`Migrate Karma Config should successfully migrate outdate karma setup 3`] = `
+"// Karma configuration file, see link for more information
+    // https://karma-runner.github.io/1.0/config/configuration-file.html
+    
+    const { join } = require('path');
+    const getBaseKarmaConfig = require('../../karma.conf');
+    
+    module.exports = function(config) {
+      const baseConfig = getBaseKarmaConfig();
+      config.set({
+        ...baseConfig,
+        coverageReporter: {
+          ...baseConfig.coverageReporter,
+          dir: join(__dirname, '../../coverage/apps/test')
+        }
+      });
+    };"
+`;

packages/angular/src/migrations/update-13-8-4/migrate-karma-conf.spec.ts

@@ -0,0 +1,92 @@
+import { addProjectConfiguration } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+
+import migrateKarmaConfig from './migrate-karma-conf';
+
+describe('Migrate Karma Config', () => {
+  it('should successfully migrate outdate karma setup', async () => {
+    // ARRANGE
+    const tree = createTreeWithEmptyWorkspace(2);
+    tree.write(
+      'karma.conf.js',
+      `// Karma configuration file, see link for more information
+        // https://karma-runner.github.io/1.0/config/configuration-file.html
+        
+        const { join } = require('path');
+        const { constants } = require('karma');
+        
+        module.exports = () => {
+          return {
+            basePath: '',
+            frameworks: ['jasmine', '@angular-devkit/build-angular'],
+            plugins: [
+              require('karma-jasmine'),
+              require('karma-chrome-launcher'),
+              require('karma-jasmine-html-reporter'),
+              require('karma-coverage-istanbul-reporter'),
+              require('@angular-devkit/build-angular/plugins/karma'),
+            ],
+            client: {
+              clearContext: false, // leave Jasmine Spec Runner output visible in browser
+            },
+            coverageIstanbulReporter: {
+              dir: join(__dirname, '../../coverage'),
+              reports: ['html', 'lcovonly'],
+              fixWebpackSourcePaths: true,
+            },
+            reporters: ['progress', 'kjhtml'],
+            port: 9876,
+            colors: true,
+            logLevel: constants.LOG_INFO,
+            autoWatch: true,
+            browsers: ['Chrome'],
+            singleRun: true,
+          };
+        };`
+    );
+
+    addProjectConfiguration(tree, 'test', {
+      root: 'apps/test',
+      targets: {
+        test: {
+          executor: '@angular-devkit/build-angular:karma',
+          options: {
+            karmaConfig: 'karma.conf.js',
+          },
+        },
+      },
+    });
+
+    tree.write(
+      'apps/test/karma.conf.js',
+      `// Karma configuration file, see link for more information
+    // https://karma-runner.github.io/1.0/config/configuration-file.html
+    
+    const { join } = require('path');
+    const getBaseKarmaConfig = require('../../karma.conf');
+    
+    module.exports = function(config) {
+      const baseConfig = getBaseKarmaConfig();
+      config.set({
+        ...baseConfig,
+        coverageIstanbulReporter: {
+          ...baseConfig.coverageIstanbulReporter,
+          dir: join(__dirname, '../../coverage/apps/test')
+        }
+      });
+    };`
+    );
+
+    // ACT
+    await migrateKarmaConfig(tree);
+
+    // ASSERT
+    const packageJson = tree.read('package.json', 'utf-8');
+    const rootKarmaContents = tree.read('karma.conf.js', 'utf-8');
+    const appKarmaContents = tree.read('apps/test/karma.conf.js', 'utf-8');
+
+    expect(packageJson).toMatchSnapshot();
+    expect(rootKarmaContents).toMatchSnapshot();
+    expect(appKarmaContents).toMatchSnapshot();
+  });
+});

packages/angular/src/migrations/update-13-8-4/migrate-karma-conf.ts

@@ -0,0 +1,60 @@
+import type { Tree } from '@nrwl/devkit';
+import {
+  addDependenciesToPackageJson,
+  joinPathFragments,
+  readProjectConfiguration,
+  formatFiles,
+} from '@nrwl/devkit';
+import { forEachExecutorOptions } from '@nrwl/workspace/src/utilities/executor-options-utils';
+export default async function (tree: Tree) {
+  const executorName = '@angular-devkit/build-angular:karma';
+
+  forEachExecutorOptions(tree, executorName, ({ karmaConfig }, projectName) => {
+    const project = readProjectConfiguration(tree, projectName);
+
+    const pathToKarma = joinPathFragments(project.root, karmaConfig);
+    if (!tree.exists(pathToKarma)) {
+      return;
+    }
+
+    const karmaContents = tree.read(pathToKarma, 'utf-8');
+    const updatedKarmaContents = karmaContents.replace(
+      /coverageIstanbulReporter/g,
+      'coverageReporter'
+    );
+
+    tree.write(pathToKarma, updatedKarmaContents);
+  });
+
+  const pathToRootKarmaConf = 'karma.conf.js';
+  if (!tree.exists(pathToRootKarmaConf)) {
+    return;
+  }
+
+  const rootKarmaContents = tree.read(pathToRootKarmaConf, 'utf-8');
+  const updatedKarmaContents = rootKarmaContents
+    .replace(/coverageIstanbulReporter/g, 'coverageReporter')
+    .replace(/karma-coverage-istanbul-reporter/, 'karma-coverage')
+    .replace(
+      /reports: \['html', 'lcovonly'\]/,
+      `subdir: '.',\nreporters: [{ type: 'html' }, { type: 'text-summary' }]`
+    )
+    .replace(/'\.\.\/\.\.\/coverage'/, `'./coverage'`);
+
+  tree.write(pathToRootKarmaConf, updatedKarmaContents);
+
+  const installPackages = addDependenciesToPackageJson(
+    tree,
+    {},
+    {
+      karma: '~6.3.0',
+      'karma-coverage': '~2.2.0',
+      'karma-jasmine-html-reporter': '~1.7.0',
+      'jasmine-core': '~3.10.0',
+    }
+  );
+
+  await formatFiles(tree);
+
+  return installPackages;
+}