12. Configure Code Climate for code coverage

[Filipe Deschamps]

You can't trust the results coming from another developer... you can't even trust the results coming from your computer 👍 you need to centralize all analysis in another specialized machine that the only thing it does is to ensure the quality and behavior of your code inside a clean environment.

Create an account

First you need to create an account in https://codeclimate.com (it's free for open source projects).

Add repository

After you finish your onboard, click in the Add Open Source Repo button:

Insert the location of the repository we created in the Create a Github repository step and then click in the Import Repo from Github:

Configuration

It will analyze your repository and then warn that you're using a default configuration:

To fix this, create a .codeclimate.yml file in the root of your directory and use this content:

---
engines:
  duplication:
    enabled: true
    checks:
      Similar code:
        enabled: false
    config:
      languages:
      - javascript
  eslint:
    enabled: true
  fixme:
    enabled: true
ratings:
  paths:
  - "src/**.js"
exclude_paths:
- dist/**/*

Notice that Code Climate not only can give you a nice code coverage report and badges, but also tell the quality of your code using some really neat engines and reading your ESLint configuration file.

You can also copy this file from master: .codeclimate.yml

Github integration

You can enable Github integrations inside Settings > Integrations panel of your repository. For example, you can make Code Climate analyze your code every time a Pull Request is made. Let's enable it by clicking in the Set Up button:

Code Climate will ask for a Github personal OAuth token:

They are very easy to generate, just access the Personal Access Tokens in Github:

Click in Generate new token button and from the options, create a name for this token in Token description field and for Select scopes choose only repo:status and public_repo:

In the bottom of that page, click Generate token and Github will only show you the token one time, please copy it to your clipboard:

Go back to Code Climate and paste it to the OAuth Token field and also enable Update status?, since we want Code Climate to change the Pull Request status if it finds something wrong with it:

After saving this configuration, a new button Test Service will appear:

Click on it and it should give you a green mark:

But there's another thing you need to configure: Github's webhook. This is necessary since Github need to notify Code Clime that there's a new Pull Request in town.

To do this, go to your Github repository, then open Settings > Webhooks & services

Now click in the Add webhook button and in the follow screen, insert https://codeclimate.com/webhooks inside the Payload URL and check Send me everything. option.

Now click in the Add webhook button and this is the end result:

Sending coverage reports to Code Climate

You need to understand that Code Climate will not automatically generate coverage reports. Some tool will generate those files and then send them to Code Climate.

Remember we are using Istanbul to create our coverage reports, right? It will also generate a coverage/lcov.info file and somehow we need to send this to Code Climate right after we run our automated tests.

We are going to use Travis to not only automatically run our tests, but also send the coverage results to Code Climate.

Before we go, we need to copy a token from Code Climate that we are going to use inside Travis. To grab this token, go to Settings > Test Coverage > JavaScript and find something like this:

CODECLIMATE_REPO_TOKEN=b84c2a82c59ba9f77fbd81c7b78b024a38bf6d5e3527dc4f819e1e1f1410e0b7 codeclimate-test-reporter < lcov.info

The token we are looking for is this b84c2a82c59ba9f77fbd81c7b78b024a38bf6d5e3527dc4f819e1e1f1410e0b7.

Warning: don't follow their instructions, otherwise you will expose that token to everyone. I will teach your a safer way to integrate them.

Next step

13. Configure Travis CI for automated tests

[Netzulo]

maybe a gist with this comment ? @filipedeschamps , @joakimbeng , @ga2mer , @gkal19

solved for me