Karma coverage using Instabul

Karma is an awesome testing environment, it is open source, it supports a plethora of testing frameworks and it is easy to use.

In this post I am going to create some simple tests, run them on Karma using Jasmine and finally, show some code coverage reports, through Karma coverage and Instabul.

Source Code

Code outlined in this article can be found here.

Setup

In this sample, I created a new project, running npm init -y, installing the following dependencies:

Next, I setup the test script in package.json.

Awesome, I am ready to setup the karma.conf.js file to configure Karma. This is added on the root directory of the project and it looks like the following:

Let’s dissect the configuration above.

I left the basePath empty, indicating it is the root current directory.

For frameworks settung, I use the Jasmine testing framework for my tests. Because it is an array, I can pass more than one framework for Karma to load. All available frameworks can be found here.

The files property gets all the files that are going to be loaded into the browser. In this case the browser is PhantomJS, as you can see from the browsers configuration property.
All of my code resides into the src directory, which has the app and spec subdirectories. In first there is a calculator.js file, whereas in the latter is a calculator.specs.js file.

On preprocessors, I include only the files that I want a report to be generated, not third party libraries, not specs, just the files that I care to see code coverage reports, in this case the calculator.js. The preprocessors will preprocess the matching files before serving them to the browser.

On plugins property, I register all the required plugins Karma wants to run the configuration. For example, I am using Jasmine as the testing framework, I need to have karma-jasmine plugin loaded into Karma. Same goes for karma-phantomjs-launcher, which loads PhantomJS browser into Karma, in order to be used in browsers configuration, or karma-coverage, which provides code coverage reports using Istanbul.

The reporters configuration takes the ‘progress’ and ‘coverage’ settings. The progress reporter will show the number of tests executed, skipped and total in console.
The coverage reporter will create a coverage report for every browser that the tests are run in.

Lastly, skipping rest of configuration, you’ll find the coverage reporter options (last configuration property). By this, one can configure the output directory to dump the reports, select different type of reporters, like html, text, etc.
In the example above, I output the coverage results in a directory named coverage, relative to the root directory of the project. Also, I have configured two different type of reporters to deploy, one html, which will create the reports in an HTML format, under the html sub-directory and one text-summary, which will output a summary of the code coverage on console.

This is the calculator.js, the source to be tested.

And this is the corresponding spec:

Let’s run this, by opening a terminal and typing

This is the feedback I get from each reporter:

And from the HTML…

Seems that I have forgotten to test the subtract method. Istanbul code coverage lets me know about this, by highlighting the not tested code in red.

Let’s fix this by adding a test for this method.

And run the tests again and see the results from the reports…

And the HTML one..

Seems like the reports working just fine.

Summary

Karma is awesome and easy, as it was demonstrated in this post and setting up code coverage for your project is equally easy.
We saw how to setup Karma to run tests using Jasmine framework and how to setup code coverage with Istanbul to get reports on coverage. All you need to do is to download the karma-coverage package set the preprocessors, reporters and reporter options and run Karma, simple as that.

If you liked this blog post, please like, share and subscribe! For more, follow me on Twitter @giorgosdyrra.

Originally published at codereform.com on November 6, 2016.