使用QUnit测试JavaScript

本章的主要内容：

1.如何在项目中配置QUnit测试框架

2.组织单元测试以提高覆盖率和可维护性

3.QUnit中不同类型的测试

4.确保有效测试的最佳实践

5.QUnit之外的其他测试

一：如何在项目中配置QUnit测试框架

1.下载QUnit
可以在官方网站下载QUnit框架，地址：http://qunitjs.com/。网站上有稳定版和开发版可供下载。这两个版本除JavaScript文件之外，都包含一个用于格式化输出的样式表。
2.设置文档
下载QUnit文件之后，设置HTML测试文档。一般，这个文件是index.html，把它与qunit.js和qunit.css放在一个文件中。index.html文件中在head标签中用link标签引入css文件，用script标签引入jQuery、QUnit、以及要测试的js文件。body标签中可以放几个div，用来显示测试的结果。
3.组织测试
QUnit提供两个级别的分组，分别以他们的函数调用命名：module()和test()。其中，module类似于通用的类别，测试将在该类别下进行。而test实际上是一组接收回调函数的测试，在这些回调函数中运行相应测试的特定单元测试。代码放在一个js文件中，如test.js。

module('Selecting');
test('Child Selector',function() {
    ok(true,'Placeholder is entered');
});
test('Attribute Selectors',function() {
    ok(true,'Placeholder is entered');
});
module('Ajax');

代码中每个测试中都加入了一个断言占位语句，即便有一个断言测试失败，QUnit都会抛出错误。因为QUnit默认会在文档加载完成之后才会运行，所以测试模块都不需要放在ready方法中。
4.添加和运行测试
在测试驱动的开发中，需要在代码编写之前编写测试。这样一来，在看到测试失败之后，开始添加新的代码，然后再让测试通过，验证新代码实现了应有的功能。

test('Child Selector',function() {
    expect(1);
    var topLis = $('#selected-plays > li.horizontal');
    equal(topLis.length,3,'Top LIs have horizontal class');
});

这里实际加入两个测试。第一个是expect()测试，它告诉QUnit我们想在这个测试集中运行多少个测试。然后，因为我们想要测试在页面中选择元素的能力，所以使用equal()测试来比较顶级li元素与数值3。如果这两个值相等，测试通过且通过的次数会加1。显示的结果是失败，因为，html结构中没有为li元素添加horizontal类。添加之后，测试结果可以看到Select:Child Selector测试在括号里显示数字0,1,1，表示没有失败，总共1个测试。
下面我们再添加两个对属性选择符的测试：

module('Selecting',{
    setup:function(){
        this.topLis = $('#selected-plays > li.horizontal');
    }
});
test('Child Selector',function() {
    expect(1);
    equal(this.topLis.length,3,'Top LIs have horizontal class');
});
test('Attrbuite Selectors',function() {
    expect(2);
    ok(this.topLis.find('.mailto').length == 1,'a.mailto');
    equal(this.topLis.length,1,'a.pdflink');
});

这里又引入另一种测试方法：ok()。这个测试接收两个参数：一个应该被求值为true的表达式和一个描述。同样，注意我们已经把topLis变量移到了模块的setup()回调函数中。module()接收可选的第二参数，这个参数是一个对象，可以包含setup()和teardown()函数。在这两个函数中。可以使用this关键字为模块中的所有测试一次性地指定变量。结果是失败的，但是ok()测试equal()测试时输出不同，前者只显示测试的标签(a.mailto)和来源，后者还会详细列出期待结果。鉴于equal()比ok()提供的测试失败的细节更多，因此应该优先使用equal()函数。添加属性和class类之后，测试通过。

二.组织单元测试以提高覆盖率和可维护性

1.异步测试：
测试异步JavaScript，比如Ajax请求，核心在于当异步请求开始时，测试必须暂停；而当异步请求完成时，测试必须恢复。在QUnit中，我们要使用一个特殊的测试集。它的名字叫asyanctest()。这个测试集与常规的test()测试集很相似；不同的是，在我们调用一个特殊的函数恢复它们之前，它们会暂停运行。

asyancTest('JSON',function() {
    $.getJSON('b.json',function(json,textStatus){
        //在这里添加代码
    }).always(function(){
        start();
    });
});

这只是简单的请求了b.json文件中的JSON数据，并在请求完成之后（无论成功还是失败），继续进行测试.在实际的测试中，需要检测testStatus以确定请求成功，然后向下面这样来检测响应的JSON数组中的同一个对象的值：

asyancTest('JSON',function(){
    expect(2);
    var backbite = {
        "term" : "BACKBITE",
        "part" : "v.t.",
        "definition" : "To speak of a man as you find him when he can't find you."
    };
    $.getJSON('b.json',function(json,textStatus){
        equal(textStatus,'success','Request successful');
        deepEqual(json[1],backbite,'result array matches "backbite" map');
    }).always(function(){
        start();
    });
});

为了测试响应值，这里又使用了一个函数：deepEqual()。正常情况之下，在比较两个对象时，除非它们引用的是相同的内存地址，否则不会判定它们相等。但如果我们想比较的是他们的内容，那么使用deepEqual()很合适。这个函数会遍历两个对象，确保它们拥有相同的属性，而且每个属性都有相同的值。

三.其他测试类型

QUnit也提供了其他一些测试函数，有一些函数，比如notEqual()和notDeepEqual()只不过是我们用过的函数的逆运算，而另外一些函数，比如strictEqual()和throw()则具有更加特定的用途。有关这些函数的更多信息，以及有关QUnit的更多细节和示例，请参考QUnit网站(http://qunitjs.com)以及QUnit API网站(http://api.qunitjs.com)。

四.确保有效测试的最佳实践

在实际测试过程中，我们可能需要编写测试代码来测试非常的复杂的功能代码，理想情况下，应该尽量保持测试代码的简洁，但是测试过程中还是会出现错误，这时我们不要急于修复错误的代码，而是要再次编写一个新的测试，再次进行测试，这样不仅可以验证修复代码之后是否解决了问题，而且也添加了一个可以将来避免回归的测试。除了单元测试之外，QUnit还可以进行功能测试。单元测试主要是为了验证代码单元（方法和函数）的操作是否正确，而功能测试是为了用户输入能够在界面上得到响应。

五.QUnit之外的其他测试

可以将dominator.js(http://mwbrooks.github.io/dominator.js/)和FuncUnit(http://funcnit.com/)等功能测试框架与QUnit一起使用，从而简化编写功能测试和模拟事件的工作。如果想在不同浏览器中实现自动化测试，可以再选择Selenium(http://seleniumhq.org)等专用的功能测试框架。