From 086d74d2b4b6de33d8ab8a63f61ed3aba96e5c42 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Tue, 28 Jul 2020 12:02:27 +0200 Subject: [PATCH] fix(@angular-devkit/build-angular): improve debugging experience With this change we improve the debugging experience with 2 things. 1. Cleaner Karma stack traces in the terminal Before ``` Chrome 84.0.4147.105 (Mac OS 10.15.5) AppComponent should have as title 'foo' FAILED Error: Expected 'foo' to equal 'fox'. at at UserContext. (http://localhost:9876/_karma_webpack_/webpack:/projects/foo/src/app/app.component.spec.ts:22:23) at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:364:1) at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:292:1) Chrome 84.0.4147.105 (Mac OS 10.15.5): Executed 3 of 3 (1 FAILED) (0 secs / 0.214 secs) Chrome 84.0.4147.105 (Mac OS 10.15.5) AppComponent should have as title 'foo' FAILED Error: Expected 'foo' to equal 'fox'. at at UserContext. (http://localhost:9876/_karma_webpack_/webpack:/projects/foo/src/app/app.component.spec.ts:22:23) at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:364:1) at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zChrome 84.0.4147.105 (Mac OS 10.15.5): Executed 3 of 3 (1 FAILED) (0.225 secs / 0.214 secs) ``` After ``` Chrome 84.0.4147.105 (Mac OS 10.15.5) AppComponent should have as title 'foo' FAILED Error: Expected 'foo' to equal 'fox'. at at UserContext. (projects/foo/src/app/app.component.spec.ts:22:23) at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1) at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/zone-testing.js:292:1) Chrome 84.0.4147.105 (Mac OS 10.15.5): Executed 2 of 3 (1 FAILED) (0 secs / 0.225 secs) Chrome 84.0.4147.105 (Mac OS 10.15.5) AppComponent should have as title 'foo' FAILED Error: Expected 'foo' to equal 'fox'. at at UserContext. (projects/foo/src/app/app.component.spec.ts:22:23) at ZoneDelegate.invoke (node_modules/zone.js/dist/zone-evergreen.js:364:1) Chrome 84.0.4147.105 (Mac OS 10.15.5): Executed 3 of 3 (1 FAILED) (0.281 secs / 0.237 secs) ``` 2. Reduce VS Code configuration Before ``` { "name": "ng test", "type": "chrome", "request": "launch", "url": "http://localhost:9876/debug.html", "webRoot": "${workspaceFolder}", "sourceMaps": true, "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*", "/./*": "${webRoot}/*", "/src/*": "${webRoot}/*", "/*": "*", "/./~/*": "${webRoot}/node_modules/*" } }, ``` After ``` { "name": "ng test", "type": "chrome", "request": "launch", "url": "http://localhost:9876/debug.html", "webRoot": "${workspaceFolder}", }, ``` --- .../models/webpack-configs/utils.ts | 2 +- .../src/angular-cli-files/plugins/karma.ts | 25 ++++++++----------- .../e2e/tests/misc/karma-error-paths.ts | 24 ++++++++++++++++++ 3 files changed, 36 insertions(+), 15 deletions(-) create mode 100644 tests/legacy-cli/e2e/tests/misc/karma-error-paths.ts diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts index 66865e8baf..42bddbd376 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts +++ b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts @@ -91,7 +91,7 @@ export function getSourceMapDevTool( // inline sourcemaps as otherwise paths to sourcemaps will be broken in browser // `webpack:///` is needed for Visual Studio breakpoints to work properly as currently // there is no way to set the 'webRoot' - sourceRoot: inlineSourceMap ? '' : 'webpack:///', + sourceRoot: 'webpack:///', moduleFilenameTemplate: '[resource-path]', append: hiddenSourceMap ? false : undefined, exclude: vendorSourceMap ? undefined : /vendor.*\.js/, diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts index 86c7ffac7e..4fa22ac44f 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts +++ b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts @@ -70,15 +70,9 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => { successCb = config.buildWebpack.successCb; failureCb = config.buildWebpack.failureCb; - // When using code-coverage, auto-add coverage-istanbul. - config.reporters = config.reporters || []; - if (options.codeCoverage && config.reporters.indexOf('coverage-istanbul') === -1) { - config.reporters.push('coverage-istanbul'); - } - // Add a reporter that fixes sourcemap urls. if (normalizeSourceMaps(options.sourceMap).scripts) { - config.reporters.push('@angular-devkit/build-angular--sourcemap-reporter'); + config.reporters.unshift('@angular-devkit/build-angular--sourcemap-reporter'); // 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 @@ -92,8 +86,14 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => { ], true); } - config.reporters.push('@angular-devkit/build-angular--event-reporter'); + config.reporters.unshift('@angular-devkit/build-angular--event-reporter'); + // When using code-coverage, auto-add coverage-istanbul. + config.reporters = config.reporters || []; + if (options.codeCoverage && config.reporters.indexOf('coverage-istanbul') === -1) { + config.reporters.unshift('coverage-istanbul'); + } + // Add webpack config. const webpackConfig = config.buildWebpack.webpackConfig; const webpackMiddlewareConfig = { @@ -284,16 +284,13 @@ eventReporter.$inject = ['baseReporterDecorator', 'config']; // Strip the server address and webpack scheme (webpack://) from error log. const sourceMapReporter: any = function (this: any, baseReporterDecorator: any, config: any) { baseReporterDecorator(this); - muteDuplicateReporterLogging(this, config); - const urlRegexp = /http:\/\/localhost:\d+\/_karma_webpack_\/webpack:\//gi; + 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, ''); - }); + if (!result.success) { + result.log = result.log.map((l: string) => l.replace(urlRegexp, '')); } }; diff --git a/tests/legacy-cli/e2e/tests/misc/karma-error-paths.ts b/tests/legacy-cli/e2e/tests/misc/karma-error-paths.ts new file mode 100644 index 0000000000..d8916ab6ea --- /dev/null +++ b/tests/legacy-cli/e2e/tests/misc/karma-error-paths.ts @@ -0,0 +1,24 @@ +import { writeMultipleFiles } from '../../utils/fs'; +import { ng } from '../../utils/process'; +import { expectToFail } from '../../utils/utils'; + +export default async function () { + await writeMultipleFiles({ + 'src/app/app.component.spec.ts': ` + describe('AppComponent', () => { + it('failing test', () => { + expect('1').toEqual('2'); + }); + }); + `, + }); + + const { message } = await expectToFail(() => ng('test', '--no-watch')); + if (message.includes('_karma_webpack_')) { + throw new Error(`Didn't expect logs to server address and webpack scheme.\n${message}`); + } + + if (!message.includes('(src/app/app.component.spec.ts:4:25)')) { + throw new Error(`Expected logs to contain relative path to (src/app/app.component.spec.ts:4:25)\n${message}`); + } +}