Home > Programming > Test-drive your JavaScript!

Test-drive your JavaScript!

Testcard

JavaScript is such an important language today. It’s stopped being a toy scripting language, and become a serious programming language. Unfortunately, the vast majority of JavaScript developers don’t unit test their code.

Testing is a vital part of modern development. Code without tests isn’t code – it’s random scribblings that may or may not be executable. Even if they are executable, the only way you can tell if they all work is by loading your application or website, and trying out every single thing that a user could possibly do.

Test-driven development (TDD) is a really nice way of developing software by writing tests before you write the code. If you’re not used to this way of working then it sounds like a weird way to do things, but hear me out.

Imagine you’re building a web app. You wouldn’t just write the whole thing, then open up a browser and see if it works. You’d write a small bit, open the browser and see if it does the expected thing. If it didn’t, then you’d work out why, then fix it, and look again. Then you’d do the next bit.

TDD is just like that, but easier. With TDD, instead of going to the browser each time and seeing if what you’ve just written works, you write a bit of test code that checks that your code does the expected thing. Once it does, you write another test that checks the next thing you’d like it to do. The advantage of working this way is that every time you run your tests, you’re running all of the previous tests you’ve written. That way you can see if something you’ve written to get the most recent thing working ended up breaking something you did earlier. If you were going to do this the old way, you’d either have to check everything every time you made a change, or risk breaking other things that you’re not concentrating on right now. A good test suite will run in under a second, so you get instant feedback whenever you make a change.

Using TDD also means that you end up thinking about the application in a much more sensible way. It forces you to limit the interactions between different bits of the code, which makes the code much easier to modify at a later date.

A side-effect of TDD is that you end up with a comprehensive test suite that can be used to verify the behaviour of your app.

Ok – I’m sold!

Now, TDD takes some practice. You need to learn the tools and the techniques so you can get to the point where you actually write code faster when you’re test-driving it. So, how do you get there?

Test-Driven JavaScript Development

The best book I know on the subject is Test-Driven JavaScript Development by Christian Johansen. This book works on the assumption that you’ve never done TDD before, and gives an excellent grounding in both TDD in general, and how to do it in JavaScript. This is done through example code that you can write and test as you read the book. By the time you finish the book you’ll know how to do TDD, you’ll have some awesome tools for testing JavaScript, and you’ll have written a Node.js app!

If you’re not sure whether you want to get the book yet, have a look at the author’s introductory testing article on Script Junkie.

Testing tools

Although the author of Test-Driven JavaScript Development advocates the use of Google’s JSTestDriver, I much prefer to use Jasmine. If you work with Ruby you’ve likely used RSpec – Jasmine is basically RSpec for JavaScript, but with some ideas of its own as well. Jasmine is a BDD framework, not TDD. BDD (behaviour-driven development) is like TDD, but with a different emphasis and slightly different philosophy (and terminology). To find out more about BDD have a look at the Wikipedia page, as it’s outside the scope of this article.

Finally

I hope I’ve convinced you by this point that testing is worth it – even in JavaScript. I also hope that you’ll give TDD a go, as I think it’s (a) a great way to develop software, and (b) a brilliant way to create a test suite for your code. It does take a bit of time to set everything up the first time, and to learn the right techniques, but that time will pay for itself over and over again, when you have applications that actually do what they’re supposed to do, and don’t break when you change them. So please, do give it a go, and let me know how you get on!

Categories: Programming Tags: ,
  1. July 23rd, 2011 at 22:51 | #1

    I ran into browser compatibility issues just yesterday. The web app that I’m just twiddling with suddenly didn’t open on Android 2.1 any more. Turned out that Object.keys() wasn’t available there. So even if I had written some Object.keys() availability check beforehand, this wouldn’t have freed me from running the test suite on each target platform, would it? What’s the TDD answer to this common problem? Emulators?

  2. July 23rd, 2011 at 23:15 | #2

    @Gerrit Imsieke The only way to test something works on a particular platform is to test it on that platform.

    When you’re TDD-ing, you can be simultaneously checking two or three browsers, and every now and then you can run your tests against a wider range of browsers. Most issues will be caught by the browsers you’re regularly testing, but you will find the odd one (as you’ve experienced) that gets through.

    There are various ways to run a test suite against mobile devices. So every so often you can just run your suite against each target platform. TDD gives you a test suite to do this, but it’s not about constantly checking against every platform. TDD is to help you write the code. Hope that makes sense!

  3. Andrew White
    July 24th, 2011 at 21:46 | #3

    You can use jstestdriver to connect multiple browsers to your jstestdriver server and can then test them simultaneously to see if any of them break

  4. terry
    July 26th, 2011 at 16:32 | #4

    To be clear the fixes that are being suggested for Gerritt are really part of integration testing not unit testing. At that stage is when you actually test all the components together without mocks or stubs to ensure the application works as expected as a whole.

  5. October 3rd, 2013 at 05:40 | #5

    I am actually delighted to read this website posts which carries plenty of valuable facts, thanks for providing these kinds of data.

  1. No trackbacks yet.

Comments parsed as Markdown.