Qunit初探

标签： JavaScript JQuery qunit 单元测试 | 发表时间：2015-07-28 22:53 | 作者：dwqs
出处：http://www.ido321.com

前言

2008年5月， Qunit 随JQuery的核心库一起发布，在2009年重构之后，Qunit独立出来，可以用于测试各种Javascript应用和框架，其提供的断言方法遵循了CommonJS维护规范。尽管Qunit能再服务端和命令行运行，但是其主要还是用于测试浏览器端的Javascript。

先看一个简单地测试demo:

  
       
  1.     <!DOCTYPE html> 
    2.    
  2.     <head>
    3.    
  3.     <link rel="stylesheet" href="qunit.css"> 
    4.    
  4.     <script src="qunit.js"></script> 
    5.    
  5.     </head>
    6.    
  6.     <body>
    7.    
  7.         <script> 
    8.    
  8.         test("hello", function() { 
    9.    
  9.             ok(true, "world"); 
    10.    
  10.         }); 
    11.    
  11.         </script> 
    12.    
  12.         <h1 id="qunit-header">QUnit Hello World</h1> 
    13.    
  13.         <h2 id="qunit-banner"></h2> 
    14.    
  14.         <ol id="qunit-tests"></ol>
    15.    
  15.     </body>
    16.    
  16.     </html>

先从 这里 下载对应的js和css文件。Qunit提供的 test()方法定义一个为”hello”的测试，第二个参数是传递给 test()的函数，里面才是真正的测试代码，示例中调用 ok()方法，该方法第一个参数是一个布尔值，用于判断测试是否通过，第二个是测试不通过时的输出消息。Qunit会在页面加载完后运行，上面运行后截图如下：

  
       
  1.         test("hello", function() { 
    2.    
  2.             ok(false, "test faild"); 
    3.    
  3.         });

ok()期待返回一个True，若返回false，测试不会通过：

测试结果中给出了具体的测试结果。和 test()类似的另一个方法是 asyncTest()，后者用于异步测试。

Writing QUnit Tests

给一个稍复杂一点的demo：

  
       
  1.     <!DOCTYPE html> 
    2.    
  2.     <html> 
    3.    
  3.     <head> 
    4.    
  4.         <title>QUnit Test</title> 
    5.    
  5.         <link rel="stylesheet" href="qunit.css"> 
    6.    
  6.         <script src="qunit.js"></script> 
    7.    
  7.         <script src="tests.js"></script> 
    8.    
  8.     </head> 
    9.    
  9.     <body> 
    10.    
  10.         <h1 id="qunit-header">QUnit Test</h1> 
    11.    
  11.         <h2 id="qunit-banner"></h2> 
    12.    
  12.         <div id="qunit-testrunner-toolbar"></div> 
    13.    
  13.         <h2 id="qunit-userAgent"></h2> 
    14.    
  14.         <ol id="qunit-tests"></ol> 
    15.    
  15.         <div id="qunit-fixture">test markup</div> 
    16.    
  16.     </body> 
    17.    
  17.     </html>

tests.js的文件内容如下：

  
       
  1.     function format(string, values) { 
    2.    
  2.         for (var key in values) { 
    3.    
  3.             string = string.replace(new RegExp("\{" + key + "}"), values[key]); 
    4.    
  4.         } 
    5.    
  5.         return string; 
    6.    
  6.     } 
    7.    
  7.     
    8.    
  8.     test("basics", function() { 
    9.    
  9.         var values = { 
    10.    
  10.             name: "World" 
    11.    
  11.         }; 
    12.    
  12.         equal( format("Hello, {name}", values), "Hello, World", "single use" ); 
    13.    
  13.         equal( format("Hello, {name}, how is {name} today?", values), 
    14.    
  14.             "Hello, World, how is World today?", "multiple" ); 
    15.    
  15.     });

这个demo创建一个basics的测试，用于检测 format()方法能否返回我们期待的值。 format()的功能就是模板HTML替换技术，MVC的基础之一。

这里利用 equal()进行断言，它会使用’==’比较传入的第一个(函数的返回值)和第二个(期待的值)参数，第三个参数是输出信息。测试截图如下：

正如我们看到的，对于多行的匹配， format()的函数是有bug的。当然，这个bug也是很容易修复的：

  
       
  1.     new RegExp("\{" + key + "}", "g")

The Assertion Methods of QUnit

在上面的两个demo中，已经用过两个断言方法： ok()和 equal()。此外，Qunit提供了很多断言：

  1. deepEqual(value, expected[, message]):跟 equal()类似，但是是使用 ===进行更严格的比较。
  2. notDeepEqual(value, expected[, message]): deepEqual()的反操作
  3. notEqual(value, expected[, message]): equal()的反操作
  4. propEqual(value, expected[, message]):对对象的属性和值进行严格比较，只有当所有 value和 expected严格相等时，测试才会通过。
  5. strictEqual(value, expected[, message]):验证被提供的 value和 expected参数是否严格相等。
  6. notPropEqual(value, expected[, message]): propEqual的反操作
  7. notStrictEqual(value, expected[, message]): strictEqual的反操作
  8. throws(function [, expected ] [, message ]):测试是否有毁掉函数抛出异常，并选择性的抛出错误。

需要说明的是，上述方法中的value是一个函数、方法的返回值，或已经声明的变量的值；expected是期望值；message则是断言的简短描述；function则是一个执行函数，并应该返回一个错误。

看一个demo示例吧：

  
       
  1.     var App = {
    2.    
  2.        max: function() {
    3.    
  3.           var max = -Infinity;
    4.    
  4.           for (var i = 0; i < arguments.length; i++) {
    5.    
  5.              if (arguments[i] > max) {
    6.    
  6.                 max = arguments[i];
    7.    
  7.              }
    8.    
  8.           }
    9.    
  9.     
    10.    
  10.           return max;
    11.    
  11.        },
    12.    
  12.        isOdd: function(number) {
    13.    
  13.           return number % 2 !== 0;
    14.    
  14.        },
    15.    
  15.        sortObj: function(array) {
    16.    
  16.           array.sort(function(a, b) {
    17.    
  17.              var date1 = new Date(a.timestamp).getTime();
    18.    
  18.              var date2 = new Date(b.timestamp).getTime();
    19.    
  19.     
    20.    
  20.              if (date1 < date2) {
    21.    
  21.                 return -1;
    22.    
  22.              } else if (date1 === date2) {
    23.    
  23.                 return 0;
    24.    
  24.              } else {
    25.    
  25.                 return 1;
    26.    
  26.              }
    27.    
  27.           });
    28.    
  28.        }
    29.    
  29.     };

对象 App包含了三个方法：max、isOdd和sortObj。 sortObj()接受一个数组对象，理想情况下，该数组对象应该有一个 timestamp属性，并基于该属性进行排序。

为了测试这三个方法，一个可能测试集如下：

  
       
  1.     QUnit.test('max', function (assert) {
    2.    
  2.         assert.strictEqual(App.max(), -Infinity, 'No parameters');
    3.    
  3.         assert.strictEqual(App.max(3, 1, 2), 3, 'All positive numbers');
    4.    
  4.         assert.strictEqual(App.max(-10, 5, 3, 99), 99, 'Positive and negative numbers');
    5.    
  5.         assert.strictEqual(App.max(-14, -22, -5), -5, 'All positive numbers');
    6.    
  6.     });
    7.    
  7.     
    8.    
  8.     QUnit.test('isOdd', function (assert) {
    9.    
  9.         assert.ok(App.isOdd(5), '5 is odd');
    10.    
  10.         assert.ok(!App.isOdd(2), '5 is not odd');
    11.    
  11.         assert.ok(!App.isOdd(0), '0 is not odd');
    12.    
  12.         assert.throws(function () {
    13.    
  13.             App.isOdd(null);
    14.    
  14.         },
    15.    
  15.             /The given argument is not a number/,
    16.    
  16.             'Passing null raises an Error');
    17.    
  17.         assert.throws(function () {
    18.    
  18.             App.isOdd([]);
    19.    
  19.         },
    20.    
  20.         new Error('The given argument is not a number'),
    21.    
  21.             'Passing an array raises an Error');
    22.    
  22.     });
    23.    
  23.     
    24.    
  24.     
    25.    
  25.     QUnit.test('sortObj', function (assert) {
    26.    
  26.         var timestamp = Date.now();
    27.    
  27.     
    28.    
  28.         var array = [{
    29.    
  29.             id: 1,
    30.    
  30.             timestamp: timestamp
    31.    
  31.         }, {
    32.    
  32.             id: 3,
    33.    
  33.             timestamp: timestamp + 1000
    34.    
  34.         }, {
    35.    
  35.             id: 11,
    36.    
  36.             timestamp: timestamp - 1000
    37.    
  37.         }];
    38.    
  38.     
    39.    
  39.         App.sortObj(array);
    40.    
  40.     
    41.    
  41.         assert.propEqual(array, [{
    42.    
  42.             id: 11,
    43.    
  43.             timestamp: timestamp - 1000
    44.    
  44.         }, {
    45.    
  45.             id: 1,
    46.    
  46.             timestamp: timestamp
    47.    
  47.         }, {
    48.    
  48.             id: 3,
    49.    
  49.             timestamp: timestamp + 1000
    50.    
  50.         }]);
    51.    
  51.         assert.notPropEqual(App.sortObj(array), array, 'sortObj() does not return an array');
    52.    
  52.         assert.strictEqual(App.sortObj(array), undefined, 'sortObj() returns
    53.    
  53.     });

测试结果如下：

完整地列表戳此： Assert

Module

在DOM操作中，如果清除多于重置，我们可以将其作为测试的一部分。如果有多个测试需要做同样地清除工作，可以用 module()进行重构。 module()最初是为分组测试设计的，例如，多个测试都测试一个特殊的方法，该方法就可以作为单个模块的一部分。为了让测试更加颗粒化，我们可以使用 module()提供的 setup和 teardown回调。

  
       
  1.     module("core", { 
    2.    
  2.         setup: function() { 
    3.    
  3.             // runs before each test 
    4.    
  4.         }, 
    5.    
  5.         teardown: function() { 
    6.    
  6.             // runs after each test 
    7.    
  7.         } 
    8.    
  8.     }); 
    9.    
  9.     test("basics", function() { 
    10.    
  10.         // test something 
    11.    
  11.     });

setup会在 test之前运行，而 teardown则在 test之后运行。
我们可以使用这些回调创建对象并在测试中使用，而无需依靠闭包（或全局变量）传给测试。之所以会起作用，是因为 setup和 teardown以及真实的测试都在一个自定义的可以自动共享和清除的作用域中调用。

下面是一个用于处理货币值的简单demo(不完整)：

  
       
  1.     var Money = function(options) { 
    2.    
  2.         this.amount = options.amount || 0; 
    3.    
  3.         this.template = options.template || "{symbol}{amount}"; 
    4.    
  4.         this.symbol = options.symbol || "$"; 
    5.    
  5.     }; 
    6.    
  6.     Money.prototype = { 
    7.    
  7.         add: function(toAdd) { 
    8.    
  8.             this.amount += toAdd; 
    9.    
  9.         }, 
    10.    
  10.         toString: function() { 
    11.    
  11.             return this.template 
    12.    
  12.                 .replace("{symbol}", this.symbol) 
    13.    
  13.                 .replace("{amount}", this.amount) 
    14.    
  14.         } 
    15.    
  15.     }; 
    16.    
  16.     Money.euro = function(amount) { 
    17.    
  17.         return new Money({ 
    18.    
  18.             amount: amount, 
    19.    
  19.             template: "{amount} {symbol}", 
    20.    
  20.             symbol: "EUR" 
    21.    
  21.         }); 
    22.    
  22.     };

上面的代码创建了Money对象，还有一个为创建美元(dollars)而提供的默认构造函数，为创建欧元(euros)而提供的工厂方法以及两个用于操作和打印的方法。在测试中，不是为每一个单元测试创建Money对象，而是使用 setup回调创建对象并存储在测试作用域中。

  
       
  1.     module("Money", { 
    2.    
  2.         setup: function() { 
    3.    
  3.             this.dollar = new Money({ 
    4.    
  4.                 amount: 15.5 
    5.    
  5.             }); 
    6.    
  6.             this.euro = Money.euro(14.5); 
    7.    
  7.         }, 
    8.    
  8.         teardown: function() { 
    9.    
  9.             // could use this.dollar and this.euro for cleanup 
    10.    
  10.         } 
    11.    
  11.     }); 
    12.    
  12.     
    13.    
  13.     test("add", function() { 
    14.    
  14.         equal( this.dollar.amount, 15.5 ); 
    15.    
  15.         this.dollar.add(16.1) 
    16.    
  16.         equal( this.dollar.amount, 31.6 ); 
    17.    
  17.     }); 
    18.    
  18.     test("toString", function() { 
    19.    
  19.         equal( this.dollar.toString(), "$15.5" ); 
    20.    
  20.         equal( this.euro.toString(), "14.5 EUR" ); 
    21.    
  21.     });

上代码中， setup回调中创建了两个对象，名叫”add”的测试之使用了一个，”toString”这个测试两个对象都使用了。本例中， teardown回调没必要使用，因为没必要要移除已经创建的Money对象。结果如下截图：

Testing asynchronous code

可以看到，只要代码是同步的，Qunit就能控制什么时候运行测试代码。然而，一旦测试的代码需要使用异步回调（如 setTimeout或 Ajax请求），你需要给QUnit反馈，以便停止后面的测试，知道你让它再次运行。

利用 stop()和 start()就能实现Qunit反馈，进行异步测试。看demo:

  
       
  1.     test("async", function() { 
    2.    
  2.         stop(); 
    3.    
  3.         $.getJSON("resource", function(result) { 
    4.    
  4.             deepEqual(result, { 
    5.    
  5.                 status: "ok" 
    6.    
  6.             }); 
    7.    
  7.             start(); 
    8.    
  8.         }); 
    9.    
  9.     });

$.getJSON会去请求”resource”数据，然后判断比较结果。因为 $.getJSON是异步请求，先调用 stop()，随后运行代码，再在 callback结束的时候调用 start(), 告诉QUnit继续运行。

运行异步代码没有调用 stop()，让Qunit停止运行，则会导致本意是其他测试的任意结果，如passed或failed。

正如前文说到得， asyncTest可以代替 test用于异步测试，并且不用调用 stop:

  
       
  1.     asyncTest("async2", function() { 
    2.    
  2.         $.getJSON("resource", function(result) { 
    3.    
  3.             deepEqual(result, { 
    4.    
  4.                 status: "ok" 
    5.    
  5.             }); 
    6.    
  6.             start(); 
    7.    
  7.         }); 
    8.    
  8.     });

如果测试的结束点多个-多个回调的顺序随机-我们可以使用QUnit内置信号。调用 stop()与之后调用的 start()同数目，则Qunit会继续运行直到 stop()增加的计数被 start()减少会0.

  
       
  1.     test("async semaphore", function() {
    2.    
  2.         stop();
    3.    
  3.         stop();
    4.    
  4.         $.getJSON("resource", function(result) {
    5.    
  5.             equal(result.status, "ok");
    6.    
  6.             start();
    7.    
  7.         });
    8.    
  8.         $.getJSON("resource", function(result) {
    9.    
  9.             equal(result.status, "ok");
    10.    
  10.             start();
    11.    
  11.         });
    12.    
  12.     });

Setting Expectations

测试回调的时候，无论是不是异步，我们都不能确定回调会在某些时候被真正调用了。因而，最好的实践是设置一个我们期望的判断个数，这样一来，若一个或多个断言没有被执行，测试就会失败。Qunit提供了 expect()方法来达到这个目的。

  
       
  1.     expect(assertionsNumber)

了解了这个概念后，之前针对App字面量对象的测试可以写成这样：

  
       
  1.     QUnit.test('max', function(assert) {
    2.    
  2.        expect(4);
    3.    
  3.     
    4.    
  4.        // Assertions here...
    5.    
  5.     });
    6.    
  6.     
    7.    
  7.     QUnit.test('isOdd', function(assert) {
    8.    
  8.        expect(5);
    9.    
  9.     
    10.    
  10.        // Assertions here...
    11.    
  11.     });
    12.    
  12.     
    13.    
  13.     QUnit.test('sortObj', function(assert) {
    14.    
  14.        expect(3);
    15.    
  15.     
    16.    
  16.        // Assertions here...
    17.    
  17.     });

戳此看 demo
expect()貌似有个取巧的设置方法，就是给 test()或 asyncTest()的第二个参数传递一个数字:

  
       
  1.     asyncTest("async4", 1, function() {
    2.    
  2.         $.getJSON("resource", function(result) {
    3.    
  3.             deepEqual(result, {
    4.    
  4.                 status: "ok"
    5.    
  5.             });
    6.    
  6.             start();
    7.    
  7.         });
    8.    
  8.     });

相关文章：
Qunit VS jasmine VS mocha
Automating JavaScript Testing with QUnit
Getting Started with QUnit
QUnit API
边译边学-QUnit下的JavaScript自动化单元测试

淡忘~浅思猜你喜欢

Ubuntu下安装XAMPP
【译】CSS：7个你可能不认识的单位
Linux与Windows的8个不同
画图解释 SQL join 语句
一点思考和新学年目标
无觅

转载请注明： 淡忘~浅思 » Qunit初探

相关 [qunit] 推荐：

Qunit初探

- - 淡忘~浅思
2008年5月， Qunit 随JQuery的核心库一起发布，在2009年重构之后，Qunit独立出来，可以用于测试各种Javascript应用和框架，其提供的断言方法遵循了CommonJS维护规范. 尽管Qunit能再服务端和命令行运行，但是其主要还是用于测试浏览器端的Javascript. 先看一个简单地测试demo:.