QUnit and Grunt

QUnit is a powerful a javascript unit testing framework. Like other unit testing frameworks, it would be quite useful to measure code coverage of the JavaScript code using some modern code coverage tools.

Grunt is a javascript task runner. Like other build tools Rake, Ant, maven, phing, Grunt is a build tool for JavaScript tasks. In this short post, we will see how to setup continuous integration for JavaScript code coverage using Grunt and other useful grunt plug-ins. I have forked source-code of “Qunit-Demo-Advance” from GitHub. Source-Code for this demo is available on GitHub ” Modern-Toolkit” repo.

Grunt plug-ins used in this Demo are

grunt-qunit-junit : To display JUnit style JS reports on Jenkins

grunt-istanbul : To code coverage for JavaScript Code.

Configuration

Pre-requisite:

You have nodeJS and npm installed

Assuming you got awesome project using all cutting edge tools so you must using nodeJS and Grunt. In your ‘package.json’ file you have all node related dependencies. Im your ‘package.json’ add following Grunt plug-ins to generate javaScript code coverage and JUnit kind of reporting

$ vim package.json 1 $ vim package .json

Add following Devdependencies,

{ "version": "0.1.1-1", "description": "Demo of the latest Tools", "engine": "node 1.1.x", "devDependencies": { "grunt-cli": "0.1.6", "grunt": "~0.4.0", "grunt-contrib-clean": "~0.4.0", "grunt-contrib-jshint": "~0.7.0", "grunt-contrib-qunit": "~0.3.0", "grunt-contrib-connect": "~0.6.0", "grunt-qunit-junit": "~0.1.0", "grunt-qunit-cov": "~0.3.2", "grunt-qunit-istanbul" : "*", "grunt-contrib-csslint": "*", "grunt-parallel-behat" : "*" } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 { "version" : "0.1.1-1" , "description" : "Demo of the latest Tools" , "engine" : "node 1.1.x" , "devDependencies" : { "grunt-cli" : "0.1.6" , "grunt" : "~0.4.0" , "grunt-contrib-clean" : "~0.4.0" , "grunt-contrib-jshint" : "~0.7.0" , "grunt-contrib-qunit" : "~0.3.0" , "grunt-contrib-connect" : "~0.6.0" , "grunt-qunit-junit" : "~0.1.0" , "grunt-qunit-cov" : "~0.3.2" , "grunt-qunit-istanbul" : "*" , "grunt-contrib-csslint" : "*" , "grunt-parallel-behat" : "*" }

Note, we have got “grunt-qunit-junit” and “grunt-qunit-istanbul” to generate coverage and reports. Now, let’s install those dependencies.

$ npm install 1 $ npm install

This will install all our dependencies in the ‘node_modules’ directory.

Now that, we need to configure ‘Gruntfile.JS’ to generate code coverage and JUnit reports. Let’s add following tasks to our existing ‘Gruntfile.JS’

grunt.registerTask('default', ['qunit_junit', 'qunit']); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-qunit-istanbul'); gruntConfig.qunit = { src: ['static/test/index.html'], options: { coverage: { src: ['static/js/**/*.js'], instrumentedFiles: 'temp/', htmlReport: 'report/coverage', coberturaReport: 'report/', linesThresholdPct: 20 } } }; grunt.loadNpmTasks('grunt-qunit-junit'); gruntConfig.qunit_junit = { options: { dest: 'report/' } }; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 grunt . registerTask ( 'default' , [ 'qunit_junit' , 'qunit' ] ) ; grunt . loadNpmTasks ( 'grunt-contrib-qunit' ) ; grunt . loadNpmTasks ( 'grunt-qunit-istanbul' ) ; gruntConfig . qunit = { src : [ 'static/test/index.html' ] , options : { coverage : { src : [ 'static/js/**/*.js' ] , instrumentedFiles : 'temp/' , htmlReport : 'report/coverage' , coberturaReport : 'report/' , linesThresholdPct : 20 } } } ; grunt . loadNpmTasks ( 'grunt-qunit-junit' ) ; gruntConfig . qunit_junit = { options : { dest : 'report/' } } ;

We have now configured “quint” task to generate HTML, and coburtura code coverage reports and “quint-junit” task to generate JUnit style reporting.

Now, Let’s run grunt to see it in action

$ ./node_modules/.bin/grunt 1 $ . / node_modules / .bin / grunt

This will create all sort of reports in the ‘report’ directory.

Now that, we have all xml reports in the ‘report’ directory and HTML reports in the ‘reports/coverage’ directory. In the next section, we will configure it with Jenkins Continuous Integration server.

Jenkins and JS Code Coverage

Setting CI Job

Let’s set up CI job to generate Code Coverage reports. We need to install few basic Jenkins plug-ins like ‘Cobertura‘ and HTML Publisher‘, ‘JUnit reports’ etc. Now we will create a new job ‘Jenkins-Grunt’ pointing SCM as Git repo “Modern-Toolkit”

Now, we will configure NPM PATH and all reports as follows

Let’s save this config and run a build. Once we ran the build we will get following Dashboard with all sort of reports:

Now, we got Code Coverage report, Cobertura report and HTML reports. Following those links, we will see

Cobertura Report

JS Coverage HTML Report

Video Demo

You can watch video demo on Youtube

Source – Code

“Modern-Toolkit” GitHub

Conclusion

Grunt is awesome task runner for JavaScript and Generate JavaScript Code Coverage reports on CI using awesome Grunt plug-ins became so simple. Thanks to Jenkins and Grunt!