Tonight I’ve decided to bounce back and try out another testing framework that’s been on my list for awhile, YUI Test. From the site:

YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions. While not a direct port from any specific xUnit framework, YUI Test does derive some characteristics from nUnit and JUnit.

Fair enough… lets look at the dirty details and then get started.

The Dirty Details

License
BSD License

Last Updated
I was unable to get any solid dates for the last date it was updated, but as it has gone through several revisions (via the changelog) I think we can assume it is actively developed.

Support
The documentation is strong. You can also seek help on the ydn-javascript mailing list.

Let’s Get Started

We can get it easy enough from the YUI configuration page and copy the required script tags needed. It’s pretty nice to not have to download all the dependencies… just include them from the CDN and you’re good to go. HOWEVER, if you want your tests to run without a net connection, you might want to download them. :)

Fair enough, let’s go ahead and write our first test. I noticed that assertions look something like YAHOO.util.Assert.areEqual, which is nicely namespaced but a bit too long for my blood, so the style I’ll be using for this example is to create the test case within a function so I can locally scope assert to YAHOO.util.Assert. With that said, here’s the first test case:

var placeholderTestCase = (function(){
  var assert = YAHOO.util.Assert;
  var PLACEHOLDER_TEXT = "Enter Your Name";

  var test = new YAHOO.tool.TestCase({
    name:"HTML5 Placeholder Emulator Test",
    setup:function(){
      var sandbox = $('<div><input type="text" id="foo" placeholder="'+PLACEHOLDER_TEXT+'"></div>');
      this.emulator = new Html5Emulator(sandbox);
      this.input = $('#foo', sandbox);
    },
    tearDown:function(){
      delete this.emulator;
      delete this.input;
    },
    testValueIsPopulatedWithPlaceholderAttribute:function(){
      this.emulator.emulatePlaceholders();

      assert.areEqual(PLACEHOLDER_TEXT, this.input.val());
    }
  });
  return test;
})();

Nice and clean, with a locally scoped constant and shorthand assert. I’m going to go ahead and put this in a standalone js file and write an html file as the runner (all.tests.html). The cool thing about YUITest is it has pretty much decoupled the running of tests from the display of test results. So we also need to create a test logger to report results.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/logger/assets/skins/sam/logger.css" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/yuitest/assets/skins/sam/yuitest.css" />
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/logger/logger-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yuitest/yuitest-min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="lib/html5.emulator.js"></script>
    <script type="text/javascript" src="html5.placeholder.test.js"></script>
    <script type="text/javascript">
    YAHOO.util.Event.onDOMReady(function (){
        with(YAHOO.tool){
          var logger = new TestLogger("testLogger");
          TestRunner.add(placeholderTestCase);
          TestRunner.run();
        }
     });

    </script>
  </head>
  <body class="yui-skin-sam">
    <div id="testLogger"></div>

  </body>
</html>

Now in this case, I used the javascript with statement to scope to YAHOO.tool so I don’t have to include the package name for each Object instance (it is considered harmful though). Now I switch over to firefox, open up the page and see…

This is just using the basic logger, which sadly doesn’t give us a red/green bar. However it does tell us it failed, which is really good enough for me for now. The cool thing is you can listen to different events and implement your own runner to report results however you want, and YUI provides a reporting tool that can post results to any url, so ideally you could set up some kind of service to capture and record results as part of your CI process. For example:

var oReporter = new YAHOO.tool.TestReporter("http://www.yourserver.com/path/to/target", YAHOO.tool.TestFormat.JSON);

I really like it… it’s pretty nifty and very extendable. :)

I’ll spare you the boring details and continue test driving the ol’ HTML5 placeholder example until we get to see 5 passing tests:

As usual, the code is on github for your viewing pleasure.

What I Liked

  • Very very decoupled… various events are triggered for the various test states, and you can subscribe to these events for reporting purposes
  • Reporter that allows you to post results to a url in JSON and XML formats (possibly more, but these were the ones I saw).
  • Doesn’t pollute the global namespace, everything (as is everything in the YUI library) is namespaced
  • Ability to include special instructions (like ignore errors or ignore a specified test)
  • Capability to perform asynchronous tests
  • Can run test suites and provides suite level setUp/tearDown in addition to test level setUp/tearDown
  • EXCELLENT documentation

What I Didn’t Like

I didn’t really find much to not like about it, it’s a pretty solid testing framework. If I had to nitpick, I’d probably say I like the ability to just open a test case and see it run in some frameworks… it might be nice if there was an example html file that lets people do this to try it out.

Summary

I like it. It’s pretty solid and was easy to use, although at some points it was a little involved and you need to decide how you want to report results, set up that kind of environment, etc. Once you get everything in place though, it seems like it’s a cinch to use. Coming for JUnit, the learning curve is pretty shallow.

But I still like spec based frameworks more. :)

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • BlogMemes
  • Blogosphere News
  • description
  • Fark
  • LinkedIn
  • NewsVine
  • StumbleUpon
  • Technorati
  • TwitThis
  • Yahoo! Buzz

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!


This entry was posted on Thursday, June 18th, 2009 at 7:13 pm and is filed under Javascript, Test Driven Development, tdd-javascript-series. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.