In this tutorial, you will learn how to display your Javascript project's code coverage on Github - for free - using Coveralls, like so:
In order to get this up and running you'll need a few things:
A Javascript project published to Github that is PUBLIC (otherwise you will have to pay money). I'm assuming you have some unit tests created that work, otherwise why display code coverage!!! In terms of writing code, I tend to use Mocha for writing tests, but you are free to use what you want.
A Ci/Cd pipeline setup with Travis CLI. If you are unsure how to do this, then you can read this article: How To Add Free Continuous Integration Your JavaScript Project With TravisCI. (You can use other Ci/Cd tools Travis is the one I recommend)
A Coveralls account. To set this up, go over to Coveralls. Log-in with your Github account.
With all that set-up you should be able to get code coverage results rendering in your GitHub within about 10 minutes, so let's get cracking.
How To Set-up Coveralls
In your Javascript project, you will need to install two packages, coveralls and istanbul. Istanbul will create a nice report for you to able to view your code coverage results. Coveralls will render that report within GitHub.
After that run this command from a terminal:
With those packages installed within your projects packages.json, you need to create a new script to generate your code coverage report. You can do this, using the following snippet:
Next, if you are using Travis then you should have a travis.yml file. Update this file to call the new script like this:
The final config is to add a afterscript script:
Configuring Coveralls
To send coverage data to Coveralls, log into the Coveralls portal and enable your project, by clicking on the 'Add Repos', finding your project and clicking the on button:
Within the project settings, navigate to the bottom and you should see a 'badge your repo section':
Click on the drop-down that says embed and copy the code from within the markdown section. Add this snippet within your projects readme.md file, commit and push it. This should trigger an automatic build in Travis. On your Github page, you should now see a badge with your coveralls report. You should now see a report being generated in coveralls and your badge displays your code coverage.
Dealing With Issues
First, if you have an issue try running the cover script locally, you can do this with the npm cover command. If that works, you have probably misconfigured something in coveralls. If you think you have set everything up, you can take a look at this project to help you figure it out, HTTP Status Lookup. Happy Coding 🤘
