Code Coverage Badge with Angular(Karma/Istanbul) on Gitlab Pipelines
This article has moved to my personal site which you can find here.
Thanks for checking it out!
As the title says, this is how to enable the code coverage badge with Angular on Gitlab CI. Also, I’ll show setting up a Gitlab pipeline for testing an Angular application at the end.
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.
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).
Statements.*?(\d+(?:\.\d+)?)%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).
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!
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.
The eagle-eyed reader will notice a Pages build step. I am using Gitlab Pages to host the HTML output of my code coverage. It’s very easy and simple to do. You can follow along with the build steps.
- Use Alpine Docker Image
- Override global before_scripts
- Move the
coverage/topublic/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, automagically.
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
