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:

1. A Javascript project published to Github that is open.  I'm assuming you have some unit tests created that work.  I tend to use Mocha for writing tests, but you are free to use what you want.

2. A Ci/Cd pipeline set-up 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)

3. 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 your project up and running 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 add it to Git.


With those packages install within your 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 to call the new script like so:

Send coverage data to Coveralls

Next, log-into Coveralls and enable your project, by clicking on the 'Add Repos', finding your project and clicking the on button:

Next, within the project setting, 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 within the markdown section.  Add this snippet within your projects readme file and commit it.  In your project, make a change, commit and push it, to trigger a 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, e.g. npm cover.  If that works then you have probably misconfigured something.

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.