A couple of weeks ago I made the decision to only write code that turns a unit test from failing to passing. This is also known as BDD (Behaviour Driven Development). This is a big step towards becoming the ninja programmer I want to be. I'll leave the philosophical discussion out of this post, and rather use the time we have together to share what I found to be a pretty good BDD solution for writing JavaScript. Read more...
Most of what I have been practicing has been focused on Ruby on Rails development and specifically RSpec and Cucumber. The way The RSpec Book teaches it, you're supposed to write out a set of high level features and work through them using Cucumber to test out application level functionality, and then – as you come across a feature that hasn't been implemented, use RSpec to cut through your stack from the outside in, Views, to Controllers, to Models, implementing units of code. This works great for the most part and you can even use something like Selenium to drive features requiring JavaScript at the high level. There is one problem though: RSpec doesn't unit-test JavaScript.
FireUnit: JavaScript Unit Testing Extension
I have a lot of respect for John Resig. I admire pretty much everything he has contributed to the JavaScript community. Honestly, I didn't really try a lot of unit testing solutions, I just knew that FireUnit would be a good fit. Download FireUnit and install it in Firefox so you can follow along.
The Plan
- Find some justification for building this feature – write the story.
- Set up our testing template and review the existing source-code.
- Write small tests that fail in a logical way.
- Make the
tests pass. - Rinse, repeat, until feature is completed.
Legitimize the Feature
Advanced Ticketing Solutions is a Web 2.0 application with gradients, drop-shadows, reflections, AJAX, and more. As a developer on the team, I have been tasked with the job of creating a dynamic filter so that managers can sort through their tickets' priorities without refreshing the page constantly. The server currently polls for the latest tickets every 30 seconds using AJAX and delivers the results via a JSON feed.
Make sure you pop the why stack to make sure that this feature is actually worth implementing. What we come up with is:
As a Manager
I want to be able to filter priorities in realtime
So that I can easily see how many Meltown! level tickets there are without the visual clutter of not-so-urgent tickets
We are going to create a select menu that will sort through a table of these items based on their priorities. The priorities are defined as "Urgent", "More Urgent", and "Meltdown!"