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
Extract and browse to it using your operating system’s command line.
> JsTestDriver.bat Template
$ ./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!
templateTest.jsin your favorite IDE.
Add the following: TemplateTest = TestCase('TemplateTest');
TemplateTest.prototype.testSample = function()
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).
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.
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:
Screenr is a great tool for recording screencasts, if you need one.
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).
Monkey Disqus14 Nov 2010
Zach Leatherman Disqus14 Nov 2010
Filipi Disqus14 Nov 2010
Christian Disqus15 Nov 2010
Adam Martin Disqus15 Nov 2010
Binh Disqus10 Jan 2011
Zach Leatherman Disqus10 Jan 2011