At my work I was recently given the task of getting the test coverage of the unit tests in our JavaScript project to work with Atlassian’s CI server Bamboo. I had a bit of a hard time finding information about how to do this, so I thought I would put it all down here.
For my project, we are writing our unit tests in Jasmine and running them with Karma. The information I found is framework-agnostic, but you will need to be using the Karma test runner to follow along.
To get your test coverage displaying in Bamboo you need to produce a Clover report. This is just an xml, and we can do this pretty easily.
So this comes in 2 steps – setting it up Karma-side and setting it up on Bamboo.
If you aren’t currently using the Karma test runner but want to follow this post, you will need to first set it up. Follow the steps on their site, it is a fairly straightforward process.
The first step to getting the clover coverage report is to add the coverage reporter. I am using dots for the test output (this comes with Karma so you don’t need to install anything extra if you want to use it), and then I will use karma-coverage for the test coverage output. You will need to run in your console:
npm install karma-coverage --save-dev
Now you can edit the karma config file you are using for your project. Update the reporters array to include the coverage reporter.
reporters: ['dots', 'coverage']
Then add a new property coverageReporter
coverageReporter: {
reporters: [
{type: 'text-summary'},
{type: 'clover', dir: 'test-reports', subdir: '.', file: 'clover.xml'}
]
}
There are several types of coverage reporters you can use here – text-summary will print the final coverage results in the console. You can also use one called text if you want a class by class analysis.
The clover reporter is the key one for integrating with Bamboo, as this is the format of test coverage Bamboo understands. This is for some reason missing on the documentation for karma-coverage, but it is there and you can use it without having to install anything extra.
One last thing you will need to do in your karma config file is add a preprocessor task for the coverage:
preprocessors: {
'app/src/**/*.js': 'coverage'
}
Target all the source files you want to run the coverage on.
For reference, here is my final karma.conf.js file:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'js/app.js',
'js/**/*.js',
'test/**/mocks.js',
'test/**/utils.js',
'test/**/*.js'
],
preprocessors: {
'js/**/*.js': 'coverage'
},
reporters: ['dots', 'coverage'],
coverageReporter: {
reporters: [
{type: 'text-summary'},
{type: 'clover', dir: 'test-reports', subdir: '.', file: 'clover.xml'}
]
},
port: 9876,
colors: true,
logLevel: config.LOG_ERROR,
autoWatch: true,
browsers: [
'PhantomJS'
],
singleRun: false
})
}
You will need to have been given certain administrator rights to the project you want to set this up on to see the options I will mention. Or have access to someone with those rights who can help you for a few minutes 😉
First open the build plan
Then select Actions ▶ Configure Plan
Select the job you want this on
If you haven’t already, add your tasks for running tests and parsing the results
Select the Miscellaneous tab – you should see a heading Would you like to view Clover Code Coverage for this plan?
Enable the checkbox Use Clover to collect Code Coverage for this build.
Then choose Clover is already integrated into this build and a clover.xml file will be produced
Specify the path to where your clover xml file is output – the one you specified in the karma config file.
Now if you push your code and run the build plan, you should see a new tab Clover on your project page
You can use this to see your coverage, and track its progress over time – mine here is just a straight line but yours might be a bit more interesting after a few commits…
And that’s it! Now you can use Bamboo to keep track of your code coverage and work towards getting that 100%
Happy testing!
Kumikoro 