From 19f04af0777391cc72d096a0e315fe87bab161c6 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Thu, 13 Jul 2017 16:54:48 +0100 Subject: [PATCH] fix(@angular/cli): fix ng test report sourcemaps #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. (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. (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. 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. 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 #6583 --- package.json | 1 + packages/@angular/cli/package.json | 1 + packages/@angular/cli/plugins/karma.ts | 42 +++++++++++++++++++++++++- yarn.lock | 8 ++++- 4 files changed, 50 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 8f6505aab533..733a387eb825 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,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.2", "license-webpack-plugin": "^0.4.3", diff --git a/packages/@angular/cli/package.json b/packages/@angular/cli/package.json index 1dd20bc060dd..207a86032331 100644 --- a/packages/@angular/cli/package.json +++ b/packages/@angular/cli/package.json @@ -52,6 +52,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.2", "license-webpack-plugin": "^0.4.2", diff --git a/packages/@angular/cli/plugins/karma.ts b/packages/@angular/cli/plugins/karma.ts index 8025af5f23f8..2183bd0f257e 100644 --- a/packages/@angular/cli/plugins/karma.ts +++ b/packages/@angular/cli/plugins/karma.ts @@ -8,6 +8,14 @@ import { Pattern } from './glob-copy-webpack-plugin'; import { WebpackTestConfig, WebpackTestOptions } from '../models/webpack-test-config'; import { KarmaWebpackThrowError } from './karma-webpack-throw-error'; +/** + * Enumerate needed (but not require/imported) dependencies from this file + * to let the dependency validator know they are used. + * + * require('karma-source-map-support') + */ + + const getAppFromConfig = require('../utilities/app-utils').getAppFromConfig; let blocked: any[] = []; @@ -54,6 +62,22 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => { progress: true, }, config.angularCli); + if (testConfig.sourcemaps) { + // Add a reporter that fixes sourcemap urls. + 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 +251,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] }); diff --git a/yarn.lock b/yarn.lock index ca5076c0bea9..14c8d76b689e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2866,6 +2866,12 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.3.6" +karma-source-map-support@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/karma-source-map-support/-/karma-source-map-support-1.2.0.tgz#1bf81e7bb4b089627ab352ec4179e117c406a540" + dependencies: + source-map-support "^0.4.1" + kind-of@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5" @@ -4653,7 +4659,7 @@ source-map-loader@^0.2.0: loader-utils "~0.2.2" source-map "~0.1.33" -source-map-support@^0.4.0, source-map-support@^0.4.2: +source-map-support@^0.4.0, source-map-support@^0.4.1, source-map-support@^0.4.2: version "0.4.15" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1" dependencies: