Test Driven Javascript: Using JSSpec
For the first installment of my Week of TDD and BDD Javascript Frameworks I’m going to cover JSSpec. First I’ll cover some of the specifics and then jump straight into a demo of using it.
The Dirty Details
JSSpec, as the name implies, is a Behavior Driven Development framework based on the popular rspec ruby framework… as such it borrows heavily from rspec’s structure and functionality, using a function named “describe” to start a spec and values are evaluated by passing them to a function named value_of which returns an object containing methods for performing assertions on the value. For example:
value_of([1,2,3]).should_contain(2);
value_of(name).should_be("James);
Now for the other details:
Last Updated
The last release of the framework was September 2008, with the latest SVN activity being December 2008.
License
GNU Lesser Public License
Support
No mailing list, however the author’s address is included on the home page should you need to contact for help. The wiki page contains both a User Guide and Manual to get started with.
Taking It For a Spin
To get started I downloaded the latest release from December that was marked as experimental… I ran into a few issues with it and decided to use the version before it instead. The zip contains core requirements (JSSpec.js, JSSpec.css, and diff_match_patch.js), a demo.html file showing how to use it, a sample and exp directory, and a COPYING text file. The sample directory contains several examples and the exp contains the experimental rhino integration. I needed neither so I deleted everything except for the core files and the demo.html, which I blanked for my needs and moved the core files to a librarydirectory. Let’s dive in!
The Feature
The feature I’m going to drive for this example is the HTML5 placeholder functionality as defined by June 2009. The new placeholder attribute mimics something you’ll commonly see on a website even these days… you know, a text input with text like “Enter your name here” that goes away when you click on it and then comes back if you don’t enter anything.
Writing the spec
To start, I create my new js file html5-input.js and rename demo.html as html5-input-spec.html. I then include my dependencies and blank the existing describes… here is what my html looks like right now.
Now to spec the first behavior:
describe('placeholder attribute for text type', {
"before":function(){
target = new carrcraft.Html5Emulator();
},
"should default the value of the input to it's value": function() {
var expectedValue = $("#first_name").attr('placeholder')
target.emulateInputs();
value_of($('#first_name').val()).should_be(expectedValue)
}
});
Now let’s save and open the html file in the browser… cool! It automatically runs and we see
Hmmmm… we never defined our object (or our method) so naturally it tells us that the variable is undefined. Let’s add both, rerun and…
Nice! It shows us that we expected the placeholder test to be present, but instead we got an empty string because we never did anything in our method. Let’s add some code to do that.
Woot! Passing spec! Let’s define the next behavior, reload and… wtf!? The screen is completely blank. A look at the firebug console reveals we’ve made an easy to make mistake and forgot a comma after the previous spec method. No problem, add a comma to that and we’re good to go.
Now I’ll just make the long story short and say I continued specifying the behavior of the placeholder element and you can look at the final result on github here.
Pros
- No need to load up an external runner or anything, just edit the spec html file and refresh the page
- Powerful rspec style expectation matchers, especially should_have_member
- Multiple describes can be included on the same page
- before, after, before_all, after_all methods
- Encourages methods to be written as sentences
- Very clear failure messages (matchers will even highlight where something wasn’t found)
- Captures exceptions and reports them
- Small footprint
Cons
- Fatal javascript errors in the spec make a blank page. Firebug helps, but if you don’t have it or have I.E. you’ll be scratching your head
- No support for nested describes
- No batch runner, unless you write descriptions in separate js files and include them
- Couldn’t find any community around it, but maybe I just didn’t look hard enough.
Summary
I was throughly pleased with using this framework… the syntax was familiar and it was a breeze to get going with. There’s no visible community around it (irc channels, mailing lists, etc) that I could find, which is always a downside when you find yourself in a trap. However, it was easy enough to find documentation to help me get past my problems, so all was good.
I was also very pleased at how clean the output html of the completed tests runs was… I was even able to whip up a small class in java using webdriver to run specs and report results which could lay some groundwork for creating an ant task to run specs from CI.
Next?
Since I started with JSSpec, it’s only fair to evaluate the other BDD based javascript frameworks next, so I’ll be looking at visionmedia’s jspec. Stay tuned…
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
