Can Not Load Reporter "Coverage", It Is Not Registered!

SonarQube (formerly Sonar) has become a standard code quality tool for Java applications. With recent releases, information technology has get easier to analyse code other than Java, even all within the same projection. This ways that you tin now bring lawmaking quality analysis to your JavaScript code, also. In this web log mail service, nosotros show you how.

Overview

Our project is built with Maven. To manage our frontend build process, we employ gulp via the frontend-maven-plugin.

Nosotros configure the Karma test runner to output JUnit and LCOV reports. From gulp, we run Karma to execute our JavaScript tests, and and then practice a lilliputian post-processing on the LCOV report and so that SonarQube tin can understand it.

We run SonarQube itself as part of our continuous integration process with Jenkins. Our Jenkins job configures SonarQube with which JavaScript files to include and exclude (nosotros don't want to analyse third-party libraries, for example) and paths to the coverage reports.

Prerequisites

We brand the following assumptions:

You are already using Maven to build your project.
Y'all already have a SonarQube instance gear up.
You already have a continuous integration server such as Jenkins set up, with the appropriate SonarQube CI plugin installed.
You are already testing your JavaScript code. The test framework yous choose (Jasmine, Mocha, etc.) is up to y'all.

No particular binder structure is required, but you lot will probably be working with something like to the below.

Ok? Then let'southward get started!

Node and npm

gulp and Karma are both based on Node.js, and then we demand to install Node to run them. We volition use the bundle manager npm to install Node packages. (Note: later we are washed, the frontend-maven-plugin will accept care of this process for others working on our project, but to set everything up in the first place, it is easier if we install Node and npm ourselves.)

Head over to the Node.js downloads folio and download the installer for your system. Run the installer to install Node together with npm.

Now nosotros need to prepare our project to utilise it with npm. In essence, this just means creating a bundle.json file. This file holds metadata related to the project, including its dependencies. Afterwards, other developers tin install all the required packages from this file with thenpm install control. Nosotros can create a more detailed package.json file through the interactive prompt npm init, but as name and version are the only required fields, you lot can outset past only creating the file based on the following contents:

                {   "proper name": "frontend-projection",   "version": "0.0.ane" }

Washed? Great! Now we can install Karma. From the root of your frontend project, execute the following at the control line.

                npm install --salve-dev karma

Yous should likewise install packages and plugins for your test framework at this point. For Mocha with Chai and Sinon, for example:

                npm install --save-dev mocha karma-mocha karma-sinon-chai

Nosotros likewise want to get ahead and install the required plugins for generating our unit test and coverage reports:

                npm install --save-dev karma-coverage karma-junit-reporter

The --save-dev flag tells npm to save the name and version of each downloaded parcel to the devDependencies section of packet.json. Take a look at your parcel.json file now. You lot should observe the above packages listed in that location along with a semantic version number.

package.json with devDependencies — packet.json with devDependencies

Yous'll also accept noticed by this point that yous have a new directory called node_modules where all your Node packages live. Y'all should exclude this directory from version control.

Karma

Now that Karma is installed, we demand to configure information technology. It'south a skilful thought to create two config files for Karma: i which is used in conjunction with Karma's spotter manner for Test-Driven Development, and another which is based upon this merely is modified slightly for apply with Continuous Integration.

Karma offers an interactive option for generating configuration files:

                ./node_modules/karma/bin/karma init

Follow the prompts to configure Karma for TDD in your projection. Make sure y'all go your test framework(southward) in there.

When y'all are finished, Karma volition tell you where it has saved the configuration file. Open karma.conf.js and have a expect at the configuration. It contains comments that explain each setting.

If the config file is not where y'all would similar it, you lot can move it and tell Karma the new location later (just conform the basePath setting if you do so). Nosotros're going to motility ours under src/exam/js/ (changing the value of basePath to '../../..').

If you haven't already done then, now is also a practiced fourth dimension to make sure you lot add together your Karma config files to the excludes department of karma.conf.js. As our CI config file will exist called karma.conf.ci.js, use the wildcard character to capture both files, east.one thousand. src/test/js/karma.conf*.js.

Now, create a new file in the same directory chosen karma.conf.ci.js. Add together the following contents.

                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: ['progress', 'junit', 'coverage'],         preprocessors:    {             'src/main/webapp/resources/js/**/*.js':   ['coverage']         },         browsers:  ['PhantomJS'],         junitReporter: {             outputFile: 'reports/junit/TESTS-xunit.xml'         },         coverageReporter: {             type:   'lcov',             dir:    'reports',             subdir: 'coverage'         }     }); };

Here we are telling Karma to run only once, without autoWatch, and without colours in the output (which sometimes cause problems in continuous integration). Moving down, nosotros specify that nosotros desire to use the JUnit and Coverage reporters alongside the standard Progress reporter. Further, nosotros add preprocessing of our JavaScript source files for the Coverage reporter, and restrict the browsers used to the headless PhantomJS merely. Finally, we specify that the JUnit test report should exist named TESTS-xunit.xml and output under reports/junit while the LCOV report should become under reports/coverage.

The name of the JUnit test report is of import: this naming is required for SonarQube to recognise the report as being of type xUnit. For the reports, yous tin create whatsoever directory structure you lot desire. It is a good idea to exclude the directories from version control, however.

At this point, you should be able to execute Karma from the command line to run your tests and generate your JUnit and LCOV reports. (This is definitely rather unwieldy, but fearfulness non, nosotros won't be running Karma this style for long!)

                ./node_modules/karma/bin/karma first src/examination/js/karma.conf.ci.js

Reports there? Bully!

There is just one problem: the paths generated in the LCOV report are wrong. They begin with the current directory (SF:.) where they should instead name the project folder, e.thou. SF:frontend-project. We tin fix this pretty easily with gulp though, which is what we'll exercise next.

gulp

gulp is a very powerful streaming build system based on Node.js. It tin transform all aspects of your frontend build process, but hither we will focus on using information technology to run our JavaScript tests and generate coverage reports with Karma.

Install gulp via:

                npm install --save-dev gulp

To use gulp, you lot need to create a gulpfile.js in the root of your project. Create the file and add the following code to it.

                var gulp = crave('gulp'); var karma = require('karma').server;  gulp.task('test', part () {     karma.start({         configFile: __dirname + '/src/exam/js/karma.conf.ci.js'     }); });

This describes a gulp task called test, which will kickoff the Karma server, run the tests according to the configuration in src/test/js/karma.conf.ci.js, and terminate. This is exactly what we did when we ran Karma from the command line in the previous section.

So, all going well, running ./node_modules/gulp/bin/gulp.js test will run our tests and produce our reports in the expected directories. Endeavour information technology out now!

At present we can motility on and fix our path problem by creating some other gulp task to perform some post-processing on the report with help from the gulp-supervene upon plugin.

Install the plugin via

                npm install --save-dev gulp-supplant

so update your gulpfile to ascertain gulp-supplant and a job to do the post-processing, and and then call the post-processing job as a callback after we are finished running Karma.

                var gulp = require('gulp'); var karma = require('karma').server; var replace = crave('gulp-supercede');  var postprocessLCOV = part() {     return gulp.src('reports/coverage/lcov.info')         .pipe(replace('SF:.', 'SF:frontend-project'))         .piping(gulp.dest('reports/coverage')); };  gulp.task('test', function () {     karma.first({         configFile: __dirname + '/src/test/js/karma.conf.ci.js'     }, postprocessLCOV); });

Running ./node_modules/gulp/bin/gulp.js examination now should result in a LCOV study that SonarQube can understand.

Maven

Now, this is all very well for running our tests from the command line, simply how exercise nosotros integrate this into our Maven workflow? This is where the frontend-maven-plugin comes in.

Instead of trying to manage the frontend build process itself, the frontend-maven-plugin gets out of the style and lets a more suitable tool practise the work. The plugin has been around for well-nigh a year, starting out with Karma and Grunt. Back in Jan I contributed the support for gulp.

To use this plugin, nosotros first need to add together it to our Maven project. Add the following code to the pom.xml in your frontend projection.

                <plugins>     <plugin>         <groupId>com.github.eirslett</groupId>         <artifactId>frontend-maven-plugin</artifactId>         <version>0.0.xvi</version>         ...     </plugin>     ... </plugins>

At present we can configure the plugin to automatically install Node and npm and then run our gulp test command.

Install Node and npm

The post-obit execution installs Node and npm locally on the target system. Here you tin specify the versions of Node and npm to install. (See the README for more details.)

                <execution>     <id>install node and npm</id>     <goals>         <goal>install-node-and-npm</goal>     </goals>     <configuration>         <nodeVersion>v0.10.32</nodeVersion>         <npmVersion>1.4.28</npmVersion>     </configuration> </execution>

Install dependencies

The following execution runs npm install to install all the dependencies listed in your parcel.json. (See the README for more options.)

                <execution>     <id>npm install</id>     <goals>         <goal>npm</goal>     </goals> </execution>

Run gulp

The following execution runs thegulp test command during the test phase. (Encounter the README for more than options.)

                <execution>     <id>gulp build</id>     <goals>         <goal>gulp</goal>     </goals>     <phase>exam</phase>     <configuration>         <arguments>test</arguments>     </configuration> </execution>

Running mvn clean install should now install Node and npm (if required), install all the required packages via npm install and and then run Karma and the written report post-processing via gulp test.

Notation: since the frontend-maven-plugin installs Node and npm locally to a node directory, y'all should also exclude this directory from version command.

SonarQube

Create a SonarQube project for your frontend project.

Jenkins

If not already existing, create a Maven-based Jenkins task for your frontend project, and set the main build step to exercise a mvn clean install.

Equally a Mail Step, choose "Invoke Standalone Sonar Analysis". Select your SonarQube instance for the "Sonar Installation", and add the following to the "Projection properties" section (adjusting the values for your projection and its corresponding SonarQube project). Further properties can be found in the SonarQube documentation.

Annotation: it is also possible to ascertain the SonarQube properties within your pom.xml.

                # required metadata sonar.projectKey=frontend-project sonar.projectName=My-Frontend-Project sonar.projectVersion=1.0.0-SNAPSHOT  # path to source directories (required) sonar.sources=frontend-projection/src/chief/webapp sonar.tests=frontend-project/src/test/js  # excludes sonar.exclusions=frontend-projection/src/primary/webapp/js/lib/**/*  # coverage reporting sonar.javascript.lcov.reportPath=frontend-project/reports/coverage/lcov.info sonar.surefire.reportsPath=frontend-project/reports/junit

This tells Jenkins everything it needs to know nigh the integration with SonarQube.

Note: by non setting a sonar.language pick, it defaults to "multi-language". This means that HTML, CSS and and so on volition also be analysed by SonarQube. If this is non desired, gear up the language pick explicitly to JavaScript: