Showing jesmin test coverage details on SonarQube

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