This blog was originally posted on FOSSASIA Blog.

In this blog post, I’ll be discussing how I setup code coverage tool called Codecov in Susper.

What is Codecov ?

Codecov is a famous code coverage tool. It can be easily integrated with the services like Travis CI. Codecov also provides more features with the services like Docker.

How did I setup Codecov in the project repository hosted on Github ?

The simplest way to setup Codecov in a project repository is by installing using the terminal command:

npm install --save-dev

Susper works on tech-stack Angular. Angular comes with Karma and Jasmine for testing purpose. With Angular, implementation can be a little bit tricky. So, using alone:

bash <(curl -s

won’t generate code coverage because of the presence of Karma and Jasmine.

It will require additional two packages:

  • istanbul as coverage reporter and
  • jasmine as html reporter.

I have discussed them below.

Install these two packages:


npm install karma-coverage-istanbul-reporter --save-dev

karma-jasmine html-reporter

npm install karma-jasmine-html-reporter --save-dev

After installing the, the package.json will be updated as follows:

"devDependencies": {
  "codecov": "^2.2.0",
  "karma-coverage-istanbul-reporter": "^1.3.0",
  "karma-jasmine-html-reporter": "^0.2.2",

Add a script for testing:

"scripts": {
   "test": "ng test --single-run --code-coverage --reporters=coverage-istanbul"

Now generally, the codecov works better with Travis CI. With the one line bash <(curl -s the code coverage can now be easily reported.

Here is a particular example of travis.yml from the project repository of Susper:

 - ng test --single-run --code-coverage --reporters=coverage-istanbul
 - ng lint
 - bash <(curl -s
 - bash ./

Update karma.config.js as well:

Module.exports = function(config) {
    plugins: [
    preprocessors: {
      'src/app/**/*.js': ['coverage']
    client: {
      clearContext: false
    coverageIstanbulReporter: {
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    reporters: config.angularCli && config.angularCli.codeCoverage
      ? ['progress', 'coverage-istanbul'],
      : ['progress', 'kjhtml'],

In this way, we can setup any code coverage tool like Codecov in an Angular project follow up the approach shared as above.