Test-driven development of jQuery plugins with jasmine and grunt

2-minute read

While trying to push my ridiculous knowledge of JavaScript and jQuery forward I’ve decided to break in with good habits: this means using test-driven development.
I’ve used Jasmine and jasmine-jquery to do so and even if my ignorance is manifest I could, at least, set up a working testing environment.

Using grunt to run tests

Since my whole WordPress plugin development workflow is based on grunt I’ve put together an environment that will allow me to run tests with a command as simple as

grunt test

Jasmine for grunt

To get the jasmine testing package ready to be used in grunt I’ve used grunt-contrib-jasmine package adding it to my grunt installation package.json file like

{
    "name": "theaveragedeve-libraries",
    "title": "theAverageDeve libraries",
    "description": "A set of libraries to make WordPress theme and plugin development easier",
    "version": "0.1.0",
    "homepage": "https://github.com/lucatume/tad-libs-for-wordpress",
    "author": {
        "name": "theAverageDev (Luca Tumedei)",
        "email": "luca@theaveragedev.com",
        "url": "http://theAverageDev.com"
    },
    "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-concat": "~0.1.2",
        "grunt-contrib-uglify": "~0.4.x",
        "grunt-contrib-cssmin": "~0.6.0",
        "grunt-contrib-jshint": "~0.1.1",
        "grunt-contrib-jasmine": "~0.6.x",
        "grunt-contrib-nodeunit": "~0.1.2",
        "grunt-contrib-watch": "~0.6.1",
        "grunt-contrib-clean": "~0.5.0",
        "grunt-contrib-copy": "~0.4.1",
        "grunt-contrib-compress": "~0.5.2",
        "grunt-contrib-sass": "~0.7.x",
        "grunt-autoprefixer": "0.7.x"
    },
    "keywords": []
}

and run from the root folder of the project

npm install

to get all the packages (eventually) updated and grunt-contrib-jasmine downloaded.

Configuration of Gruntfile.js

After that I’ve updated the Gruntfile.js file to:

  • use the new package
  • create a test task
  • configure the jasmine package

without copying and pasting it all here are the relevant parts

module.exports = function(grunt) {

    // Project configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {

            ...

        },
        jasmine: {
            src: 'assets/js/src/*.js',
            options: {
                vendor: [
                'assets/js/vendor/jQuery/jquery.js',
                'assets/js/vendor/jasmine/jasmine-jquery.js'
                ],
                specs: 'assets/js/spec/*.js'
            }
        }
    });

    // Load other tasks
    ...
    grunt.loadNpmTasks('grunt-contrib-jasmine');
    // more tasks here
    ...

    // Default task.
    grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'sass', 'autoprefixer', 'cssmin']);
    grunt.registerTask('build', ['default', 'clean', 'copy', 'compress']);
    // the test task
    grunt.registerTask('test', ['jshint', 'jasmine']);

    grunt.util.linefeed = '\n';
};

and that’s all is needed, aside for writing tests, fixtures and updating/including the required libraries, to run tests and have an output like [caption id=“attachment_910” align=“aligncenter” width=“745”]Red light Red light[/caption]