Setting up Code Coverage Tool

Learn to setup third party code coverage tools in your project.

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 codecov.io using the terminal command:

npm install --save-dev codecov.io

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 https://codecov.io/bash)

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:

karma-coverage-istanbul-reporter

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

karma-jasmine html-reporter

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

After installing the codecov.io, 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 https://codecov.io/bash) the code coverage can now be easily reported.

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

script:
  - ng test --single-run --code-coverage --reporters=coverage-istanbul
  - ng lint

after_success:
  - bash <(curl -s https://codecov.io/bash)
  - bash ./deploy.sh

Update karma.config.js as well:

Module.exports = function(config) {
  config.set({
    plugins: [
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter')
    ],
    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.