QUnit快速上手

准备测试环境

  1. Qunit官网下载qunit.jsqunit.css两个文件,然后放进qunit文件夹;
  2. 创建test.html,内容为:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>QUnit Example</title>
    <link rel="stylesheet" href="qunit/qunit.css">
    </head>

    <body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <script src="qunit/qunit.js"></script>

    <!– 源文件 –>

    <!– 测试脚本 –>

    </body>
    </html>

QUnit 对源文件和测试脚本的存放目录结构没有任何要求,可以自由配置,只要在 tests.html(此文件名亦可自定义)正确引用 qunit.jsqunit.css、源文件和测试脚本文件即可。这里我采用如下的目录结构:

1
2
3
4
5
6
7
8
9
10
11
.
├── qunit
│   ├── qunit-1.12.0.css
│   └── qunit-1.12.0.js
├── src
│   ├── array.js
│   └── core.js
├── test
│   ├── array-test.js
│   └── core-test.js
└── tests.html

我将源代码放置在 src 目录下(其中有两个文件:array.jscore.js),测试脚本放置在 test 目录中(与源码文件对应: array-test.jscore-test.js)。每一份源代码文件对应着一个测试脚本文件,在名称上,测试脚本文件文件名 = 源代码文件名 + “-test”。测试执行文件为:tests.htmlqunit库的文件放置在qunit目录下。

编写源文件以及测试脚本

文件 src/core.js,在 core.js 文件在定义了一个判断是否 object 是数组的方法: isArray()

1
2
3
function isArray(object) {
return Object.prototype.toString.call(object) === "[object Array]";
}

文件 test/core-test.jssrc/core.js 对应的测试脚本:

1
2
3
4
5
6
test("Function: isArray", function() {
// 断言方法ok(),接收两个参数。
// 第一个参数是true即通过测试,第二参数为断言提示信息
ok(isArray([1, 2]), "[1, 2] is an array");
ok(!isArray({}),"{} is NOT an array");
});

文件 src/array.js,定义了 filter 函数。filter 函数遍历数组 array 中的元素,在各个元素上调用 fnfn 执行返回 true 则将元素保存进新的数组,最后返回新的数组。

1
2
3
4
5
6
7
8
9
function filter(array, fn) {
var result = [];
for (var i = 0; i < array.length; i++) {
if (fn.call(null, array[i])) {
result.push(array[i]);
}
}
return result;
}

文件 test/array-test.jssrc/array.js 对应的测试脚本:

1
2
3
4
5
6
7
8
9
test("Function: filter", function() {
function greaterThan(value) {
return value > 10;
}

// 断言方法equal(),接收三个参数。
// 第一个参数为 运行结果,第二个参数为 期望值,第三个参数为断言提示信息。
equal(filter([9, 10, 11], greaterThan), [11], "11 is greater then 10");
});

引用文件并执行测试

修改 tests.html,引用需要测试的源文件以及对应的测试脚本文件:

1
2
3
4
5
6
7
<!– 源文件 –>
<script src=”src/core.js”></script>
<script src=”src/array.js”></script>

<!– 测试脚本 –>
<script src=”test/core-test.js”></script>
<script src=”test/array-test.js”></script>

在浏览器中打开tests.html,即可执行测试。