In the last blog post I talked about some tooling to help in the process of developing a JavaScript client application. But I did say nothing about testing. Things get complicated when you get closer to the user interface. In this case, developing an application that will run on the browser is tricky to test.

For that, I used Jasmine, PhantomJs and a Gulp plugin to join them. Jasmine is testing framework with similar syntax to RSpec that has a runner for the browser. PhantomJs is a headless browser, which means that it will simulate the browser without running a full browser and interacting manually with it. The Gulp plugin will enable you to automate running those.

For example, my gulpfile.js contained:

var gulp = require('gulp');
var jasmine = require('gulp-jasmine-phantom');

gulp.task('test', function() {
  return gulp
    .src(['vendor/*.js', 'src/*.js', 'spec/*.js'])
    .pipe(jasmine({
      integration: true
    }));
});

That will load the vendor, src and spec files in that order and then run them in PhantomJs. That way you have access to the window and document objects as well as using libraries like JQuery to manipulate the DOM from your code and tests.

But there is one thing to keep in mind: changes in the DOM in one test will persist across during other tests. I guess this is because the Jasmine runner updates the DOM with the test results and the Gulp plugin relies on that. That may break other tests if proper cleanup of the DOM is not made afterEach test.