(String: {%- set hs_blog_post_body -%} {%- set in_blog_post_body = true -%} <span id="hs_cos_wrapper_post_body" class="hs_cos_wrapper hs_cos_wrapper_meta_field hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="meta_field" data-hs-cos-type="rich_text"> <div class="blog-post__lead h2"> <p>Tests are important. Very important. Period. Everyone knows that, right? You may disagree, but at some point I bet you’ll change your mind.</p> </div></span>)

Test Coverage in Ember Applications with CI and Code Climate Integration

Photo of Kamil Ejsymont

Kamil Ejsymont

Updated Feb 20, 2023 • 5 min read
test_coverage_in_ember3.png

Tests are important. Very important. Period. Everyone knows that, right? You may disagree, but at some point I bet you’ll change your mind.

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 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:

test_coverage_in_ember3.png

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:

test_coverage_in_ember4.png

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:

  1. 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.
  2. Add the Code Climate API token which you can find in the repository settings in Code Climate:
test_coverage_in_ember2.png

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:

test_coverage_in_ember1.png

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!

Photo of Kamil Ejsymont

More posts by this author

Kamil Ejsymont

Since his earliest years, Kamil has been fascinated by web development. He built and published his...
How to build products fast?  We've just answered the question in our Digital Acceleration Editorial  Sign up to get access

We're Netguru!

At Netguru we specialize in designing, building, shipping and scaling beautiful, usable products with blazing-fast efficiency
Let's talk business!

Trusted by: