B.2　设置文档

下载了QUnit文件之后，接下来要设置HTML测试文档。在典型的项目中，这个文件叫index.html，而且与qunit.js和qunit.css放在相同的测试文件夹中。不过，我们这里把这个测试文件放在一个父目录中。

这个文档的 <head> 元素中包含一个 <link> 标签，用于链接 CSS 文件；还包含几个<script>标签，用于加载jQuery、QUnit、要测试的JavaScript文件（B.js），以及测试文件（test/test.js）。文档的<body>标签中包含两个主要元素，每个元素的ID将由QUnit用来运行测试和显示结果。

为了演示QUnit，我们会使用第2章和第6章中的一些例子。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Appendix B Tests</title>
  6.   <link rel="stylesheet" href="qunit.css" media="screen">
  7.   <script src="jquery.js"></script>
  8.   <script src="test/qunit.js"></script>
  9.   <script src="B.js"></script>
  10.   <script src="test/test.js"></script>
  11. </head>
  12. <body>
  13.   <div id="qunit"></div>
  14.   <div id="qunit-fixture">
  15.     <!--要测试的标记放在这里-->
  16.   </div>
  17. </body>
  18. </html>

因为第2章的代码要根据相应的DOM进行测试，所以测试文档中的标记应该与实际页面中的标记符合。可以从第 2 章中使用的 HTML 文档中把相应标记复制过来，替换掉这里的注释“<!—要测试的标记放在这里—>”。