JSFoo 2012

It’s like kung fu with JavaScript and objects! All about building full size apps in JavaScript.

Manoj Kumar N


Test Drive your JavaScript code using JSTestDriver, Jasmine and your Browser

Submitted Aug 25, 2012

We assume you don’t want to keep pulling your hair out in the middle of the night trying to “debug” a production issue in your javascript code. If that is the case, then TDD and test automation should be your close allies.

In this talk, we’ll introduce Jasmine and JSTestDriver. With the help of a demo, we’ll show you how to test drive your Javascript code and run your tests in “real” environments - i.e. inside all of your supported browsers.


Here’s a popular list of unit testing frameworks for Javascript: QUnit, JSUnit and YUITest. All of these can be used for test driving your JS code.

But let’s take this one step further - to Behaviour Driven Development. With BDD, you get the added advantage of “specing” your tests with a business driven mindset - rather than just thinking about your code.

Jasmine is the de-facto standard for BDD in Javascript. Now let’s assume you’ve configured Jasmine correctly and that you’ve written your specs. But how do you run them? Well, that depends on whether you need access to a DOM or not.

Assuming that do need access to a DOM, you can either rely on your faithful browser itself or go for a headless Webkit like PhantomJS. We prefer to test in a real environment - and that’s exactly what JSTestDriver allows you to do.

In this talk, we will demo the following:

  • Writing DOM-less tests using Jasmine
  • Running the tests using JSTestDriver - across multiple browsers simultaneously. Including mobile browsers.
  • Mocking AJAX requests using Sinon.js
  • Testing DOM elements using fixtures
  • Integration of these tests with a CI server (we’ll be using Jenkins)

Speaker bio

I’m a Front End Engineer at Multunus Software Pvt Ltd, Bengaluru. My passions include HTML5, CSS3, Backbone.js and Test Driven Javascript development. Besides, I also like doing designs using Photoshop.


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}