[ng test] When code-coverage is on, sourcemaps for non spec files show JS content instead of TS

[Meligy]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.2.3
node: 8.1.4
os: darwin x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.3
@angular/compiler-cli: 4.3.1
@angular/language-service: 4.3.1

(Also tested on Windows 8.1 with Node 6)

Repro steps.

ng new test-app
cd test-app

Go to app.component.ts, and a constructor that looks like:

  constructor() {
    debugger;
  }

Then run ng test --sourcemap

Switch to Chrome test browser, click "Debug", open the devtools, refresh.

Observe how the breakpoint shows right (you see the class that is AppComponent)

Now, stop the test runner, and re-run the command adding --code-coverage to it.
Like ng test --sourcemap --code-coverage

Again, switch to Chrome test browser, click "Debug", open the devtools, refresh.

Observe how the breakpoint shows differently this time:

(shown in the next section)

The log given by the failure.

In the test browser devtools, we see compiled JavaScript as the content of the TypeScript file, like:

Desired functionality.

I'd like to be able to see the correct content of the files in sourcemaps, that is the TypeScript code, not the JavaScript code. Similar to the first screenshot when not using --code-coverage. I'd like --code-coverage to not cause this to break.

Mention any other details that might be useful.

• Note how the filename at the top of the source file tab and the sourcemaps comment at the end of the file content point to the TypeScript file not the JavaScript file!!
  There are 2 sourcemaps comments in the file though, and only happening in the file where the result is wrong.

• This problem does NOT happen in the spec files!!
  I confirmed by adding : AppComponent to one of the tests. It's preserved (plus lambdas etc)
  

• This was working in CLI 1.0.6 (the one that a project I was helping upgrade happened to be upgrading from, signaling the issue, not sure about other versions)

[Meligy]

There's one solution I thought might work, and it didn't. Adding it here for the record anyway.

I went to the src/test.ts file, and changed the line

const context = require.context('./', true, /\.spec\.ts$/);

to be this line, which is primarily needed for proper code coverage results:

const context = require.context('./app', true, /\.ts$/);

I was hoping that would somehow fix the issue as a side effect, but it still didn't change the behavior explained in the main issue.

I thought maybe it was broken because the application file (in the report above it's app.component.ts) was not directly covered by the test.ts line (although it actually was, via import from app.component.spec.ts). But changing the line had no effect on the result.

It might be something to do with how the ng test handles the spec and app tsconfig files maybe. I really don't know.

[Meligy]

Retested with CLI v1.3.0-rc.3.

Same results.

ng version output for last test:

@angular/cli: 1.3.0-rc.3
node: 8.1.4
os: darwin x64
@angular/animations: 4.3.2
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/core: 4.3.2
@angular/forms: 4.3.2
@angular/http: 4.3.2
@angular/platform-browser: 4.3.2
@angular/platform-browser-dynamic: 4.3.2
@angular/router: 4.3.2
@angular/cli: 1.3.0-rc.3
@angular/compiler-cli: 4.3.2
@angular/language-service: 4.3.2

[filipesilva]

Thanks for the report @Meligy, this is unintended and will investigate.

[filipesilva]

I looked into this a bit today but didn't get very far. As far as I can tell, we're passing in the sourcemaps correctly into istanbul-instrumenter-loader, but the sourcemaps that get back from it refer to transpiled code. Need to look into it further.