Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-21 22:34:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(@angular-devkit/build-angular): improve debugging experience

Browse Source 
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 <Jasmine>
            at UserContext.<anonymous> (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 <Jasmine>
            at UserContext.<anonymous> (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 <Jasmine>
            at UserContext.<anonymous> (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 <Jasmine>
            at UserContext.<anonymous> (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}",
},
```
This commit is contained in:
Alan Agius 2020-07-28 12:02:27 +02:00
parent ee7d8f64c8
commit 086d74d2b4
3 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts
View File

@ -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/,

25
packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts
View File

@ -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, ''));
}
};

24
tests/legacy-cli/e2e/tests/misc/karma-error-paths.ts Normal file
View File

@ -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}`);
}
}