feat (CodeCoverage): use karma-remap-istanbul

use karma-remap-istanbul to map code coverage back to source typescript file

Author: Danny Blue

addon/ng2/blueprints/ng2/files/config/karma.conf.js

@@ -9,7 +9,8 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-coverage'),
-      require('angular-cli/plugins/karma')
+      require('angular-cli/plugins/karma'),
+      require('karma-remap-istanbul')
     ],
     customLaunchers: {
       // chrome setup for travis CI using chromium
@@ -22,10 +23,34 @@ module.exports = function (config) {
       { pattern: './src/test.ts', watched: false }
     ],
     preprocessors: {
+      './src/**/**/*.ts': ['angular-cli-coverage'],
       './src/test.ts': ['angular-cli']
     },
+    coverageReporter: {
+      dir: 'coverage',
+      reporters: [
+        {
+          type: 'text-summary'
+        },
+        {
+          type: 'json',
+          subdir: '.',
+          file: 'coverage-final.json'
+        }
+      ]
+    },
+
+    remapIstanbulReporter: {
+      src: 'coverage/coverage-final.json',
+      reports: {
+        lcovonly: 'coverage/lcov.info',
+        html: 'coverage/report'
+      },
+      timeoutNotCreated: 5000,
+      timeoutNoMoreFiles: 1000
+    },
     angularCliConfig: './angular-cli.json',
-    reporters: ['coverage', 'progress'],
+    reporters: ['coverage', 'progress', 'karma-remap-istanbul'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

addon/ng2/blueprints/ng2/files/package.json

@@ -44,6 +44,7 @@
     "karma-chrome-launcher": "0.2.3",
     "karma-coverage": "^1.0.0",
     "karma-jasmine": "0.3.8",
+    "karma-remap-istanbul": "^0.1.1",
     "protractor": "3.3.0",
     "ts-node": "1.2.1",
     "tslint": "3.13.0",

addon/ng2/models/webpack-build-test.js

@@ -46,6 +46,9 @@ const getWebpackTestConfig = function(projectRoot, sourceDir) {
                 tsconfig: path.resolve(projectRoot, `./${sourceDir}/tsconfig.json`),
                 module: 'commonjs',
                 target: 'es5',
+                mapRoot: false,
+                sourceMap: false,
+                inlineSourceMap: true,
                 useForkChecker: true,
                 removeComments: true
               }

plugins/karma.js

@@ -22,11 +22,17 @@ const init = (config) => {
     }
   };
 
-  // replace the angular-cli preprocessor with webpack+sourcemap
+  // replace the angular-cli preprocessor with webpack
   Object.keys(config.preprocessors)
     .filter((file) => config.preprocessors[file].indexOf('angular-cli') !== -1)
     .map((file) => config.preprocessors[file])
-    .map((arr) => arr.splice(arr.indexOf('angular-cli'), 1, 'webpack', 'sourcemap'));
+    .map((arr) => arr.splice(arr.indexOf('angular-cli'), 1, 'webpack'));
+
+  // replace the angular-cli preprocessor with webpack + sourcemap + coverage
+  Object.keys(config.preprocessors)
+    .filter((file) => config.preprocessors[file].indexOf('angular-cli-coverage') !== -1)
+    .map((file) => config.preprocessors[file])
+    .map((arr) => arr.splice(arr.indexOf('angular-cli-coverage'), 1, 'webpack', 'sourcemap', 'coverage'));
 }
 
 init.$inject = ['config']
@@ -38,5 +44,6 @@ preprocessor.$inject = []
 // also export karma-webpack and karma-sourcemap-loader
 module.exports = Object.assign({
   'framework:angular-cli': ['factory', init],
-  'preprocessor:angular-cli': ['factory', preprocessor]
+  'preprocessor:angular-cli': ['factory', preprocessor],
+  'preprocessor:angular-cli-coverage': ['factory', preprocessor],
 }, require('karma-webpack'), require('karma-sourcemap-loader'));