如何用Qunit测试你的javascript代码.docx

正如你所见，在这里使用了一个被托管的QUnit框架版本。

将要被测试的代码需要添加到myProject.js中，并且你的测试用例应该插入到myTest.js。

要运行这些测试，只需在一个浏览器中打开这个html文件。

现在需要写一些测试用例了。

单元测试的基石是断言。

“断言是一个命题，预测你的代码的返回结果。

如果预测是假的，断言失败，你就知道出了问题。

”

运行断言，需要把它们放入测试用例中：

//Let'stestthisfunction，用于被测试的Javascript代码放在myProject.js文件中

functionisEven（val）{

returnval%2===0;

}

//所编写的测试用例代码放在myTests.js文件中

test（'isEven（）',function（）{

ok（isEven（0）,'Zeroisanevennumber'）;

ok（isEven

（2）,'Soistwo'）;

ok（isEven（-4）,'Soisnegativefour'）;

ok（!

isEven

（1）,'Oneisnotanevennumber'）;

ok（!

isEven（-7）,'Neitherisnegativeseven'）;

}）

注：

也可将所要测试的代码与测试用例放在同一个js文件中

这里，我们定义一个函数：

isEven，用来检测一个数字是否为奇数，并且我们希望测试这个函数来确认它不会返回错误答案。

我们首先调用test（），它构建了一个测试用例；第一个参数是一个将被显示在结果中的字符串，第二个参数是包括我们断主的一个回调函数。

我们写了5个断言，所有的都是布尔型的。

一个布尔型的断言，期望它的第一个参数为true。

第二个参数依然是要显示在结果中的消息。

下面是你想要得到的，只要你运行测试用例：

由于所有的断言都已成功通过，我们可以高兴的认为isEven（）工作正常。

让我们看看如果一个断言失败了会发生什么。

//Let'stestthisfunction

functionisEven（val）{

returnval%2===0;

}

test（'isEven（）',function（）{

ok（isEven（0）,'Zeroisanevennumber'）;

ok（isEven

（2）,'Soistwo'）;

ok（isEven（-4）,'Soisnegativefour'）;

ok（!

isEven

（1）,'Oneisnotanevennumber'）;

ok（!

isEven（-7）,'Neitherdoesnegativeseven'）;

//Fails

ok（isEven（3）,'Threeisanevennumber'）;

}）

下面是结果：

该断言失败因为我们故意把它写错，但是在你的项目中，如果测试未通过，并且所有的断言都是正确的，你将发现一个bug。

更多断言

ok（）不仅是QUnit提供的唯一断言，当在测试你的项目时，还会有一些非常有用的其他类型的断言:

比较断言 

比较断言，equals（），期望它的第一个参数（是实际值）等于它的第二个参数（期望值）。

它很类似于ok（），但均会输入实现和期望值，使得高度更加简单，像ok（）一样，它可带一个可选的第三个参数作为显示的消息。

所以可以代替：

test（'assertions',function（）{

ok（1==1,'oneequalsone'）;

}）

你可以这样写：

test（'assertions',function（）{

equals（1,1,'oneequalsone'）;

}）

注意最后一个“1”，这是比较值

如果两个值不相等：

test（'assertions',function（）{

equals（2,1,'oneequalsone'）;

}）

提供更多些信息，让生活更简单些。

比较断言使用“==”来比较它的参数，所以它不能处理数组或对象的比较：

test（'test',function（）{

equals（{},{},'fails,thesearedifferentobjects'）;

equals（{a:

1},{a:

1},'fails'）;

equals（[],[],'fails,therearedifferentarrays'）;

equals（[1],[1],'fails'）;

}）

为了测试这种相等，QUnit提供了另外一种断言：

 恒等断言 。

恒等断言 

恒等断言，same（），期望相同的参数相等，但是它较深的采用递归比较断言，不仅作用于原始类型，而且包括数组和对象。

断言，在前面的例子中，如果你把他们改成恒等断言将全部通过。

test（'test',function（）{

same（{},{},'passes,objectshavethesamecontent'）;

same（{a:

1},{a:

1},'passes'）;

same（[],[],'passes,arrayshavethesamecontent'）;

same（[1],[1],'passes'）;

}）

注意same（）使用”===”去比较，如有必要的话，所以它在比较特殊值的时候就派上用场了。

test（'test',function（）{

equals（0,false,'true'）;

same（0,false,'false'）;

equals（null,undefined,'true'）;

same（null,undefined,'false'）;

}）

结构化你的断言 

把所有的断言放在一个单独的测试案例中是相当不好的想法，因为这很难去维护，并且不能返回一个纯净的结果。

你需要做的就是结构化他们，把他们放在不同的测试案例，每个目标为一个单独功能。

甚至可以通过调用模块函数来把测试案例组织到不同的模块：

module（'ModuleA'）;

test（'atest',function（）{}）;

test（'ananothertest',function（）{}）;

module（'ModuleB'）;

test（'atest',function（）{}）;

test（'ananothertest',function（）{}）;

异步测试 

在前面的示例中，所有的断言都是同步调用的，这意味着他们是一个接着一个运行的。

在这个真实的世界，同样存在着很多异步的函数，例如Ajax请求或通过setTimeout（）或sestInterval（）调用的方法。

我们如何去测试这些种类的方法呢？

QUnit提供了一个特殊的叫做和“异步测试”的测试案例，提供给异步的测试：

让我们首先尝试用常规的方法写：

test（'asynchronoustest',function（）{

setTimeout（function（）{

ok（true）;

},100）

}）

看到了？

这就好像我们没有写任何断言一样。

这是因为断言是被异步执行的，到它被调用的时候，此次测试已经执行完成。

这是正确的版本：

test（'asynchronoustest',function（）{

//Pausethetestfirst

stop（）;

setTimeout（function（）{

ok（true）;

//Aftertheassertionhasbeencalled,

//continuethetest

start（）;

},100）

}）

在这，我们使用了stop（）去暂停此次测试案例，并且在断言被调用以后，我们使用start（）继续。

在调用完test（）后立即调用stop（）是很平常的；所以QUnit提供了一个捷径：

asyncTest（）。

你可以像这样重写之前的示例：

asyncTest（'asynchronoustest',function（）{

//Thetestisautomaticallypaused

setTimeout（function（）{

ok（true）;

//Aftertheassertionhasbeencalled,

//continuethetest

start（）;

},100）

}）

还有一点要注意：

setTimeout（）通常会调用它自己的回调函数，但如果它是一个自定义的函数（例如：

一个Ajax调用）。

你如何确认回调函数被调用了呢？

并且如果回调函数没有被调用，start（）将不会被执行，整个单元测试将被挂起：

所以这就是你需要做的：

//Acustomfunction

functionajax（successCallback）{

$.ajax（{

url:

'server.php',

success:

successCallback

}）;

}

test（'asynchronoustest',function（）{

//Pausethetest,andfailitifstart（）isn'tcalledafteronesecond

stop（1000）;

ajax（function（）{

//...asynchronousassertions

start（）;

}）

}）

你可以通过延时去stop（），它告知QUnit，“如果start（）在延时后没有被调用，你应未通过测试”。

你可以确认的是整个测试没有挂起而且如果哪里出了问题你可以注意到。

那么多个异步函数呢？

你在哪里放置start（）？

可把它放在setTimeout（）里：

//Acustomfunction

functionajax（successCallback）{

$.ajax（{

url:

'server.php',

success:

successCallback

}）;

}

test（'asynchronoustest',function（）{

//Pausethetest

stop（）;

ajax（function（）{

//...asynchronousassertions

}）

ajax（function（）{

//...asynchronousassertions

}）

setTimeout（function（）{

start（）;

},2000）;

}）

延时应该适当的长足够来允许二者的回调函数在测试继续执行前被调用。

但是如果其中一个回调函数没有被调用怎么办？

你怎样去知道？

这就是expect（）加入的原因：

//Acustomfunction

functionajax（successCallback）{

$.ajax（{

url:

'server.php',

success:

successCallback

}）;

}

test（'asynchronoustest',function（）{

//Pausethetest

stop（）;

//TellQUnitthatyouexpectthreeassertionstorun

expect（3）;

ajax（function（）{

ok（true）;

}）

ajax（function（）{

ok（true）;

ok（true）;

}）

setTimeout（function（）{

start（）;

},2000）;

}）

你给expect（）传一个数字告知QUnit你期望X个断言去执行，如果一个断言未被执行，这个数字将不会匹配，而且你瘵会注意到有些东西出错了。

这仍有一个expect（）的捷径：

你只需给test（）或asyncTest（）的第二个参数传递一个数字：

//Acustomfunction

functionajax（successCallback）{

$.ajax（{

url:

'server.php',

success:

successCallback

}）;

}

//TellQUnitthatyouexpectthreeassertiontorun

test（'asynchronoustest',3,function（）{

//Pausethetest

stop（）;

ajax（function（）{

ok（true）;

}）

ajax（function（）{

ok（true）;

ok（true）;

}）

setTimeout（function（）{

start（）;

},2000）;

}）