Setting up the document
Once we have the QUnit files in place, we can set up the test HTML document. In a typical project, this file would be named index.html and placed in the same test subfolder as qunit.js and qunit.css. For this demonstration, however, we will put it in a parent directory.
The <head>
of the document contains a <link> tag for the CSS file and <script> tags for jQuery, QUnit, the JavaScript we will be testing (B.js) and the tests themselves (test/test.js). The <body> tag consists of six main elements, each with an ID that is used by QUnit for running and displaying the results of the tests. A file with similar markup in the downloaded QUnit's test folder can be used as a template for getting started.
In order to demonstrate QUnit, we will use portions of Chapter 2, Selecting Elements and Chapter 6, Sending Data with Ajax:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Appendix B Tests</title>
<link rel="stylesheet" href="qunit.css" media="screen">
<script src="jquery.js"></script>
<script src="test/qunit.js"></script>
<script src="B.js"></script>
<script src="test/test.js"></script>
</head>
<body>
<h1 id="qunit-header">Appendix B Tests</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<!-- Test Markup Goes Here -->
</div>
</body>
</html>Since the Chapter 2 code that we will test depends on the DOM, we want the test markup to match what we are using on the actual page. We can simply copy and paste the HTML content that we used in Chapter 2, which should replace the <!-- Test Markup Goes Here --> comment.
