Cannot debug tests in Karma for projects generated with version CLI 6.1 or 6.2 - no source maps?

[AmadejBukorovic]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [x] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node: v8.11.4
npm: 5.5.1
ng: 6.1.5 and 6.2.2
Chrome 69.0.3497.92
Windows 10 Version 1803 (OS Build 17134.285)

Repro steps

ng new TestKarmaDebugger
cd TestKarmaDebugger
ng test

Desired functionality

I'd like to be able to debug Jasmine tests inside the Karma runner (via the browser) - in previous versions of Angular CLI, I could click on the DEBUG button in the upper right corner of the initial Karma page, which navigated to Karma's debug.html, that included the source maps from the webpack source, enabling me to debug tests inside the browser.

On the tested 6.x versions, this isn't the case. It seems there are no source maps included when in debug mode? I've tested this with the freshly generated projects and didn't include any other NPM modules. So I'm talking about the default state of a project generated with Angular CLI.

Mention any other details that might be useful

It seems that adding the sourceMap property with the value of true, to the "test" architect node in angular.json, resolves this issue to some extent.

Example snippet from angular.json:

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "sourceMap": true
          }
        },

From my observations, it solves the behavior for projects generated with Angular CLI 6.1.x, as I can find the source files under the webpack source map in Chrome, while the situation on a project generated with Angular CLI 6.2.2 is different. When the debug page of Karma is loaded, the source files are under the 'localhost:9876' source map and there is no webpack source map included?

I'm also unable to predict if such a configuration change has any repercussions on running tests when not debugging or when generation code coverage reports, so I'd like some feedback if this is the recommended way of solving the issue?

[alan-agius4]

I am afraid that I am not understanding the problem here. I have tried this locally and the breakpoints are working as expected both with and without sourcemaps, and debugging is happening as expected.

By default sourcemaps are disabled however debugging doesn't need sourcemaps to work. If you pass --source-maps as a command argument, the soucemaps are created and available in the browser and breakpoints are mapped correctly.

[AmadejBukorovic]

Well, yes - technically speaking debugging works, but the source is in JS? Previously, you'd get Typescript:

[alan-agius4]

So basically what you are asking is to enable sourcemaps by default when running tests?

[AmadejBukorovic]

Coming from version 1.7.x and below, I figured this was a bug, since in previous versions I'd get Typescript by default. I honestly don't understand what good it is to have compiled JS as the debug source, but that's just my opinion (apart from the fact that one could argue most of the time we're just running the tests and it's probably faster not to generate source maps).

But like I've said, if this change was made by design, then I'm simply asking for confirmation that enabling source maps via angular.json for the test configuration doesn't have any negative effects on other uses cases, as I figure there must be a reason for the change?