Integrating Jasmine Standalone and Travis CI using Grunt

A while ago I started messing around with a few projects while trying to learn JavaScript, particularly focusing on how to bend it into working in an object oriented way. To test I used the excellent Jasmine Standalone Framework which proved to be more than up to the task and was a natural tool to use given some prior experience with Rspec: a similar testing framework for Ruby. However recently, I have been working on creating an extension for chrome that includes some js scripts. Again Jasmine standalone was my tool of choice for testing my scripts but I had also wanted to be able use Travis CI to automate my testing and of course to get that lovely green "build passing" badge onto my README.md. This lead me down a long and circuitous path, trawling through multiple blogs, nowhere was this covered in detail. Finally after putting the pieces of the jigsaw together I thought that this might be something worth sharing.

If you want to follow through this walk-through step by step the first thing to do is download the Jasmine Standalone runner from here. As this already contains a number of prewritten specs as examples this is perfect to build upon.

Grunt what?

The first stage of this process was very much getting the tests to run through the command line. Once I could do that then I could simply set the npm script in my project to run that and voila my tests would be flying through Travis. Jasmine Standalone though does not really enable this. It's default manner of running tests is through the browser. So at this point I turned to the task manager Grunt.

Grunt come to us as a node module which means that, first things first, we need a package.json. In a terminal inside the project directory run the following:

npm init  

Accept the default options at this stage and voila we will have the file we need. We are now ready to install our task manager:

npm install grunt-cli -g  

This will install the cli system wide. Now we install the dependencies within our project:

npm install grunt --save-dev  
npm install grunt-contrib-jasmine --save-dev  

In order for Grunt to do what we want we need to set it up to carry out the tasks we want. Firstly this required a Gruntfile.

touch Gruntfile.js  

Open this file in your favourite text-editor and type in the following:

module.exports = function(grunt) {

  grunt.initConfig({
    jasmine: {
      src: 'src/*.js',
      options: {
        specs: 'spec/*.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jasmine');
};

To put it simply this uses the grunt-contrib-jasmine module to load the files in the src and spec folders and using the command grunt jasmine we can now run all our tests in the command line.

Integrating with Travis

Now all we need to do is set everything up so that when we push our code to Github Travis correctly runs out tests.

In your package.json replace this:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

with this:

  "scripts": {
    "test": "grunt jasmine"
  },

This means that we have now set the default test command used by Travis to run our new grunt script.

Lastly we need to create a .travis.yml file in order to tell Travis all of this.

touch .travis.yml  

Open this up and insert the following:

language: node_js  
node_js:  
  - "0.10"
before_install:  
  - npm install
  - npm install -g grunt-cli

Travis will now be able to run all our tests and we can get that lovely green image onto our readmes.