Creating the test data

Wonderfully, when writing these tests the data is simply the markup in an HTML file. There are a few required parts when creating a test HTML file. As an example, take a look at the InlineEdit-test.html file.

1. The inclusion of the test framework:

   Code Block
   html html
   <!-- These are the jqUnit test framework files --> <link rel="Stylesheet" type="text/css" media="screen" href="../../../lib/qunit/css/qunit.css" /> <script type="text/javascript" src="../../../lib/qunit/js/qunit.js"></script> <script type="text/javascript" src="../../../test-core/jqUnit/js/jqUnit.js"></script>

2. The inclusion of the modules that will be tested:

   Code Block
   html html
   <!-- These are the required javascript modules for the Inline Edit --> <script type="text/javascript" src="../../../../lib/jquery/core/js/jquery.js"></script> <script type="text/javascript" src="../../../../lib/jquery/ui/js/jquery.ui.core.js"></script> <script type="text/javascript" src="../../../../lib/jquery/plugins/delegate/js/jquery.delegate.js"></script> <script type="text/javascript" src="../../../../framework/core/js/jquery.keyboard-a11y.js"></script> <script type="text/javascript" src="../../../../framework/core/js/Fluid.js"></script> <script type="text/javascript" src="../../../../components/inlineEdit/js/InlineEdit.js"></script> <script type="text/javascript" src="../../../../components/undo/js/Undo.js"></script>

3. The inclusion of the tests and their supports:

   Code Block
   html html
   <!-- These are tests that have been written using this page as data as well as test supports --> <script type="text/javascript" src="../../../lib/jquery-ui/js/jquery.simulate.js"></script> <script type="text/javascript" src="../js/InlineEditTests.js"></script>

4. Markup that QUnit looks for when running the tests and displaying the test results:

   Code Block
   html html
   <h1 id="qunit-header">InlineEdit Test Suite</h1> <h2 id="qunit-banner"></h2> <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> <div id="main"> ... </div>

5. Markup that the tests use as data - everything inside the div with the id 'main'

...

The tests themselves should live in a separate javascript file that is linked to in the HTML file. There are a few required parts when creating a test javascript file. As an example, take a look at the InlineEditTests.js file.

1. Wrap everything in a call to 'ready':

   Code Block
   javascript javascript
   jQuery(document).ready (function () { ... });

2. Create a new test case:

   Code Block
   javascript javascript
   var inlineEditTests = new jqUnit.TestCase ("InlineEdit Tests");

3. Create:
   • tests and add them to the test case:

     Code Block
     javascript javascript
     inlineEditTests.test("Minimal Construction", function () { ... });

   • asynchronous tests and add them to the test case:

     Code Block
     javascript javascript
     inlineEditTests.asyncTest("Minimal Construction", function () { ... });

InlineEditTests.js uses the jqUnit API for its tests.

...