Angular-cli: i am looking for documentation about how to open/view/export the code coverage report,is there any?

Created on 9 Mar 2017  路  12Comments  路  Source: angular/angular-cli

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

I would like to find some doc about how to view the code coverage report generated by angular-cli, i run "coverage": "lite-server -c bs-config.json"
,but is that the preferred way to do it? How can we export it to travis and watch it on some coverage reporting site(i read about coveralls, but is that what you recommend and how to do this)? Is there documentation? Thanks


Thanks! We'll be in touch soon.

help wanted RFC / discussion / question

Most helpful comment

Heya @stefanaerts, we don't have any CLI specific documentation on how to use the generated code coverage. Instead, we mostly make sure the karma reporter can work.

How I do it is run ng test --code-coverage, and directly double click ./coverage/index.html. That is enough to see the html report.

The lvoc.info file is a common format that a lot of tools can read and generate reports from. I can't say I have a lot of experience with it though.

The original lcov tool is http://ltp.sourceforge.net/coverage/lcov.php, but you can also find a lot of lcov parsers in the NPM ecosystem: https://www.npmjs.com/browse/keyword/lcov

I tried a couple and the easiest one I found was https://www.npmjs.com/package/lcov-summary:

kamik@T460p MINGW64 /D/sandbox/master-project (master)
$ $(npm bin)/lcov-summary ./coverage/lcov.info

Code Coverage Results:

100.00% ( 3/ 3) D:\sandbox\master-project\src\polyfills.ts
100.00% (13/13) D:\sandbox\master-project\src\test.ts
100.00% ( 3/ 3) D:\sandbox\master-project\src\app\app.component.ts

Total Coverage: 100.00%

Also flagging this issue for community help to see if someone more knowledgeable can give better insight.

All 12 comments

so in the mean time i see you use karma-coverage-istanbul-reporter,
1) what does this mean coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true

2) i see there is a file lcov.info generated in coverage folder, is there documentation on how to use this file(s) in the coverage folder to export in travis to a public website like Coveralls for example?

3) i noticed i had to add 'kjhtml' at the end of the first array to have the test report work together with the codecoverage report. ng test -cc wil not show the test results without this extra param.

reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul', 'kjhtml']
: ['progress', 'kjhtml'],

Heya @stefanaerts, we don't have any CLI specific documentation on how to use the generated code coverage. Instead, we mostly make sure the karma reporter can work.

How I do it is run ng test --code-coverage, and directly double click ./coverage/index.html. That is enough to see the html report.

The lvoc.info file is a common format that a lot of tools can read and generate reports from. I can't say I have a lot of experience with it though.

The original lcov tool is http://ltp.sourceforge.net/coverage/lcov.php, but you can also find a lot of lcov parsers in the NPM ecosystem: https://www.npmjs.com/browse/keyword/lcov

I tried a couple and the easiest one I found was https://www.npmjs.com/package/lcov-summary:

kamik@T460p MINGW64 /D/sandbox/master-project (master)
$ $(npm bin)/lcov-summary ./coverage/lcov.info

Code Coverage Results:

100.00% ( 3/ 3) D:\sandbox\master-project\src\polyfills.ts
100.00% (13/13) D:\sandbox\master-project\src\test.ts
100.00% ( 3/ 3) D:\sandbox\master-project\src\app\app.component.ts

Total Coverage: 100.00%

Also flagging this issue for community help to see if someone more knowledgeable can give better insight.

when i enabled my public repo on coveralls and run
cat ./coverage/lcov.info | coveralls
i get this error -> Couldn't find a repository matching this job

Can't help you there, I don't know anything about coveralls.

i just want to have it in travis running and published somewhere online,
for me its also new. I read about coveralls.

If I get this right, you can get a coveralls badge in github via their integration: https://github.com/integrations/coveralls

You'll have to read how to configure it though.

i did,but not working.
i have enabled my github project and a badge is added to my readme.md from coveralls.
but i am trying to run it local on my laptop running node and npm.
coveralls -f ./coverage/lcov.info keeps hanging
cat ./coverage/lcov.info | coveralls gives the error message
I didn't run it on travis yet.

I'm sorry @stefanaerts, but I can't help you with that tool more than this. I don't have time to go learn how to use it right now.

i understand @filipesilva ,thanks for your time and help.
I will figure it out.

In the mean time i run it on travis and it works!
So the most important thing is that it works in the whole process with travis.
I run
after_success:

  • npm run coveralls
    Then i have results on coveralls and a badge in my readme.md in github
    image
    image

if i want to a codecoverage report view local in a browser i can just open it local with
lite-server -c bs-config.json
"server": {
"baseDir": "./coverage"
}

image

or use the command line tool like you mentioned:
$(npm bin)/lcov-summary ./coverage/lcov.info
image

Hey I'm really glad you got it working, and thanks for coming back to document what you did! Now other people that have the same problem can follow your steps.

Cheers!

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rajjejosefsson picture rajjejosefsson  路  3Comments

hartjo picture hartjo  路  3Comments

donaldallen picture donaldallen  路  3Comments

sysmat picture sysmat  路  3Comments

delasteve picture delasteve  路  3Comments