Automation BDD

Javascript Coverage & Continuous Integration with Jenkins, QUnit and Grunt

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

 Configuration

Pre-requisite:

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

Add following Devdependencies,

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

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’

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

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

grunt-qunit

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

New-Project-Grunt

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

config

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

jenkins-grunt

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

Cobertura Report

cobertura-reports

JS Coverage HTML Report

html-coverage-qunit

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!

 

  • baldash

    Hi

    First, thanks for the clarity of this tuto, that’s a really good job man but sadly I don’t post only to tell you that: I need help on the grunt configuration part. I added all the devDependencies in the package.json file of my project and the task in my Gruntfile.js but when I run grunt it fails and tell me that :

    >> Warning: Task “qunit_junit” not found. Use –force to continue.

    Aborted due to warnings.

    Have you ever encountered this issue or have you any idea on how to fix it ?

    • anna

      Hi baldash,

      Have you solve your problem when run command ‘grunt’?
      If not, you should modify a little bit in Gruntfile.js.
      You should move bottom line “grunt.initConfig(gruntConfig);” next line to the line of “var gruntConfig = {
      pkg: grunt.file.readJSON(‘package.json’)
      };”

      Hope that can help you.