QUnit快速上手

发表于 | 分类于 | | 阅读次数

准备测试环境

  1. 在Qunit官网下载qunit.js和qunit.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.js、qunit.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.js 和 core.js），测试脚本放置在 test 目录中（与源码文件对应： array-test.js 和 core-test.js）。每一份源代码文件对应着一个测试脚本文件，在名称上，测试脚本文件文件名 = 源代码文件名 + “-test”。测试执行文件为：tests.html，qunit库的文件放置在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.js，src/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 中的元素，在各个元素上调用 fn，fn 执行返回 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.js，src/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，即可执行测试。

0%