Problem:
In our company we have separate SonarQube server which shows
all the aspects of quality profiles in most of the projects. (This is a SonarQube
– Jenkins implementation)
And then we newly implement a Karma-Jasmin test server which
runs JavaScript based unit test cases.
Output from the Karma-Jasmin server is available on karma
server not in the SonarQube server.
So we need to get that Karma-Jasmin server output in to the SonarQube
server.then we can get all the quality details of our projects from SonarQube server.
SonarQube server don’t know what is Karma- Jasmine test server,
there is no any link between these to,
So how do we do this? :D
Assumption:
Currently you have perfect up and running karma server with Jasmine
test framework as on the below images.
Below is sample Karma.config JS file.(there should be a
config file in order to run the karma- Jasmine server)
/// <reference path="tests/lib/Jasmine-jquery.js"
/>
// Karma configuration
// Generated on Fri Oct 31 2014 10:20:13 GMT+1100 (AUS
Eastern Daylight Time)
module.exports = function(config) {
config.set({
// base path
that will be used to resolve all patterns (eg. files, exclude)
basePath:
'',
//
frameworks to use
// available
frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['Jasmine', 'sinon'],
// list of
files / patterns to load in the browser
files: [
'./tests/lib/Jasmine-jquery.js',
{ pattern:
'./tests/data/**/*.json', included: false },
'./tests/specs/**/*.js'
],
// preprocess
matching files before serving them to the browser
// available
preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors : {
'./www/app/**/*.js': 'coverage'
},
// test
results reporter to use
// possible
values: 'dots', 'progress'
// available
reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters:
['spec', 'html', 'coverage','junit'],
// web
server port
port: 7777,
// enable /
disable colors in the output (reporters and logs)
colors:
true,
// level of
logging
// possible
values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN ||
config.LOG_INFO || config.LOG_DEBUG
logLevel:
config.LOG_INFO,
// enable /
disable watching file and executing tests whenever any file changes
autoWatch:
true,
// start
these browsers
// available
browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers:
['PhantomJS'],
//browsers:
['PhantomJS', 'Chrome'],
//browsers:
['Chrome'],
//
Continuous Integration mode
// if true,
Karma captures browsers, runs the tests and exits
singleRun:
false
});
};
Prerequisites :
We are going to install the below plugin and generate an info file which contain all the unit test coverage details regarding the Karma-Jasmin
test server.
Then we will pass that info file to our SonarQube server.
So please install below plugin.
npm install karma karma-coverage --save-dev
Let’s get start :
1).Normally when we start the karma server it is referring to
the Karma.config JS in the root directory.
In our case we need to add some more configuration details
to the same Karma.config JS file.
But I will not going to modify the original Karma.config JS.
So I will create a new karma.conf.ci
JS file which refer to the original Karma.config JS file and at the same time I
will add my own configurations to the new
karma.conf.ci JS file.
So create a new js file and name it whatever you won’t.(I name
it as karma.conf.ci).
Add below lines to the newly created js file and keep it
next to the original karma.config file.(at the same directory).
// refer to the original Karma.config
JS file in order to get the original instructions and configurations
var baseConfig = require('./karma.conf.jS');
module.exports = function (config) {
// Load base
config
baseConfig(config);
// Override base config
config.set({
singleRun: true,
colors: false,
autoWatch: false,
reporters:
['junit', 'coverage', 'progress'],
//Out put file of this command will be an xml file
//My folder
name is reports
//It is at the
root folder
//This is not really mandetory becouse the xml file which generate from below code will not be use to populate the sonarqube.
junitReporter: {
outputDir: 'reports'
},
//we use the newly install plugin to generate a test output file.
//generate a
coverage report
//this the place where it contain the info file
.
coverageReporter:
{
type: 'lcov',
dir: 'reports',
subdir: 'coverage'
}
});
};
Below is the junit report and coverage report folder.
Now let’s configure the Jenkins,
As I told you our goal is to parse the data on that info file
in to sonarqube server.
So I have Jenkins server on my PC and I’m controlling the
sonarQube using that Jenkins server.
So let’s go to Jenkins and do some adjustments.
Add below two configurations to your Jenkins project
configurations,
//coverage
report path
sonar.javascript.lcov.reportPath=./reports/coverage/lcov.info
//junit
report path
sonar.surefire.reportsPath=./reports/ (this line is not really mandatory because im not going to use this file to get any data to the SonrQube)
Now build you Jenkins
project in order to populate details at the SonarQube server.
Navigate to SonarQube server, And now you should able to see
the UNIT TEST COVERAGE section at the sonar quality profile.
So for this unit tests coverage report is FULLY based on the icov.inf file.
(sonar.javascript.lcov.reportPath=./reports/coverage/lcov.info).
And there is nothing populated using the PhantomJS 1.9.8 (Windows 7 0.0.0).xml file.
i will use that file to populate some more details at the sonarqube.
So this is what we are looking for.
This unit test coverage details are getting from the
coverage report and junit report.
And that’s it. :D
