Home > Uncategorized > jQuery and testing — JSUnit, QUnit, JsSpec [Part 2]

jQuery and testing — JSUnit, QUnit, JsSpec [Part 2]

November 15th, 2008 Leave a comment Go to comments

Trying QUnit with jQuery

In the JSUnit entry, one of the main problems was with the sequencing of calls. Let’s see how QUnit handles this. QUnit has a simple implementation to this problem: stop() and start() commands to synchronise sequences. The basic approach is that it calls a test function. With the stop() command, it will not call the next test until you say start(). But it does complete the rest of the current test.

The code that I ended up with was just what I wanted compared to JsUnit. Previously, I had said that basically I wanted to call my function and then process the result that it was in fact what I wanted. Here is the main javascript code (it’s nice and concise).

One point about the code at this stage. The tests had to be inside the success function to be run. I wonder if this is going to create a code smell in the long run. Plus there is no setup/teardown cycles, again I wonder what that will mean in the long run. Perhaps not?

module("XML to object");

test("Check the xml to object conversion without showing the tree", function() {
  
  expect( 5 )
  stop();
  
   $().storyq({
        url: 'data/results-01.xml', 
        load: '',
        success: function(feed) {
          ok( feed, "is an object" )
          ok( !$.isFunction(feed), "is not a function" )
          ok( feed.version, "has a version: " + feed.version )
          ok( feed.items, "has items")
          same( feed, reference, "is the same as the reference object in data/results-01.js")
          start();
        }
    });

});

Honestly, it is that easy.

Here’s a couple of features that took me half an hour to work out restated from above. (1) stop() and start() almost work as you expect – but I had to put some alerts in to check the order of execution. Basically, a stop() halts any new tests from executing but it keeps the current test executing. The effect of this is that the asynchronise call can be completed. start() then tells the tests to start running again. If you don’t have a start() then you will find that your test runner halts altogether. There is another option and that is to put a timer on the stop and then you don’t need a start. I prefer to keep the tests running as quickly as possible.

Just another note. I decided to do a same() comparison. I have saved and preloaded an object from a file for ease. This kept the test easy to read – my reference object here is quite long. You can see the insertion of this file in the entire code below <script type="text/javascript" src="data/results-01.js"/>

&lt;html>
&lt;head>
  &lt;title>Unit tests for StoryQ Results viewer&lt;/title>
  &lt;link rel="stylesheet" href="../../lib/qunit/testsuite.css" type="text/css" media="screen" />

  &lt;link rel="stylesheet" href="../../lib/treeview/jquery.treeview.css" />
  &lt;link rel="stylesheet" href="../../src/css/storyq.treeview.css" />
  &lt;link rel="stylesheet" href="../../src/css/storyq.screen.css" />

  &lt;script src="../../lib/jquery/jquery.js">&lt;/script>
  &lt;script src="../../lib/jquery/jquery.cookie.js" type="text/javascript">&lt;/script>
  &lt;script src="../../lib/treeview/jquery.treeview.js" type="text/javascript">&lt;/script>
  &lt;script src="../../src/storyq.js" type="text/javascript">&lt;/script>
  &lt;script src="../../src/storyq.treeview.js" type="text/javascript">&lt;/script>
  &lt;script src="../../src/storyq.xml.js" type="text/javascript">&lt;/script>
  &lt;script src="../../src/storyqitem.js" type="text/javascript">&lt;/script>
  &lt;script src="../../src/storyqresults.js" type="text/javascript">&lt;/script> 

  &lt;script type="text/javascript" src="../../lib/qunit/testrunner.js">&lt;/script> 
  &lt;script type="text/javascript" src="data/results-01.js">&lt;/script>  
  
  &lt;script type="text/javascript">
    module("XML");

    test("Check the xml to object conversion without showing the tree", function() {

      expect( 5 )
      stop();

       $().storyq({
            url: 'data/results-01.xml', 
            load: '',
            success: function(feed) {
              ok( feed, "is an object" )
              ok( !$.isFunction(feed), "is not a function" )
              ok( feed.version, "has a version: " + feed.version )
              ok( feed.items, "has items")
              same( feed, reference, "is the same as the refefence object in data/results-01.js")
              start();
            }
        });

    });
  &lt;/script>
  
&lt;/head>
&lt;body>
  
 &lt;h1>QUnit tests&lt;/h1>
 &lt;h2 id="banner">&lt;/h2>
 &lt;h2 id="userAgent">&lt;/h2>
 &lt;ol id="tests">&lt;/ol>

 &lt;div id="main">&lt;/div>

&lt;/div>
&lt;/div>

&lt;/body>
&lt;/html>

The output results from QUnit are nice to look at and easy to read. I didn’t have a couple of errors that weren’t the easiest to debug given the output. Partly though because I was new to it, I was taking too big a step at times!

I’m happy with QUnit – and there are plenty of examples in the JQuery test suite. I can see that I would do TDD with this.

Being a BDD type of guy, I’m now off to see what JsSpec has to offer.

  1. No comments yet.
  1. No trackbacks yet.