Publish your Angular application coverage

If you want to show the code coverage of your Angular project, this tutorial is the way to go.

Image for post
Image for post

Prerequisites

In this tutorial we’ll be using Travis-CI & codecov. So create the corespondent accounts & add your project.

Setup

For this example, I’ll start by creating a new angular application. Following that, let’s add codecov as a dev-dependency:

$ ng new angular-app-codecov
$ cd angular-app-codecov
$ npm i -D codecov

Next, let’s setup Karma. Remember we need to run the test coverage on Travis-CI. So, we need to run Chrome in Headless Mode. Let’s edit Karma.conf.js which is located in the root of the project. Add these new lines to your config:

Create a file .travis.yml which contains the CI script to run in the build.

Add the following script:

language: node_js
node_js:
- "12"
addons:
chrome: stable
env:
global:
CODECOV_TOKEN=$CODECOV_TOKEN
before_script:
- npm install
jobs:
include:
- stage: Test coverage
script:
- ng test --browsers=ChromeHeadlessNoSandbox --codeCoverage=true --watch=false
after_script:
- if [[ "$TRAVIS_TEST_RESULT" == 0 ]]; then ./node_modules/.bin/codecov; fi

Connect to your codecov account, search for your repository & add it. You’ll see a token ( see image below), that’s the token Travis will use to upload your code coverage report to codecov.

Image for post
Image for post

Next, let’s add that token to Travis-CI. So, connect to your Travis-CI account, add the repository & go to settings. Let’s add an environment variable CODECOV_TOKEN to the build & let’s give it the value of the codecov token.

Image for post
Image for post

And that’s it, all that’s left is to trigger the build manually or add a commit to see the coverage report of your project.

Badge

The last thing you probably want to to is to add the badge on your project:

On codecov, go to your project settings. Under ‘badge’ copy the markdown snippet & paste it in your README.md

And That’s it. If you face any issue leave a comment or open an issue in the Github repository.

Web/Mobile Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store