Gluing together Jasmine, Grunt, Travis CI & Github, testing front-end code has never been easier

Battle testing api’s, that’s a pretty common task in the testing world. Now testing the front-end code of an application, or website, that’s a bit newer. Go back 3 years ago and there wasn’t a whole lot of frameworks to do that, you had qUnit, and it was not all that sexy.

But the more we move the stack to the front, the more we need to test this code. Fortunately with the current wave of front-end MVC frameworks came a bunch of tools to better integrated them in our workflow. Good news, it never been that easy to setup tests for your javascript code.

Jas what?

Here the basic idea, we already know that grunt helps us managing our front-end stack, it has a lot of plugins and it can also handle easily your tests with the jasmine bundle. A simple npm install grunt-contrib-jasmine and you get a nice jasmine instance running with grunt ready to go, it’s even easier than downloading the standalone app, wants to get started with jasmine? Check that tutotial.

For running Jasmine tests you need phantomJS (a headless webkit browser). A simple brew install should get you hooked, brew install phantomjs.

My new friend Travis

Travis CI is a free(for open source projects) continuous integration platform. It basically runs a bunch of vm to get all sort of tests done in about any languages, including JS. Now what so cool about travis? 2 things, it easily run grunt (like in 2 line), & it is fully integrated with github.

You just need to log into travis, flip the switch for the project you like to use and your done. Your tests will run at each push in github and you even get a nice image showing if your build has passed for your readme.md. This getting started guide shows it better.

Gluing it all together

Let’s see how hard it is to make this all work together from the start.

1. Install phantomJS, brew update && brew install phantomjs
2. Install jasmine in grunt, npm install grunt-contrib-jasmine
3. Create a config in your Gruntfile for jasmine

        jasmine: {
            components: {
              src: [
              'components/*js'
              ],
              options: {
                specs: 'tests/spec/*Spec.js',
                keepRunner : true,
                //helpers: 'test/spec/*.js'
              }
            }

4. Create a travis task in grunt to run multiple stuff like jshint

  grunt.registerTask('travis', [
        'jshint','jasmine'
    ]);

5. Add .travis.yml file to your project with this in it.

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

7. Then add your travis task to your package.json

  "scripts": {
    "test": "grunt travis --verbose"
  }

Push that repo to github and your tests should appear in Travis! There you go, in about 10-20 minutes you just fully integrated your project with tests, now you just have to write them!.