Integrating Karma code coverage with TeamCity

To unit test our Angular apps we use Karma test runner and Jasmine testing framework. Locally we run these tests using a gulp script that takes care of the whole app building process. To ensure nothing is broken before publishing the app to production we run our tests during the continuous integration process using TeamCity.

This post expects you to have a gulp testing process already in place and it won’t cover that part. It also expects you to have a working TeamCity setup in place. The post will only help you integrate Karma with TeamCity as an additional build step so you would get something that looks like this in your TeamCity.

Number of passed/failed tests:

The code coverage tab:

There are a few requirements before we can make this work. To help you better understand our setup, here is a sample project structure that we have:

The first thing to do is ensure you have the following npm packages installed and that they are saved in your package.json file:

"karma": "^0.13.22", "karma-chrome-launcher": "^1.0.1", "karma-coverage": "^1.1.1", "karma-jasmine": "^1.0.2", "karma-phantomjs-launcher": "^1.0.0", "karma-teamcity-reporter": "^1.0.0",

Next ensure that you have the following set up in your karma.conf.js:

• “coverage” and “teamcity” in the reporters list
• “PhantomJS” in your browsers list
• singleRun set to true
• our coverageReporter configuration looks like this (this part is pretty important):

coverageReporter: {   dir: 'coverage',   reporters: [     { type: 'html', subdir: 'html' }   ] }

• set the preprocessors configuration to something like this:

'path/to/code/you/want/to/tests/*': ["coverage"]

• NOTE: we do not have the plugins property set up
• the rest of options are pretty much standard – add/remove what you need

Now that this is all set up, go to your TeamCity. This is essentially how our client-side build process looks like:

The step that is the main interest of this post is the “Run Karma Tests” step. Here is how we have it set up (create a Command Line step):

This is a slightly modified version of what Karma documentation recommends. The difference is that we are forcing the use of local Karma module and we specify the configuration as a command line param like this:

node node_modules/karma/bin/karma start karma.conf.js

The last piece of the puzzle is setting up the coverage artifact. Go to the General Configuration Settings of your project in TeamCity and add an additional coverage artifact path (the second line):

The important bit (it’s simply where our coverage html files are located):

Project.WebApp/coverage/html/** => coverage.zip

Go back and see how we have the coverage/html folder in our project structure. It is set up by coverageReporter karma.conf.js property. This artifact path will take all the files from the coverage/html folder and will compress it into a coverage.zip archive. After the build process finishes, TeamCity will (if it’s is able to find the coverage.zip archive inside the artifacts folder) automatically import it as code coverage for the project and you will be able to navigate to the “Code Coverage” tab for that specific build. If you have any tests that don’t pass, this will also fail the whole step, stop the build and prevent it from ending up in production.

Hope this helps. Cheers! 🙂