The JavaScript Testing Challenge

Update 2: The JavaScript Testing Challenge Winner

Update: An Update to The JavaScript Testing Challenge

Think back to the last time you wrote new code from scratch. Not autogenerated Dreamweaver image hovers or a pasted script from Dynamic Drive, but pure unadulterated new code. What was your process? I’m betting it’s probably similar to: (1) code, (2) switch to a browser, (3) confirm desired behavior for the change you’ve made, and (4) repeat.

Comrades, let me assure you that there is a better way, and it starts with writing unit tests. As a Front End Engineer that’s been doing it bareback without tests since I started in 1997, let me assure you that adopting automated testing strategies is one of the single best changes I’ve made to my development cycle to make myself more productive. Enough fluff. Let’s get started!

Testing Environment Setup in 3 Steps #

Prerequisite: Java on the classpath

1. Download the JavaScript-Code-Katas Source (ZIP) (or checkout the code from the Github Repository, if you have git available)

2. Extract and browse to it using your operating system’s command line.

3. Run (Windows)

   > JsTestDriver.bat Template

   Run (MacOS)

   $ ./JsTestDriver.sh Template
   This script will close Safari (be careful if you’re using Safari in other windows)

If a web browser popped up on your screen, congratulations! You have an automated testing environment set up and running. Easy, right?

Writing a Test #

Now, let’s write our first test!

1. Open up templateTest.js in your favorite IDE.
2. Add the following:

  TemplateTest = TestCase('TemplateTest');
  TemplateTest.prototype.testSample = function()
  {
      assertTrue(true);
      assertFalse(false);
      assertEquals(true, true);
  };

3. Re-run the JsTestDriver shell script from Step #3 above.

Now you should see something like the following:

    Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
      Safari 533.18.5 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)

Notice how you didn’t have to touch any HTML boilerplate code or manually bring up a web browser? Productivity ensues! You’ve made it this far, are you brave enough to dive into a Code Kata?

Prime Factors Code Kata #

Code Katas are just small programs used as practice. They’re a great way to introduce Test Driven Development and improve proficiency with your IDE.

The Prime Factors Code Kata requires a function that takes a single integer argument and returns an array of prime factors of that argument in ascending numerical order. For example, passing in 8 should return 2, 2, 2.

• Original Java version by Uncle Bob Martin (see original post).
• JavaScript implementation of the Prime Factors algorithm

I’ve recorded an unmodified single-take screencast of myself performing the kata below. I’m using the same source code I provided above, but with the JsTestDriver Eclipse plugin instead of using the command line to run the tests. The plugin is great for the screencast, because it very easily shows when the tests are failing or passing. You might also notice that it reruns the tests automatically every time I save.

JsTestDriver #

If you want to learn more a about JsTestDriver, check out their Google Code page. “But I use QUnit!” you say. That’s fine, there is an adaptor for that. Using both tools together, you won’t need to launch each individual browser manually and trigger the tests to start. It will save you time.

In the interest of full disclosure, here are the issues I’ve ran into so far using JsTestDriver:

• Doesn’t apply CSS in some browsers. Issue #81
• Defaults to quirks mode. Issue #79

Challenge #

Testing will help you. It will improve your the quality of your code and your productivity. I challenge you to practice the JavaScript Prime Factors Code Kata in your own IDE with your own automated testing process. Send a link to me on Twitter (@zachleat) with an unmodified single-take screencast of you performing the kata (in JavaScript) by December 25, 2010 and the fastest kata screencast will win a copy of Test-Driven JavaScript Development by Christian Johansen (PDF or Print version, your choice*).

Screenr is a great tool for recording screencasts, if you need one.

Good luck!

Coding must follow every step performed by myself in the above version. Templates and keyboard shortcuts can be used at your leisure, but no code can be generated specific to the kata itself (it must be a generic). Use your best judgement here, I reserve the right to disqualify any entries submitted that don’t follow the true spirit of the competition.

Don’t fuck with the speed of the video. I’m spending my own money on this, so if you’re cheating then you’re just stealing from me. Just be cool about it, okay?

The Print version of the prize is restricted to USA or Canada, PDF version is available internationally (unless you want to work something out for shipping costs).