单元测试，使用Qunit测试你的javascript代码
2016-01-11 11:17
1186 查看
一、What is QUnit?
Qunit是一款强大的可用来测试代码的javaScript单元测试框架。QUnit由jQuery团队成员编写，是jQuery的官方测试套件，不仅如此，QUnit还可以测试任何常规javaScript代码，甚至可以通过一些像Rhino或者V8这样的JavaScript引擎，测试服务端JavaScript代码。如果你不熟悉“单元测试”的相关概念，Don’t worry。其实并不难理解：
| “在计算机编程中，单元测试（又称为模块测试）是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类（超类）、抽象类、或者派生类（子类）中的方法。” ——引自维基百科。 |
二、Why You Should Test Your Code?
如果你以前从未写过任何单元测试，你可能直接将你的代码应用到网站上，点击一会看看是否有什么问题出现，并且尝试去解决你所发现的问题，采用这种方法会有很多的问题。1.点击测试的缺点：
1)这个过程是非常乏味的。
点击其实并不是一项简单的工作，因为需要保证每一个东西都被点击到而且极有可能漏掉一两个。
2)为测试做的每一件事情都是不可重用的，这就意味着它很难回归。
什么是回归？想像一下，你写了一些代码并测试他们，修复了所有你发现的缺陷，然后发布。这时，一个用户发过来一些关于新的bug的反馈，并且有一些新的需求。你又回到代码中，处理这些新的bug，并增加新的功能。接下来可能会发生的就是一些旧的缺陷又重现了，这就叫“回归”。这样，你就不得不重新点击一遍，而且有可能你还找不到这些旧的缺陷；即使你这么做，这还需要一段时间才能弄清楚你的问题是由回归引起的。
2.单元测试的优点：
1)使用单元测试，你写测试用例去发现缺陷，一旦代码被修改，您通过测试再筛选一次。一旦出现回归，一些测试用例一定会失败，你可以很容易地认出他们，知道哪部分代码包含了错误。既然你知道你刚才修改了什么，就可以很容易地解决问题。
2)单元测试让跨浏览器兼容性测试变得更容易。
仅仅在不同浏览器中运行你的测试用例，一旦某个浏览器出现问题，修复它并重新运行这些测试用例，确保不会在别的浏览器引起回归，一旦全部通过测试，就可以肯定的说，所有的目标浏览器都支持。
我喜欢提及一个John Resig的项目：TestSwarm。TestSwarm通过分发，将JavaScript单元测试带到了一个新的层次。这是一个包含很多测试用例的网站，任何人都可以去那运行一些测试用例，然后返回结果会返回到服务器。通过这种方式，代码会非常迅速的在不同的浏览器进行测试，甚至不同的平台运行。
三、How to Write Unit Tests with QUnit?
1.您需要搭建一个测试环境：<span style="font-size:14px;">01 <!DOCTYPE html> 02 <html> 03 <head> 04 <meta charset="utf-8"> 05 <title>My Qunit Test</title> 06 <meta name="description" content=""> 07 <meta name="keywords" content=""> 08 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 09 <link rel="stylesheet" href="qunit-1.14.0.css" /> 10 </head> 11 <body> 12 <div id="qunit"></div> 13 <div id="qunit-fixture"></div> 14 <script src="qunit-1.14.0.js"></script> 15 16 <!-- My project js file --> 17 <script src="myproject.js"></script> 18 19 <!-- Test js file --> 20 <script src="mytest.js"></script> 21 22 </body> 23 </html></span>
我这里是把qunit-1.14.0.css，qunit-1.14.0.js下载到了本地，当然也可以直接使用CDN。
myproject.js文件中添加将要测试的代码，mytest.js文件中添加测试用例。要运行这些测试，只需在一个浏览器中打开这个html文件。现在需要写一些测试用例了。
2.断言是单元测试的基石。
何为断言？“断言是一个命题，预测你的代码的返回结果。如果预测是假的，断言失败，你就知道出了问题。”
运行断言，需要把它们放入测试用例中：
<span style="font-size:14px;">01 // Let's test this function
02 function isEven(val) {
03 return val % 2 === 0;
04 }
05
06 test('isEven()', function() {
07 ok(isEven(0), 'Zero is an even number');
08 ok(isEven(2), 'So is two');
09 ok(isEven(-4), 'So is negative four');
10 ok(!isEven(1), 'One is not an even number');
11 ok(!isEven(-7), 'Neither is negative seven');
12 })</span>这里，我们定义一个函数：isEven，用来检测一个数字是否为偶数，并且我们希望测试这个函数来确认它不会返回错误答案。
我们首先调用test()，它构建了一个测试用例；
第一个参数是一个将被显示在结果中的字符串;
第二个参数是包括我们断主的一个回调函数;
我们写了5个断言，所有的都是布尔型的。一个布尔型的断言，期望它的第一个参数为true。第二个参数依然是要显示在结果中的消息。
运行测试用例，得到如下结果：
由于所有的断言都已通过，我们可以高兴的认为isEven()如我们期望的一样工作正常。让我们看看如果一个断言失败了会发生什么。
<span style="font-size:14px;">01 // Let's test this function
02 funct
4000
ion isEven(val) {
03 return val % 2 === 0;
04 }
05
06 test('isEven()', function() {
07 ok(isEven(0), 'Zero is an even number');
08 ok(isEven(2), 'So is two');
09 ok(isEven(-4), 'So is negative four');
10 ok(!isEven(1), 'One is not an even number');
11 ok(!isEven(-7), 'Neither does negative seven');
12
13 // Fails
14 ok(isEven(3), 'Three is an even number');
15 })</span>运行测试用例，得到如下结果：
该断言失败因为我们故意把它写错，但是在你的项目中，如果测试未通过，并且所有的断言都是正确的，你将发现一个bug。
3.ok()不仅是QUnit提供的唯一断言
当在测试你的项目时，还会有一些非常有用的其他类型的断言:
1)比较断言equals()期望它的第一个参数（是实际值）等于它的第二个参数（期望值）。它很类似于ok()，但均会输入实现和期望值，使得高度更加简单，像ok()一样，它可带一个可选的第三个参数作为显示的消息。
<span style="font-size:14px;">1 test('assertions', function() {
2 ok( 1 == 1, 'one equals one');
3 })
替换为：
1 test('assertions', function() {
2 equals( 1, 1, 'one equals one');
3 })</span>比较断言使用“==”来比较它的参数，所以它不能处理数组或对象的比较，为处理这种情况，QUnit提供了另外一种断言：恒等断言。
2)恒等断言same()
期望相同的参数相等，但是它较深的采用递归比较断言，不仅作用于原始类型，而且包括数组和对象。
same()使用”===”去比较，如有必要的话，所以它在比较特殊值的时候就派上用场了。
3)结构化断言
把所有的断言放在一个单独的测试案例中是相当不好的想法，因为这很难去维护，并且不能返回一个纯净的结果。你需要做的就是结构化他们，把他们放在不同的测试案例，每个目标为一个单独功能。
甚至可以通过调用模块函数来把测试案例组织到不同的模块：
<span style="font-size:14px;">01 QUnit.module( "Module a" );
02 QUnit.test( "a basic test example", function( assert ) {
03 assert.ok( true, "this test is fine" );
04 });
05 QUnit.test( "a basic test example 2", function( assert ) {
06 assert.ok( true, "this test is fine" );
07 });
08
09 QUnit.module( "Module b" );
10 QUnit.test( "a basic test example 3", function( assert ) {
11 assert.ok( true, "this test is fine" );
12 });
13 QUnit.test( "a basic test example 4", function(assert) {
14 assert.ok( true, "this test is fine" );
15 });</span>4)异步测试
在前面的示例中，所有的断言都是同步调用的，这意味着他们是一个接着一个运行的。在这个真实的世界，同样存在着很多异步的函数，例如Ajax请求或通过setTimeout()或sestInterval()调用的方法。我们如何去测试这些种类的方法呢？QUnit提供了一个特殊的叫做和“异步测试”的测试案例，提供给异步的测试：
<span style="font-size:14px;">01 test('asynchronous test', function() {
02 // Pause the test first
03 stop();
04
05 setTimeout(function() {
06 ok(true);
07
08 // After the assertion has been called,
09 // continue the test
10 start();
11 }, 100)
12 })</span>在这，我们使用了stop()去暂停此次测试案例，并且在断言被调用以后，我们使用start()继续。
在调用完test()后立即调用stop()是很平常的；所以QUnit提供了一个捷径：asyncTest()。你可以像这样重写之前的示例：
<span style="font-size:14px;">01 asyncTest('asynchronous test', function() {
02 // The test is automatically paused
03
04 setTimeout(function() {
05 ok(true);
06
07 // After the assertion has been called,
08 // continue the test
09 start();
10 }, 100)
11 })</span>还有一点要注意：setTimeout()通常会调用它自己的回调函数，但如果它是一个自定义的函数（例如：一个Ajax调用）。你如何确认回调函数被调用了呢？并且如果回调函数没有被调用，start()将不会被执行，整个单元测试将被挂起：
<span style="font-size:14px;">01 // A custom function
02 function ajax(successCallback) {
03 $.ajax({
04 url: 'ajax.json',
05 success: successCallback
06 });
07 }
08
09 test('asynchronous test', function() {
10 // Pause the test, and fail it if start() isn't called after one second
11 stop(1000);
12
13 ajax(function() {
14 // ...asynchronous assertions
15
16 start();
17 })
18 })</span>你可以通过延时去stop()，它告知QUnit，“如果start()在延时后没有被调用，你应未通过测试”。你可以确认的是整个测试没有挂起而且如果哪里出了问题你可以注意到。
那么多个异步函数呢？你在哪里放置start()？可把它放在setTimeout()里：
<span style="font-size:14px;">01 // A custom function
02 function ajax(successCallback) {
03 $.ajax({
04 url: 'server.php',
05 success: successCallback
06 });
07 }
08
09 test('asynchronous test', function() {
10 // Pause the test
11 stop();
12
13 ajax(function() {
14 // ...asynchronous assertions
15 })
16
17 ajax(function() {
18 // ...asynchronous assertions
19 })
20
21 setTimeout(function() {
22 start();
23 }, 2000);
24 })</span>延时应该适当的长,足够来允许二者的回调函数在测试继续执行前被调用。但是如果其中一个回调函数没有被调用怎么办？你怎样去知道？这就是expect()加入的原因：
<span style="font-size:14px;">01 // A custom function
02 function ajax(successCallback) {
03 $.ajax({
04 url: 'server.php',
05 success: successCallback
06 });
07 }
08
09 test('asynchronous test', function() {
10 // Pause the test
11 stop();
12
13 // Tell QUnit that you expect three assertions to run
14 expect(3);
15
16 ajax(function() {
17 ok(true);
18 })
19
20 ajax(function() {
21 ok(true);
22 ok(true);
23 })
24
25 setTimeout(function() {
26 start();
27 }, 2000);
28 })</span>你给expect()传一个数字告知QUnit你期望X个断言去执行，如果一个断言未被执行，这个数字将不会匹配，而且你会注意到有些东西出错了。
这仍有一个expect()的捷径：你只需给test()或asyncTest()的第二个参数传递一个数字：
<span style="font-size:14px;">01 // A custom function
02 function ajax(successCallback) {
03 $.ajax({
04 url: 'server.php',
05 success: successCallback
06 });
07 }
08
09 // Tell QUnit that you expect three assertion to run
10 test('asynchronous test', 3, function() {
11 // Pause the test
12 stop();
13
14 ajax(function() {
15 ok(true);
16 })
17
18 ajax(function() {
19 ok(true);
20 ok(true);
21 })
22
23 setTimeout(function() {
24 start();
25 }, 2000);
26 })</span>四、参考链接
http://api.qunitjs.com/category/async-control/How to Test your JavaScript Code with QUnit
http://code.tutsplus.com/tutorials/how-to-test-your-javascript-code-with-qunit–net-9077
原文标题：Qunit：使用Qunit测试你的javascript代码
原文链接：http://www.zuojj.com/archives/458.html，转载请注明转自Benjamin-专注前端开发和用户体验
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android之使用Http协议实现文件上传功能
- mysql集群之MMM简单搭建
- 通晓网络测试常用命令
- Ruby单元测试框架TestUnit的替代者MiniTest介绍
- Nodejs学习笔记之测试驱动
- JQuery团队打造的javascript单元测试工具QUnit介绍
- Android学习笔记之应用单元测试实例分析
- 可以测试javascript运行效果的代码
- 使用php测试硬盘写入速度示例
- python 测试实现方法
- 举例详解PHP脚本的测试方法
- Php-Redis安装测试笔记
- 我的Node.js学习之路（四）--单元测试
- mysql压力测试脚本实例
- JavaScript 组件之旅（四）：测试 JavaScript 组件
- js简单网速测试方法完整实例
- Android编程单元测试实例详解(附源码)
- Android编程之单元测试实例分析
- Android应用开发中单元测试分析
- Android触屏测试实例代码