fix(@angular/cli): fix ng test report sourcemaps

filipesilva · filipesilva · commit 2d20683768f4 · 2017-07-13T16:54:48.000+01:00
angular#6160 broke `ng test` sourcemaps in Chrome, this PR fixes it. Before: ``` kamik@T460p MINGW64 D:/sandbox/master-project (master) $ ng test --sr 10% building modules 1/1 modules 0 active13 07 2017 16:38:43.942:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/ 13 07 2017 16:38:43.945:INFO [launcher]: Launching browser Chrome with unlimited concurrency 13 07 2017 16:38:43.953:INFO [launcher]: Starting browser Chrome 13 07 2017 16:38:54.099:INFO [Chrome 59.0. 3071 (Windows 10 0.0.0)]: Connected on socket Xdep72ofT_Q7MWBHAAAA with id 76010950 Chrome 59.0.3071 (Windows 10 0.0.0) AppComponent should have as title 'app' FAILED Expected 'app' to equal 'forced bug'. at Object.<anonymous> (http://localhost:9876/_karma_webpack_/main.bundle.js:89:27) at ZoneDelegate.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9 876/_karma_webpack_/polyfills.bundle.js:2704:26) at AsyncTestZoneSpec.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/async-test.js.AsyncTestZoneSpec.onInvoke ( http://localhost:9876/_karma_webpack_/vendor.bundle.js:55972:39) at ProxyZoneSpec.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localh ost:9876/_karma_webpack_/vendor.bundle.js:56735:39) Chrome 59.0.3071 (Windows 10 0.0.0): Executed 2 of 3 (1 FAILED) (0 secs / 0.162 secs) Chrome 59.0.3071 (Windows 10 0.0.0) AppComponent should have as title 'app' FAILED Expected 'app' to equal 'forced bug'. at Object.<anonymous> (http://localhost:9876/_karma_webpack_/main.bundle.js:89:27) at ZoneDelegate.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9 876/_karma_webpack_/polyfills.bundle.js:2704:26) at AsyncTestZoneSpec.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/async-test.js.AsyncTestZoneSpec.onInvoke ( http://localhost:9876/_karma_webpack_/vendor.bundle.js:55972:39) at ProxyZoneSpec.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localh Chrome 59.0.3071 (Windows 10 0.0.0): Executed 3 of 3 (1 FAILED) (0.225 secs / 0.204 secs) ``` After: ``` kamik@T460p MINGW64 D:/sandbox/master-project (master) $ ng test --sr 10% building modules 1/1 modules 0 active13 07 2017 16:37:59.478:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/ 13 07 2017 16:37:59.481:INFO [launcher]: Launching browser Chrome with unlimited concurrency 13 07 2017 16:37:59.487:INFO [launcher]: Starting browser Chrome 13 07 2017 16:38:08.559:INFO [Chrome 59.0. 3071 (Windows 10 0.0.0)]: Connected on socket ixHN4NzVFTEW1iYiAAAA with id 92819713 Chrome 59.0.3071 (Windows 10 0.0.0) AppComponent should have as title 'app' FAILED Expected 'app' to equal 'forced bug'. at Object.<anonymous> D:/sandbox/master-project/src/app/app.component.spec.ts:23:23) at ZoneDelegate.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke D:/sandbox/master-p roject/node_modules/zone.js/dist/zone.js:391:1) at AsyncTestZoneSpec.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/async-test.js.AsyncTestZoneSpec.onInvoke D :/sandbox/master-project/node_modules/zone.js/dist/async-test.js:49:1) at ProxyZoneSpec.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke D:/sandbox/mas ter-project/node_modules/zone.js/dist/proxy.js:76:1) Chrome 59.0.3071 (Windows 10 0.0.0): Executed 2 of 3 (1 FAILED) (0 secs / 0.367 secs) Chrome 59.0.3071 (Windows 10 0.0.0) AppComponent should have as title 'app' FAILED Expected 'app' to equal 'forced bug'. at Object.<anonymous> D:/sandbox/master-project/src/app/app.component.spec.ts:23:23) at ZoneDelegate.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke D:/sandbox/master-p roject/node_modules/zone.js/dist/zone.js:391:1) at AsyncTestZoneSpec.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/async-test.js.AsyncTestZoneSpec.onInvoke D :/sandbox/master-project/node_modules/zone.js/dist/async-test.js:49:1) at ProxyZoneSpec.webpackJsonp.../../../../../../../sandbox/master-project/node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke D:/sandbox/mas Chrome 59.0.3071 (Windows 10 0.0.0): Executed 3 of 3 (1 FAILED) (0.421 secs / 0.4 secs) ``` Fix angular#6583
diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     "isbinaryfile": "^3.0.0",
     "istanbul-instrumenter-loader": "^2.0.0",
     "json-loader": "^0.5.4",
+    "karma-source-map-support": "^1.2.0",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "license-webpack-plugin": "^0.4.3",
diff --git a/packages/@angular/cli/package.json b/packages/@angular/cli/package.json
@@ -53,6 +53,7 @@
     "inquirer": "^3.0.0",
     "isbinaryfile": "^3.0.0",
     "json-loader": "^0.5.4",
+    "karma-source-map-support": "^1.2.0",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "license-webpack-plugin": "^0.4.2",
diff --git a/packages/@angular/cli/plugins/karma.ts b/packages/@angular/cli/plugins/karma.ts
@@ -54,6 +54,20 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
     progress: true,
   }, config.angularCli);
 
+  if (testConfig.sourcemaps) {
+    config.reporters.unshift('@angular/cli');
+    // Code taken from https://github.com/tschaub/karma-source-map-support.
+    // We can't use it directly because we need to add it conditionally in this file, and karma
+    // frameworks cannot be added dynamically.
+    const smsPath = path.dirname(require.resolve('source-map-support'));
+    const ksmsPath = path.dirname(require.resolve('karma-source-map-support'));
+
+    addKarmaFiles(config.files, [
+      { pattern: path.join(smsPath, 'browser-source-map-support.js'), watched: false },
+      { pattern: path.join(ksmsPath, 'client.js'), watched: false }
+    ], true);
+  }
+
   // Add assets. This logic is mimics the one present in GlobCopyWebpackPlugin.
   if (appConfig.assets) {
     config.proxies = config.proxies || {};
@@ -227,9 +241,25 @@ function requestBlocker() {
   };
 }
 
-// Also export karma-webpack and karma-sourcemap-loader.
+// Strip the server address and webpack scheme (webpack://) from error log.
+const initSourcemapReporter: any = function (baseReporterDecorator: any) {
+  baseReporterDecorator(this);
+  const urlRegexp = /\(http:\/\/localhost:\d+\/_karma_webpack_\/webpack:\//gi;
+
+  this.onSpecComplete = function (_browser: any, result: any) {
+    if (!result.success && result.log.length > 0) {
+      result.log.forEach((log: string, idx: number) => {
+        result.log[idx] = log.replace(urlRegexp, '');
+      });
+    }
+  };
+};
+
+initSourcemapReporter.$inject = ['baseReporterDecorator'];
+
 module.exports = Object.assign({
   'framework:@angular/cli': ['factory', init],
   'preprocessor:@angular/cli': ['factory', preprocessor],
+  'reporter:@angular/cli': ['type', initSourcemapReporter],
   'middleware:angularCliBlocker': ['factory', requestBlocker]
 });
