Generate Code Coverage Badge with Gitlab CI and an Angular Project
By Caleb Ukle at
This post originally appeared on Medium on July 23, 2018.
Update Karma Config
Angular uses Istanbul and Karma for built-in testing. So the first thing is to update the karma.conf.js file, specifically the code block titled coverageIstanbulReporter. In here, you’ll want to add text-summary to the reports array. More options for Karma can be found here.
Now when you run
ng test --watch=false --code-coverage you will get a text
summary in the console about your code coverage now. Hurrah!
Alright, so now your project is configured to display the code coverage in the console. This is an important step because Gitlab uses Ruby Regular Expressions to capture the output of the pipeline console. No console output means no code coverage badge.
Update Gitlab Pipeline
Next, head over to Gitlab.com and head to your project > Settings > CI/CD > General pipelines. Scroll down until you see Testing coverage parsing. In here, you’ll want to include this regular expression. (Thanks to this Stack Overflow post for the Regular Expression).
Alright! So now that will give you the percentage of code coverage for Statements. If you’d like a different part of the code coverage, then switch out Statements for a different code coverage word (Branches, Functions, or Lines).
Grab Badge Markup
We are on the home stretch now. Scroll down a little more past the General pipelines section we’ve been working in. You’ll come across to two badges, Pipeline status, and Coverage report. Before you just copy over the markup, make sure you use the drop-down in the top right to select the branch you’d like the statuses to come from. Once you have the correct branch just copy and paste it to wherever your heart desires. i.e. README.md. That’s it! Next time you run your pipeline Gitlab will capture the output and update the badge with the code coverage percentage!
Gitlab CI Config Example
As promised, I’ll talk a little about setting up a Gitlab pipeline for testing Angular applications. Right up front here is my .gitlab-ci.yml
The trick for me was figuring out how to run the tests in a docker container.
Because if you try running in just a node:latest container, it won’t work since
Karma is looking for Chrome. Luckily someone has already done the hard work in
solving that problem. A huge shout out to
this docker container and its
maintainer. So with that piece of the puzzle you’re able to run
ng test --watch=false and
ng e2e without issues.
Use Alpine Docker Image
Override global before_scripts
Move the coverage/ to public/ directory
Create a build artifact of the public/ directory
The reason for the Alpine image is it’s so small; therefore, fewer pipeline minutes are spent downloading larger images. All we need to do is move one directory to another. The coverage/ directory is a build artifact from the testing job. Since there’s a dependency in the pages job, the pages job will wait until testing is finished before starting. Finally, creating a build artifact of the public/ directory tells Gitlab to use this as a Gitlab Page, auto-magically.
That’s all there is to testing Angular applications in a Gitlab pipeline. More info about Gitlab CI/CD can be found here.
- 2019–04–05: Updated grammar and spelling
- 2019-09-1: Moved to personal blog site