Last week I gave a talk at the London Ajax User Group on testing JavaScript software across different platforms. I wanted to share the talk with a wider audience so what follows is an essay version of the talk; it’s what I planned on saying before I got nervous, fluffed my lines and spoke too fast.

I want to start with a quick history lesson. Cast your mind back to 2006. We had a few browsers out in the wild, not as many as are in mainstream use as today but enough to give us a headache, especially with IE6 still dominating the stats. The problem we had back then was that all the browsers behaved in slightly (sometimes vastly) different ways and had different scripting APIs. Standards were being slowly rolled out but the overhead of dealing with browser quirks was still very high.

So, around 2005 and 2006 we see two projects that try to fix the situation: Prototype and jQuery. They both aimed to normalize and improve the scripting API across all browsers, so you could be more productive and be more confident that your code would work across the board. They’ve both been really successful and since then we’ve seen a lot more projects that have their own take on how we should tame the browsers; projects like YUI, MooTools and Dojo.

Skip forward five years, and the landscape looks quite different. We’ve got a few more browsers in mainstream use, especially with the mobile web becoming a mainstream platform, but we’ve also got JavaScript being used all over the place. People are finally taking it seriously for server-side work, it’s being embedded in databases, it’s everywhere. Node has kick-started this, but there’s a ton of frameworks based on Rhino.

So what’s the problem this time? Well, it’s not so obvious. These platforms all have different APIs but that’s largely because they’re used for different things; you probably don’t care that your web front-end won’t run on CouchDB. But one of the promises we’ve heard for years and years about server-side JavaScript is that it’ll amplify code reuse. You’ll be able to share business logic between the client and the server. Remember ‘write once, run anywhere’? We were actually going to make that work.

But what we’re actually seeing is needless specialization. Application frameworks for Node, testing libraries for Node, template languages for Node, API clients for Node. I don’t mean to pick on Node; it’s been the same with jQuery, although fortunately jQuery became so pervasive that depending on it wasn’t so much of a problem. But we’re seeing the same pattern all over again with Node and this seems like a wasted opportunity to me. Node’s popularity is bringing client-side developers onto the server, and it would be great of this helped unify our efforts.

Now I didn’t want to single any particular project out for criticism, because really I’m just as guilty as anybody else. I maintain a project called Faye which bills itself as a pub/sub messaging server for Node. But the truth is, most of the internal logic about managing clients and subscriptions is just pure JavaScript, Node is just used to make this logic accessible over the Internet. You could probably tear the Node part out and run the server in a browser, if you felt like it.

So we have a problem with portabilty, we’re wasting time reinventing the same wheels on every platform we migrate to. And to solve this, to help us share more code, I don’t think we need to normalize APIs like we did in the browser. Variety and innovation are good things, and people should have some choice about which platforms they target. But for those of us that want to write cross-platform code, I think we’re going to need testing tools that work everywhere.

Now, some back story. Since 2007 I’ve been working on this project called JS.Class. It’s an object system for JavaScript that’s based on Ruby, so it gives you classes and mixins and a few of Ruby’s object methods. It comes with a class library of common object-oriented idioms and data structures, and it tries to establish some conventions for things like how to compare objects for equality, how to sort them, store them in hash tables, and what-have-you.

OrderedHash = new JS.Class('OrderedHash', {
  include: JS.Enumerable,
  
  initialize: function() {
    // ...
  },
  
  forEach: function(callback, context) {
    // ...
  }
})

It lets you make a class like this. Say I want a new data structure, which we’ll call an ordered hash. I can create it, add the Enumerable methods to it, give an initializer, tell the Enumerable module how to iterate over it, and add other methods. Pretty standard stuff.

Then some time in around 2009, I added JS.Packages. It’s a package manager, and the aim is to seperate out the logic of how to load code and dependencies from the code itself. So you say I’ve got this file /lib/ordered_hash.js, it defines OrderedHash, and it depends on JS.Class and JS.Enumerable. You can use local files or files off other domains. Then when you need to use an object you just require() it and JS.Packages will make sure it’s loaded then run your code.

JS.Packages(function() { with(this) {
  
  file('/lib/js/ordered_hash.js')
    .provides('OrderedHash')
    .requires('JS.Class', 'JS.Enumerable')
  
  file('http://cdn.google.com/jquery.js')
    .provides('jQuery', '$')
}})

JS.require('jQuery', 'OrderedHash', function() {
  var links = $('a'),
      hash  = new OrderedHash()
  
  // ...
})

The reason it focuses on object names rather than file paths is because I also wanted to use it to load code from libraries with their own loaders. For example, Google has this thing where you include a seed file, and then use the google.load() function to load more components. Using JS.Packages, you can have custom loader functions that bridge to other platforms’ loading systems, so I can use the same system to load all the objects I want to use. This abstraction also means I can use the same configuration to load code on non-browser platforms; JS.Packages can figure out how to load external files based on the environment.

JS.Packages(function() { with(this) {
  
  file('https://www.google.com/jsapi?key=INSERT-YOUR-KEY')
    .provides('google.load')
  
  loader(function(onload) {
    google.load('maps', '2', {callback: onload})
  })
    .provides('google.maps')
    .requires('google.load')
}})

JS.require('google.maps', function() {
  var node = document.getElementById("map"),
      map  = new google.maps.Map2(node)
})

Finally there’s this autoload() function, which lets you say if I require an object whose name matches this regex, try to load it from this directory. It’ll turn the object name into a path and then try to load that file for you. You can also use the matches from the regex to generate a dependency, for example if I’m testing and I load the TwitterSpec, I probably want to load the Twitter class as well, and I can use the match from the regex to specify that.

JS.Packages(function() { with(this) {
  
  autoload(/^(.*)Spec$/, {
           from: 'test/specs',
           require: '$1' })
  
  // e.g. TwitterSpec
  //      defined in test/specs/twitter_spec.js
  //      requires Twitter
}})

So I’d been using this for months and all was good with the world until this landed in my inbox:

Does it work on Node?

And it turned out that it didn’t. There are some environment differences in Node that meant that JS.Class wouldn’t run. I patched them up and had a play around with it and everything looked okay. But still, all I could legitimately say at the time was, “I don’t know.” All my tests at the time were written with Scriptaculous, which I loved because it’s really simple to get going with, but it meant my tests were confined to the browser. I needed something new.

So I had a look around to see what was out there, and there are a few really nice frameworks around that work on a few platforms. But none of them seemed to Just Work out of the box on all the platforms people were asking me to support. A few of them you can hack to override their platform bindings but it’s not a great first-time experience. So I did what any self-respecting nerd with a GitHub account does, and wrote a whole new testing library.

The next version of JS.Class will ship with a package called JS.Test. It’s a testing library, and it looks pretty much like most other testing libraries you’ve seen, but with a few explicit goals. First, it should run everywhere, without modification or configuration. I shouldn’t have to tell it how to load files or print results, it should figure that out based on the environment. It should remove as much boilerplate as possible, because setting up a new test suite is always a drag and I constantly forget how to do it. And, it should hide any platform differences – you should just be able to use a single API to write, load and execute your tests across all supported platforms.

Now rather than pore over the API details, which aren’t that interesting since they’re similar to stuff you’ve already seen, I thought I’d take you through an example. We’re going to build a little Twitter API client that works in Node and in web browsers.

Twitter has a search API, which you don’t need to sign up or do any OAuth leg-work to use, it’s a great place to get started. It looks like this, you make a request to search.twitter.com/search.json with your query and you get back a JSON document with some tweets matching the search.

$ curl 'http://search.twitter.com/search.json?q=@jcoglan'
    
{
    "results": [{
        "id": 23843942428577792,
        "created_at": "Sat, 08 Jan 2011 20:50:13 +0000",
        "from_user_id": 4393058,
        "from_user": "extralogical",
        "to_user_id": 86308,
        "to_user": "jcoglan",
        "text": "@jcoglan I need to write some JS testing code...",
    }
    ...
    ]
}

Now, let’s say I want to access this with a JavaScript API. I make a new client, tell it to search for something, then process the results with a callback function. This is what we’re going to build.

var client = new Twitter()

client.search('@jcoglan', function(tweets) {
  // tweets == [{to_user: 'jcoglan', ...}, ...]
})

So first we need to set up a project structure for this. JS.Test doesn’t require any particular file layout, this is just how I’ve settled on doing things. You see we have a source directory that contains the project’s source code, we have a vendor directory where I’ve installed JS.Class, and we have a test directory. This test directory needs a few items in it.

twitter/
    source/
        twitter.js            : source code
    test/
        browser.html          : runs in browsers
        console.js            : runs on command line
        run.js                : loads and runs all tests
        specs/
            twitter_spec.js   : test definitions
    vendor/
        jsclass/
            core.js           |
            loader.js         | -> Framework code
            test.js           |
            (etc)             |

browser.html is what we’ll load up in a web browser to run the tests, and console.js is a script we’ll run in the terminal. They both do exactly the same thing, which is to load the JS.Class seed file, and load the test runner. The test runner, that’s run.js, is a cross-platform script that loads the project’s code, loads all the tests, and runs them. The tests themselves live in the specs directory, one spec file for each source file. Again, this is just convention, you can change this easily once you’re familiar with the setup.

I’m going to start with the console setup first, because it’s slightly simpler. As I said the job of console.js is to load the JS.Class seed file and then load the test runner. Here we’re using Node’s require() function to load the files, some platforms use load() but it’s easy to detect what’s available and pick the right one.

// test/console.js

JSCLASS_PATH = 'vendor/jsclass'
require('../' + JSCLASS_PATH + '/loader')
require('./run')

So with that done we move onto the runner file, this is the script that’s used in all environments to load the project and execute its tests. Notice we can do away with require() vs. load() here, since we’ve got JS.Packages loaded now we can use it to load everything. We start with an autoload() statement to tell it where to find Spec objects, then we tell it where our source code is: file source/twitter.js provides Twitter and requires JS.Class. Finally we load JS.Test, load all our specs and tell JS.Test to run the test suite.

// test/run.js

JS.Packages(function() { with(this) {
  autoload(/^(.*)Spec$/, {
           from: 'test/specs',
           require: '$1' })
  
  file('source/twitter.js')
    .provides('Twitter')
    .requires('JS.Class')
}})

JS.require('JS.Test', function() {
  JS.require('TwitterSpec',
             function() { JS.Test.autorun() })
})

Now onto the spec itself. In our spec file, we create a spec. This is almost the same API is Jasmine, or JSpec, or any number of things so it should be familiar. We have a before block that creates a new Twitter client, then a test for it: when I call search() with "@jcoglan", the client should yield tweets mentioning me. That resume() business is there because we’re running an asynchronous test; JS.Test passes this function to the test block, and we call it when the test is ready to continue, passing any assertions we want to make. It you leave the resume argument out, JS.Test assumes it’s a synchronous test and won’t suspend running when the outer test block completes.

// test/specs/twitter_spec.js

TwitterSpec = JS.Test.describe("Twitter", function() {
  before(function() {
    this.client = new Twitter()
  })

  it("yields matching tweets", function(resume) {
    client.search("@jcoglan", function(tweets) {
      resume(function() {
        assertEqual( "jcoglan", tweets[0].to_user )
      })
    })
  })
})

Let’s go and run our test suite. We immediately get a helpful error message from Node: it couldn’t find our source code.

$ node test/console.js

Error: Cannot find module './source/twitter'

Great, let’s go and create a blank file to get rid of this error. Now we’ve created the file, Node finds it but JS.Pacakges starts complaining.

$ mkdir source
$ touch source/twitter.js
$ node test/console.js

Error: Expected package at ./source/twitter.js
       to define Twitter

You said twitter.js would define the Twitter class, but it doesn’t! Better go and add that.

// source/twitter.js

Twitter = new JS.Class('Twitter')

Now we’ve made the package loader happy and we start to get some meaningful output.

$ node test/console.js

Loaded suite Twitter
Started
E
Finished in 0.072 seconds.

1) Error:
test: Twitter returns tweets matching the search:
TypeError: Object #<Twitter> has no method 'search'

1 tests, 0 assertions, 0 failures, 1 errors

We get an error because our Twitter class doesn’t have the method we need. So, let’s go and implement it. I won’t go through the whole TDD cycle here, let’s just assume I prepared some Node code earlier that does what we want.

// source/twitter.js

Twitter = new JS.Class('Twitter', {
  search: function(query, callback) {
    var http   = require('http'),
        host   = 'search.twitter.com',
        client = http.createClient(80, host)

    var request = client.request('GET',
                  '/search.json?q=' + query,
                  {host: host})
    
    request.addListener('response', function(response) {
      var data = ''
      response.addListener('data', function(c) { data += c })
      response.addListener('end', function() {
        var tweets = JSON.parse(data).results
        callback(tweets)
      })
    })
    request.end()
  }
})

And run the test again:

$ node test/console.js 

Loaded suite Twitter
Started
.
Finished in 2.684 seconds.

1 tests, 1 assertions, 0 failures, 0 errors

We’re all good! Except… this won’t run in a browser. All the network code we wrote only works on Node, and we want this to work client-side too. We’re going to need tests for this. Thankfully, JS.Test makes this easy: all we need is a web page that, just like our terminal script, loads the JS.Class seed file, and loads the test runner. All the test code we wrote earlier will work just fine in the browser.

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html">
    <title>Twitter test suite</title>
  </head>
  <body>
    <script src="../vendor/jsclass/loader.js"></script>
    <script src="../test/run.js"></script>
  </body>
</html>

If we load this up in a browser, we see something like this. “ReferenceError: require is not defined”. Okay, it’s hitting our Node implementation where we load the Node HTTP library, we want to avoid that. So what do we do? Easy, just detect whether we’re in a DOM environment and switch to using JSONP to talk to Twitter instead of Node’s HTTP libraries. Again, here’s one I made earlier, this is just the usual JSONP hackery, nothing fancy, and we’ve moved the Node version into the nodeSearch() method that will be called if we’re not in a DOM environment.

Twitter = new JS.Class('Twitter', {
  search: function(query, callback) {
    if (typeof document === 'object')
      this.jsonpSearch(query, callback)
    else
      this.nodeSearch(query, callback)
  },
  
  jsonpSearch: function(query, callback) {
    var script  = document.createElement('script')
    script.type = 'text/javascript'
    script.src  = 'http://search.twitter.com/search.json?' +
                  'callback=__twitterCB__&' +
                  'q=' + query
    
    window.__twitterCB__ = function(tweets) {
      window.__twitterCB__ = undefined
      callback(tweets.results)
    }
    var head = document.getElementsByTagName('head')[0]
    head.appendChild(script)
  },
  
  nodeSearch: function(query, callback) {
    // ...
  }
})

Reload the page, and fantastic – we’ve got a green build. Quick side-note, in the browser UI, JS.Test will print out a tree of all your nested context blocks that you can browse, which can be more useful than the terminal UI for finding errors. It’ll also notify TestSwarm if that’s where you’re running your tests, so you can use it for continuous integration.

The final piece of the process is to refactor. We’ve got a bunch of networking code gunking up our API client. Maybe we should move the networking code into its own module that’s a generic interface for making HTTP calls in any environment we support. Then we could call it like this:

// source/twitter.js

Twitter = new JS.Class('Twitter', {
  search: function(query, callback) {
    var resource = 'http://search.twitter.com' +
                   '/search.json?q=' + query
    
    Twitter.Net.getJSON(resource, callback)
  }
})

Because the logic for how to do networking is now isolated in one module, it’s easier for a user to replace if they want to make the Twitter client run in another environment: they just have to replace the implementation of Twitter.Net.getJSON() with the HTTP code for their platform. It also means that the network is easier to stub out, since we don’t want to rely on the real Internet during testing:

// test/specs/twitter_spec.js

TwitterSpec = JS.Test.describe("Twitter", function() {
  before(function() {
    this.client = new Twitter()
    
    stub(Twitter.Net, "getJSON")
        .given("http://search.twitter.com/...")
        .yields([{to_user: "jcoglan"}])
  })
  
  it("yields matching tweets", function() {
    // ...
  })
})

This approach also means we can run the test in any platform because we don’t need to actually talk to the network. We’d then write unit tests for the Twitter.Net module to make sure it worked on the right platforms.

So what I wanted to get across here isn’t that you should all go and use my code, but try to follow some of the same patterns. If we want highly reusable software we’re going to need to test it everywhere. If you’re building libraries to support your work, and it looks like the abstraction would be useful in other contexts, consider making it available to users of other platforms. If you do have platform-specific code, try to isolate it in one place and hide it behind abstractions. Remember how in Faye I’ve isolated the Node bindings to make it easy to run and test the internal components in other environments. Make it easy to replace the platform bindings, so if someone wants to run it somewhere you didn’t expect it’s easy to swap in new bindings.

And finally, write usage documentation. If someone’s trying to get your code running somewhere new, step-by-step tutorials are great for showing people the ropes and getting them comfortable with how your stuff works, so they feel more confident hacking it to their needs. You’ll be amazed what people do with your code when you make it easy to use and write nice docs for it.