Code Coverage Reports using Codacy and Codefresh
Tags: devops, testing, codacy, coverage
Published: 2021-01-14 14:07:06

Where do you usually track your code coverage? If you are not sure about the answer to this question or you would like to explore other options to the ones that you are currently using, then this post is for you.

Specifically, this post details how you can use <a href="https://www.codacy.com/">Codacy</a> in your Codefresh pipeline to create and send coverage reports of your repository with every pipeline build.

<a href="https://codefresh.io/wp-content/uploads/2021/01/image6.png"><img class="wp-image-18519 size-medium" src="https://codefresh.io/wp-content/uploads/2021/01/image6-300x146.png" alt="Codacy Dashboard" width="300" height="146" /></a>

To follow along, make sure to have a <a href="https://www.codacy.com/">Codacy</a> and a<a href="https://codefresh.io/codefresh-signup/"> Codefresh account.</a> If not, <a href="https://codefresh.io/codefresh-signup/?utm_source=Blog&amp;utm_medium=Post&amp;utm_campaign=codacy">now is the time to set-up a fresh account for free</a>!
<h1>Codacy Overview</h1>
Codacy is a code review tool that allows for automatic analysis, code coverage tracking, and extensive reports that allow you and your team to improve your code quality over time.

The goals of Codacy is to provide insights on
<ul>
 	<li>How is your code quality today and</li>
 	<li>How is your code quality evolving over time</li>
</ul>
Additional features include:
<ul>
 	<li>User management: Mirroring GitHub permissions</li>
 	<li>Extensive configuration</li>
 	<li>Additional integration with other tools, such as notifications</li>
 	<li>Receive analysis reports per file</li>
 	<li>Depending on the standards that your team wants to enforce, you can add additional parameters such as coverage thresholds</li>
</ul>
Codacy has a <a href="https://www.codacy.com/pricing">free version</a>, a pro version, and an on-premises version. The latter two have a free trial, which allows you to test all features over the course of two weeks. You can sign-up via GitHub, Bitbucket, or GitLab.

It supports over <a href="https://docs.codacy.com/getting-started/supported-languages-and-tools/">30 different languages</a>. In our example, we'll be using TypeScript. If you would like to follow along with a different language make sure it is supported by Codacy.

When you log into Codacy for the first time, it will ask you to <a href="https://docs.codacy.com/getting-started/getting-started-with-codacy/#add-repositories">provide access to a repository.</a> At this stage, Codacy will not download any code from your repository but merely access its names. You can then either provide access to selective repositories or your entire Git repository.

<a href="https://codefresh.io/wp-content/uploads/2021/01/image10.png"><img class="wp-image-18520 size-medium" src="https://codefresh.io/wp-content/uploads/2021/01/image10-300x205.png" alt="Select Git repository in Codacy" width="300" height="205" /></a>

After adding a repository, it will automatically update the information recorded about your application in the Dashboard. Codacy’s UI has the following taps:
<ul>
 	<li>The <a href="https://docs.codacy.com/repositories/repository-dashboard/">Dashboard</a> with an overview of issues and code coverage reports</li>
 	<li>The <a href="https://docs.codacy.com/repositories/commits-view/">Commits</a>, which provides a history of all commits that are associated with this repository</li>
 	<li>The <a href="https://docs.codacy.com/repositories/files-view/">Files</a> within the repository and their respective issues</li>
 	<li>The <a href="https://docs.codacy.com/repositories/issues-view/">issues</a> that Codacy identified in our repository</li>
 	<li>Open Pull requests</li>
 	<li>And lastly, as part of the pro features, users can set-up security alerts.</li>
</ul>
We will stick for now with the Dashboard tap.

As you might be able to tell, the Dashboard does not have access to code coverage reports by default. The next section will provide a guide on connecting Codacy to your code coverage reports.

<a href="https://codefresh.io/wp-content/uploads/2021/01/image8.png"><img class="wp-image-18521 size-medium" src="https://codefresh.io/wp-content/uploads/2021/01/image8-300x157.png" alt="Codacy Dashboard without code coverage reports set-up" width="300" height="157" /></a>

<h1>Set-up Codacy</h1>
To connect Codacy either to our local set-up or to Codefresh, we need an API token. The token can be accessed through the taps in the project. For this, select your <i>project</i> =&gt;<i> go to settings </i>=&gt; <i>integrations</i> =&gt; <i>add integration</i> =&gt; select<i> “Project API”</i>. Make sure that you select the API token from here and not your general project settings:

<a href="https://codefresh.io/wp-content/uploads/2021/01/image7.png"><img class="wp-image-18522 size-medium" src="https://codefresh.io/wp-content/uploads/2021/01/image7-300x137.png" alt="Access project token" width="300" height="137" /></a>

Next, we are going to prepare our project. In our case, we are using a simple <a href="https://github.com/codefresh-contrib/codacy-sample-app">Typescript application</a> and uses <a href="https://jestjs.io/">jest</a> to produce coverage reports.
<pre>git clone git@github.com:anais-codefresh/codacy-sample-app.git

# now cd into the cloned repository
cd codacy-sample-app
</pre>
You should then find yourself in the following project structure:

<a href="https://codefresh.io/wp-content/uploads/2021/01/image3.png"><img class="size-full wp-image-18524" src="https://codefresh.io/wp-content/uploads/2021/01/image3.png" alt="Example application project structure" width="182" height="349" /></a>

To run the application, you can use the following commands:
<pre>npm install
npm run build
</pre>
And to test:
<pre>npm run test
</pre>
This should produce the following test coverage report:

<a href="https://codefresh.io/wp-content/uploads/2021/01/image1.png"><img class="wp-image-18525 size-medium" src="https://codefresh.io/wp-content/uploads/2021/01/image1-300x183.png" alt="Coverage Report with jest" width="300" height="183" />

Once we have our testing and coverage reports set-up, we can push our changes to our Git repository.
<h1>Set-up Codefresh</h1>
The previous section showed how we can set-up our node project with code coverage reports. However, that would not be scalable to continue across machines, versions, or our application, and team members. In this section, we will set-up our Codefresh pipeline to push our code coverage reports to Codacy automatically.

To follow this section, please have your <a href="https://codefresh.io/codefresh-signup/">Codefresh account</a> ready! And integrate with a container registry e.g. Docker Hub or the GitHub container registry.

Once we enter the Codefresh platform, we want to create a new Pipeline. Make sure to select the repository in which we set-up our coverage reports:

<a href="https://codefresh.io/wp-content/uploads/2021/01/image5.png"><img class="size-full wp-image-18526" src="https://codefresh.io/wp-content/uploads/2021/01/image5.png" alt="Create new Codefresh Pipeline" width="510" height="539" /></a>

The pipeline will come with a basic codefresh.yml file. If you are following along, make sure to delete everything that is in the current inline YAML. If you are using your existing pipeline, the next section will show you how to modify the YAML to integrate with Codacy. In the end, we will have the following pipeline:

<a href="https://codefresh.io/wp-content/uploads/2021/01/image4.png"><img class="wp-image-18527 size-medium" src="https://codefresh.io/wp-content/uploads/2021/01/image4-300x170.png" alt="Codefresh pipeline" width="300" height="170" /></a>

To use Codacy, we will have to modify our pipeline to generate the code coverage reports and then push those to our Codacy account. First, we are going to run our tests inside a node image and then connect to Codacy. Our full pipeline will look as such:
{% raw %}
<pre>version: "1.0"
# Stages can help you organize your steps in stages
stages:
  - "clone"
  - "build"
  - "test"

steps:
  clone:
    title: "Cloning repository"
    type: "git-clone"
    repo: "codefresh-contrib/codecov-sample-app"
    # CF_BRANCH value is auto set when pipeline is triggered
    # Learn more at codefresh.io/docs/docs/codefresh-yaml/variables/
    revision: "${{CF_BRANCH}}"
    git: "github"
    stage: "clone"

  build:
    title: "Building Docker image"
    type: "build"
    image_name: "codefresh-contrib/codecov-sample-app"
    working_directory: "${{clone}}"
    tag: "${{CF_BRANCH_TAG_NORMALIZED}}"
    dockerfile: "Dockerfile"
    stage: "build"

  tests:
      title: "Running test"
      type: "freestyle"
      working_directory: '${{clone}}'
      arguments:
        image: 'node:15.2'
        commands:
          - "npm install --save-dev jest"
          - "npm run test"
      stage: "test"

  codacy:
        title: "Pushing reports to codacy"
        type: "freestyle"
        working_directory: '${{clone}}'
        arguments:
          image: 'alpine:3.8'
          commands:
            - "export CODACY_PROJECT_TOKEN=${{CODACY_PROJECT_TOKEN}}"
            - "wget -qO - https://coverage.codacy.com/get.sh | sh"
        stage: "test"
</pre>
{% endraw %}
Make sure to
Change image_name in the build step to your image name in the following format:
Container-registry/image-name,
Change the tag of the image to fit your tag,
And lastly, replace the image and the commands in the “tests” stage to use the commands of your repository to run tests and create coverage-reports.

The last step, called “codacy” in this case, is responsible for running the Codacy script. To set the env variable, we are going to export our Codacy project token and add the token in the toolbar that you can find on the right of the UI. Once the variable is called through the Codefresh YAML syntax, it will automatically use the value provided within the variables section. Note that you could also provide your token directly in the YAML; however, once we add the pipeline to our git repository, we do not want to worry about accidentally exposing secrets.

<a href="https://codefresh.io/wp-content/uploads/2021/01/image9.png"><img class="size-full wp-image-18528" src="https://codefresh.io/wp-content/uploads/2021/01/image9.png" alt="Codefresh variables" width="325" height="315" /></a>

Once added, we can save and run our pipeline.

<a href="https://codefresh.io/wp-content/uploads/2021/01/image4.png"><img class="wp-image-18527 size-medium" src="https://codefresh.io/wp-content/uploads/2021/01/image4-300x170.png" alt="Codefresh pipeline" width="300" height="170" /></a>

You can follow the execution of the pipeline in the output section. The next time that we commit to our repository, a new coverage report will be generated and pushed to our Codacy account through our Codefresh pipeline.
<h1>View the reports in Codacy</h1>
Now we can head over to our Codacy account and see the updated data:

<a href="https://codefresh.io/wp-content/uploads/2021/01/image6.png"><img class="wp-image-18519 size-medium" src="https://codefresh.io/wp-content/uploads/2021/01/image6-300x146.png" alt="Codacy Dashboard" width="300" height="146" /></a>

Selecting the files tap and a specific file to analyze we can find more information on our code quality:

<a href="https://codefresh.io/wp-content/uploads/2021/01/image2.png"><img class="wp-image-18529 size-medium" src="https://codefresh.io/wp-content/uploads/2021/01/image2-300x163.png" alt="Code analysis within Codacy" width="300" height="163" /></a>

<h1>Let’s Recap</h1>
Codacy provides a fast way to integrate code coverage into your Codefresh pipeline. It supports over 30 different languages and an extensive dashboard that also displays information on issues, PRs, and your commit history.

In this tutorial, we set-up coverage reports in our node application, set-up our project in Codacy, and create a Codefresh pipeline with two additional steps.

If you are new to Codefresh, <a href="https://codefresh.io/codefresh-signup/?utm_source=Blog&amp;utm_medium=Post&amp;utm_campaign=codacy">now is the time to set-up a fresh account for free</a>! Also, [do join our forum](https://community.codefresh.io/) and ask away if you have any questions.