Test Coverage in Ember Applications with CI and Code Climate Integration
But right now, I don’t want to try to convince you. I want to show you how to set up your Ember app to automatically generate test coverage reports and send them to Code Climate. This will help you to keep track of test coverage status in your app.
What’ll we need?
- Ember app (> 2.4.3)
- A Continuous Integration service account (we’ll be using CircleCI in our example)
- A Code Climate account
Istanbul.js with Ember - meet ember-cli-code-coverage
In our example, we’ll be using ember-cli-code-coverage which utilizes istanbul.js for Javascript test coverage calculations. There’s also a solution using blanket.js, but I found that istanbul.js has a better wrapper for Ember. So let's get started and run it in your project directory:
$ ember install ember-cli-code-coverage
Configuration? Not at all!
Actually, the ember-cli-code-coverage addon is ready to run without any configuration, but if you want/need to - you can change a few options. There’s no point in rewriting it word-by-word from GitHub, so just look at the README#configuration and, if you need to, adjust your config to your needs.
Ready, steady, go!
Running tests with test coverage reporter is simple, just enter the following in your project directory:
$ COVERAGE=true ember test
That’s all! Now, if you actually have some JS code in your app (with matching test files - so if you have my-component.js you’ll need the my-component-test.js file), you’ll notice some new files in the /coverage folder. What interests us the most is lcov.info (which will be transferred to Code Climate later) and index.html, which contains the visual report. Open it.
It should look similar to the following:
As you can see, the table presents the structure of your app - go ahead and browse through. Open any file and you’ll see exactly which parts are tested and which are not. Pretty neat, right?
Of course, there are also some interesting statistics at the top of every page:
This gives you a quick summary of test coverage in the current scope.
How to generate test coverage reports in CircleCI?
We’ve got our test coverage reports generated locally, but what if we want to generate them in a continuous integration service, such as CircleCI? Luckily, this is pretty simple too. We just need to override the default test command in circle.yml:
[code]
But wait, what is this codeclimate-test-reporter stuff? Like I said at the beginning, we also want to publish our test coverage report to Code Climate. To achieve that, we need to do 2 things:
- Install the Code Climate addon
In circle.yml in the dependencies:pre section add:
- npm install -g codeclimate-test-reporter
This will install codeclimate-test-reporter before any tests are run, and the post hook we’ve entered in test override settings will run reporter after finishing the tests. - Add the Code Climate API token which you can find in the repository settings in Code Climate:
To do this, open project settings in CircleCI and go to Build Settings -> Environment Variables. Put CODECLIMATE_REPO_TOKEN as a name and its value as a value field, then save the changes.
Now, you push your changes to the repo and when the tests finish, codeclimate-test-report should send the results to Code Climate:
Now, if you open your repo on Code Climate, you should notice a new badge just under the score. Clicking the result will move you to a coverage browser similar to the one you saw locally.
That’s all! Now, you’ve got a test coverage tool set up along with Code Climate reporter.
Happy testing!
