Code Coverage Analysis Using Codecov and Codefresh
Tags: testing, reports, container, coverage
Published: 2020-12-22 16:08:26

<a href="https://coveralls.io/">Coveralls</a> is a web service that allows users to track the code coverage of their application over time in order to optimize the effectiveness of their unit tests.

Once you are managing your application and associated resources within a CI/CD platform like Codefresh, you want to receive insights on the test coverage automatically with every pipeline build.

This post provides an overview of how this can be achieved with Coveralls and Codefresh. To make the best out of this post, make sure you have both a <a href="https://docs.coveralls.io/">Coveralls</a> and a <a href="https://codefresh.io/docs/docs/getting-started/create-a-codefresh-account/">Codefresh account</a> set-up.

<a href="https://codefresh.io/wp-content/uploads/2020/12/image1.png"><img class="wp-image-18425 size-medium" src="https://codefresh.io/wp-content/uploads/2020/12/image1-294x300.png" alt="coveralls interface" width="294" height="300" /></a>
<h3><b>Overview of Coveralls</b></h3>
Coveralls has several features that allow you to optimize the coverage of your repositories, analyze trends, and see how changes in specific files have affected the overall project over time.

Some of the advantages of running code coverage reports with Coveralls:
<ul>
 	<li>Set it up once and receive additional insight from code coverage reports with every build</li>
 	<li>Coveralls support <a href="https://docs.coveralls.io/about-coveralls">22 different language integrations</a></li>
 	<li>Access detailed information on the coverage of every file; Coveralls breaks down the information per file for additional insights</li>
 	<li>The updates page, integrated within the UI, provides additional information on how individual commits to your project have accepted the code coverage</li>
 	<li>Add a nice coverage badge to your project read-me to show everyone how well written your code is</li>
 	<li>Little plus point: The maintainers behind Coveralls show their humour in the documentation (what jokes can you spot?)</li>
</ul>
Separately, Coveralls has a pretty comprehensive <a href="https://coveralls.io/pricing">pricing model</a>; whereby open-source projects are free. We have found that coveralls integrates seamlessly with our projects.
<h3><b>Let’s get started</b></h3>
Once signed-up to Coveralls, you will have to provide Coveralls with a git provider to access your repositories. The integration is required to generate repository-specific access tokens that will allow us to push the coverage reports to Coveralls. Ideally, you are using the same git provider in Coveralls as in Codefresh. If you are using the normal account, you can choose between either of the following git providers: GitHub, GitLab, or BitBucket. The enterprise account supports further options.

In this example, we are going to be using Coveralls in <a href="https://github.com/anais-codefresh/coveralls-sample-app">this node application</a>. However, you could use your own application, as long as it is <a href="https://docs.coveralls.io/about-coveralls">supported by Coveralls.</a>

First, we have to make sure that our application is set-up correctly with a testing tool that produces coverage reports. To demonstrate the set-up we will first generate test coverage reports manually in our local environment and then optimize the process with Codefresh so that a coverage report is generated automatically with every pipeline build.

In our case, we are going to use <a href="https://jestjs.io/">jest</a>. Alternatively, you could use Mocha in combination with several tools; more information is provided <a href="https://github.com/nickmerwin/node-coveralls">in their example</a>. Have a look at their documentation for other languages to get an idea of which testing tools are supported.
<h4><b>Set-up testing and code coverage reports in our node repository</b></h4>
If your Node project does not have a testing tool installed, install jest:
<pre>npm install --save-dev jest</pre>
Next, we are going to add a file, called jest.config.js to our root project folder with the following content:
<pre class="">module.exports = {
 preset: 'ts-jest',
 testEnvironment: 'node',
};
</pre>
To complete the configuration, we are going to add the following lines to our package.json file:
<pre class="">"jest": {
   "coverageDirectory": "./coverage/",
   "collectCoverage": true
 },
</pre>
And add a script to run jest:
<pre class="">"scripts": {
   "test": "jest --coverage",
</pre>
Now, when you run ’npm run test’, you should see an output similar to the following:

<a href="https://codefresh.io/wp-content/uploads/2020/12/image7.png"><img class="wp-image-18426 size-medium" src="https://codefresh.io/wp-content/uploads/2020/12/image7-300x171.png" alt="test coverage output" width="300" height="171" /></a>

Once our application produces coverage reports, we have to add coveralls to our packages:
<pre class="">npm install coveralls --save-dev</pre>
Coveralls requires a <a href="https://github.com/nickmerwin/node-coveralls">script</a> that takes standard input and sends it to coveralls.io to report your code coverage. Depending on the framework that you are using, you will have to add a different script to your application.

Any coverage reports can be forwarded that are within a lcov data format (including<a href="https://mochajs.org/"> mocha</a>'s<a href="https://npmjs.org/package/mocha-lcov-reporter"> LCOV reporter</a>). For this, we are going to set-up a “bin” folder, and within the folder a coveralls.js file that contains the following content:
<pre class="">#!/usr/bin/env node
 
'use strict';
 
const { handleInput } = require('..');
 
process.stdin.resume();
process.stdin.setEncoding('utf8');
 
let input = '';
 
process.stdin.on('data', chunk =&gt; {
 input += chunk;
});
 
process.stdin.on('end', () =&gt; {
 handleInput(input, err =&gt; {
   if (err) {
     throw err;
   }
 });
});
</pre>
Lastly, we will have to change our testing script:
<pre>"test": "jest --coverage &amp;&amp; coveralls &lt; coverage/lcov.info",</pre>
Again, for further information on how to set-up Coveralls on your testing framework, please refer to their examples.
<h4><b>Set environment variables to connect to Coveralls</b></h4>
If you don’t have a Coveralls account yet, <a href="https://docs.coveralls.io/">now is the time to set-one up</a>. Once you are signed into Coveralls, you should either see a list of already connected repositories (like in my case), or an empty dashboard.

One last thing that we have to do before running the coverage report and sending it to Coveralls is to define the environment variables. Those will also become useful once we are using Coveralls in Codefresh.
<pre>export COVERALLS_SERVICE_NAME="codefresh"
export COVERALLS_GIT_BRANCH="insert the branch that you will be using with your application"
export COVERALLS_REPO_TOKEN="insert the secret repo token from coveralls.io"
</pre>
Like so:

<a href="https://codefresh.io/wp-content/uploads/2020/12/image3.png"><img class="wp-image-18427 size-medium" src="https://codefresh.io/wp-content/uploads/2020/12/image3-300x21.png" alt="coveralls env variables" width="300" height="21" /></a>
<h4>Connect your repository in Coveralls and receive a secret repository token</h4>
To create the secret repository token, head over to your Coveralls account and add the current repository:

<a href="https://codefresh.io/wp-content/uploads/2020/12/image4.png"><img class="wp-image-18428 size-medium" src="https://codefresh.io/wp-content/uploads/2020/12/image4-300x133.png" alt="add repository " width="300" height="133" /></a>

Once you turn on any of the repositories (box on the left side next to the repository), you will enable tracking of code coverage reports. It is then that you will see the secret repository token that has to be used within the environment variable above.

<b>Connect your local instance with Coveralls</b>

If you have been following along, go ahead and call the tests:
<pre>npm run test</pre>
Now refresh the Coveralls site of your repository to see the Code Coverage reports.

<a href="https://codefresh.io/wp-content/uploads/2020/12/image6.png"><img class="wp-image-18429 size-medium" src="https://codefresh.io/wp-content/uploads/2020/12/image6-300x297.png" alt="Connection with Coveralls manually" width="300" height="297" /></a>

To unlock the full benefits of using Coveralls and to submit coverage reports automatically with every build, we are now setting up our Codefresh pipeline to do the work for us.
<h3><b>Using Coveralls in your Pipeline</b></h3>
You know the drill, if you don’t have a Codefresh account yet, let’s go ahead and <a href="https://codefresh.io/docs/docs/configure-ci-cd-pipeline/pipelines/">create your free one</a>. Once signed in, you should be able to create a project and within the project, we will now create our pipeline.

<a href="https://codefresh.io/wp-content/uploads/2020/12/image2.png"><img class="wp-image-18430 size-medium" src="https://codefresh.io/wp-content/uploads/2020/12/image2-271x300.png" alt="create a new pipeline" width="271" height="300" /></a>
Once you ’create’ the pipeline, a standard codefresh.yml file is generated with three steps:
<ul>
 	<li>The first step will clone your repository;</li>
 	<li>The second step will both, build and push your repository to the container registry <a href="https://codefresh.io/docs/docs/getting-started/create-a-basic-pipeline/#connecting-your-docker-registry-to-codefresh">that you have connected with Codefresh</a>;</li>
 	<li>And the third step currently does not do much.</li>
</ul>
Thus, let’s go ahead and modify it.
<pre class="">
{% raw %}
  test:
    title: "Running test"
    type: "freestyle" # Run any command
    image: "node:15.2" # The image in which command will be executed
    working_directory: "${{clone}}" # Running command where code cloned
    commands:
      - "export COVERALLS_SERVICE_NAME=${{COVERALLS_SERVICE_NAME}}"
      - "export COVERALLS_GIT_BRANCH=${{CF_BRANCH}}"
      - "export COVERALLS_REPO_TOKEN=${{COVERALLS_REPO_TOKEN}}"
      - "npm install --save-dev jest"
      - "npm run test"
    stage: "test"
{% endraw %}
</pre>
For reference, you can find the <a href="https://github.com/codefresh-contrib/coveralls-sample-app/blob/master/codefresh.yml">entire pipeline in the git repository</a>.

As you can see, we specify several variables within this step. Those, which start with ’CF’ are Codefresh-specific steps and the value is automatically provided by Codefresh once you run the pipeline.

However, we have to tell Codefresh Coveralls specific variables. You could place the values directly within the step; however, since the secret repository access token should not get accidentally pushed to your public git repository, we will provide the variables within the variables section.

<a href="https://codefresh.io/wp-content/uploads/2020/12/image10.png"><img class="size-full wp-image-18431" src="https://codefresh.io/wp-content/uploads/2020/12/image10.png" alt="codefresh variables" width="419" height="393" /></a>

Let’s go ahead and run the pipeline. You can view the steps and commands executing within the output section of the pipeline.

<a href="https://codefresh.io/wp-content/uploads/2020/12/image9.png"><img class="wp-image-18432 size-medium" src="https://codefresh.io/wp-content/uploads/2020/12/image9-300x167.png" alt="Codefresh pipeline" width="300" height="167" /></a>
Moving over to Coveralls, we can now see our code coverage report.
<a href="https://codefresh.io/wp-content/uploads/2020/12/image1.png"><img class="wp-image-18425 size-medium" src="https://codefresh.io/wp-content/uploads/2020/12/image1-294x300.png" alt="coveralls interface" width="294" height="300" /></a>
<h3><b>Let’s Recap</b></h3>
In this post, we
<ul>
 	<li>First saw an introduction to Coveralls, its features, and use cases;</li>
 	<li>Then, we prepared our git repository;</li>
 	<li>We set up our Coveralls and our Codefresh Account;</li>
 	<li>Set-up our Codefresh pipeline;</li>
 	<li>And lastly, ran our tests within Codefresh and pushed the coverage reports to Coveralls!</li>
</ul>
To connect Codefresh to Coveralls through your pipeline <a href="https://codefresh.io/codefresh-signup/?utm_source=Blog&amp;utm_medium=Post&amp;utm_campaign=coveralls">Create Your Free Codefresh Account today</a>!

As a bonus, we are going to <strong>add our Coveralls code coverage button to our README</strong>

To do so, you can access various formats directly from the Coveralls UI, within your repository:

<a href="https://codefresh.io/wp-content/uploads/2020/12/image8.png"><img class="wp-image-18434 size-medium" src="https://codefresh.io/wp-content/uploads/2020/12/image8-300x211.png" alt="Add badge to your repository" width="300" height="211" /></a>

Adding it to our README, and tadaa:
<a href="https://codefresh.io/wp-content/uploads/2020/12/image5.png"><img class="wp-image-18433 size-medium" src="https://codefresh.io/wp-content/uploads/2020/12/image5-300x144.png" alt="add badge to your repository" width="300" height="144" /></a>