11

I am generating code coverage using Karma-coverage. I can host my output coverage folder on http-server and view it locally.

How do I make this report visible on VSTS code coverage tab?

Do I need to re-format my coverage result in VSTS compatible?

I have read about vsts-tasks, but I have no clue how to achieve the same.

Any help is appreciated.

Community
  • 1
  • 1
Akanksha Gaur
  • 2,636
  • 3
  • 26
  • 50
  • Currently VSTS doesn't allow the external style sheets from the code coverage report. It results in stripped out HTML view in code coverage pane. So inorder to make it look ok, you can run a post coverage task to inline your CSS [code coverage html reports are missing styles in Vsts](https://davidsekar.com/aspnetcore/code-coverage-html-reports-are-missing-styles-in-vsts) – David Chelliah Sep 23 '17 at 18:43

2 Answers2

16

With karma.conf.js file generated by angular CLI 1.2+, it is as simple as adding the cobertura report (instead of lcov report) in istanbul reporter :

coverageIstanbulReporter: {
  reports: ['html', 'cobertura'],
  fixWebpackSourcePaths: true
}

So when you will run your tests with the --code-coverage option, a file named coverage-cobertura.xml will be generated in the coverage directory.

Then in your TFS/VSTS build, you can add a Publish Code Coverage task and specify the cobertura XML file.

gentiane
  • 6,715
  • 3
  • 23
  • 34
  • @gentiane, Why is 'html' given in reports? Is it because it will create a html file which will also contain code coverage? If yes, then can we use it instead of cobertura.xml to display code coverage on VSTS build summary – SRP Dec 14 '18 at 15:19
  • Html reporter allow to build HTML files, one for each analyzed file. You can include them in build artifacts to embed and display detailed report in build summary. But keep cobertura.xml file as it provides metrics of test result and coverage to VSTS, allowing to track progress of unit tests through the builds. – gentiane Dec 18 '18 at 14:39
8

VSTS Code coverage supports the outputted code coverage results in Jacoco or Cobertura formats. Karma-Coverage supports Cobertura format. Edit your karma.config.js for

karma-coverage:

coverageReporter: {
  type : 'cobertura',
  ...
}

karma-remap-istanbul:

remapIstanbulReporter: {
  reports: {
    cobertura: './coverage/cobertura.xml',
    ...
  }
}

karma-remap-coverage:

remapCoverageReporter: {
 cobertura: './coverage/cobertura.xml',
 ...
},

Once you configure the output format, you can use Publish Code Coverage task to upload code coverage data to VSTS.

AlignedDev
  • 8,102
  • 9
  • 56
  • 91
Krishh
  • 4,111
  • 5
  • 42
  • 52
  • 1
    I implemented this solution which works, but if you change the `type` of `coverageReporter` to `in-memory` you can use multiple `reports` under `remapCoverageReporter`. Currently I use `html` and `cobertura`. This wasn't possible for me whe using `cobertura` as type. – Arikael Jun 07 '17 at 05:30
  • See also https://learn.microsoft.com/en-us/vsts/build-release/tasks/test/publish-code-coverage-results – Daniel Schilling Dec 11 '17 at 15:24