Karma produces lcov report for angular project with invalid line numbers

Question

I have an Angular project with some tests. My build is written in Gulp. I run the tests using Karma and produce an lcov report.

I then use the gulp-sonar plugin to run Sonar. My sonar config looks like this:

"sonar": {
  "host": {
    "url": "http://mysonar.example.com.au"
  },
  "projectKey": "sonar:advertising-test",
  "projectName": "advertising-test",
  "projectVersion": "1.0.0",
  "sources": "app/js",
  "javascript": {
    "lcov": {
      "reportPath": "reports/coverage/lcov.info"
    }
  },
  "exec": {
    "maxBuffer": "1048576"
  }
}

Sonar runs and analyses the code but it fails when trying to read the lcov report with the following:

[09:38:58] 09:38:58.322 WARN  - Problem during processing LCOV report: can't save DA data for line 0.
java.lang.IllegalArgumentException: Line with number 0 doesn't belong to file app/js/main.js
...    
[09:38:58] 09:38:58.324 WARN  - Problem during processing LCOV report: can't save DA data for line 65.
java.lang.IllegalArgumentException: Line with number 65 doesn't belong to file app/js/constants.js

and so on for pretty much every js file i have.

If i produce an html coverage report then the report looks fine so it seems the report is being correctly generated.

I wonder if this is caused by the karma-browserify step that I use.

Can someone help with my lcov report errors?

Has any one managed to get lcov coverage reports working with karma and browserify?

Answer 1

I think I found the solution. I haven't tested it yet, but reading the doc suggests, that it's the correct approach.

First, problem is not in sonar, but in karma. Your coverage report is constructed for processed typescript files, hence the line issues.

Check out the doc on karma-coverage-istanbul-reporter npm package description (bold is from me):

This is a reporter only and does not perform the actual instrumentation of your code. Babel users should use the istanbul babel plugin to instrument your code and webpack + typescript users should use the istanbul-instrumenter-loader and then use this karma reporter to do the actual reporting. See the test config for an e2e example of how to combine them.

Angular is more or less webpack + typescript.

Same solution, to use istanbul instrumenter loader, is proposed here: https://www.linkedin.com/pulse/typescript-20-how-get-correct-test-coverage-line-numbers-willem-liu

I suggest we should reconfigure our karma configs to produce proper lcov.info files and see what it comes out.