Javascript单元测试框架QUnitjs详细介绍


Posted in Javascript onMay 08, 2014

一、什么是 QUnit

QUnit(http://qunitjs.com/) 是一个非常强大的javascript单元测试框架,可以帮你调试代码。它是由 jQuery 团队的成员写的,而且是 jQuery 的官方测试套装。但QUnit一般是足以测试任何常规 javascript 代码,它甚至可能通过一些 javascript 引擎比如 Rhino 或 V8 来测试服务器端 JavaScript。
如果你不熟悉“单元测试”的概念,请不要担心。这不是很难理解的:

在计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类、或者派生类(子类)中的方法。 — 引自维基百科。

简单地说,你为你的代码的每个功能写测试,如果所有这些测试都通过了,那么你可以肯定的是,代码没有缺陷(通常,还是由你的测试有多彻底而定)。

二、为什么你要测试你的代码

如果你以前从未写过任何单元测试,你可能直接将你的代码上到网站上,点击一会看看是否有什么问题出现,并且尝试去解决你所发现的问题,采用这种方法会有很多的问题。
首先,这是很腻烦的。点击事实上并不是一件轻松的工作,因为你不得不确保每样东西都被点到而且很有可能你错过了一个或两个。

其次,你为测试做的每件事情是不能复用的,这意味着它很难回归。什么是回归?想像一下你写了一些代码并测试,修复了所有你发现的缺陷,然后发布。此时,一个 用户发送了一些关于新缺陷的反馈,并且需要一些新功能。你返回到代码中,修复这些新缺陷并增加新功能。接下来可能会发生的就是一些旧的缺陷又重现了,这就 叫“回归”。看,现在你还得再去点击一遍,而且有可能你还找不到这些旧的担担缺陷;即使你这么做,这还需要一段时间才能弄清楚你的问题是由回归引起的。使用单元测试,你写测试去发现缺陷,一旦代码被修改,您通过测试再筛选一次。如果回归出现,一些测试一定会失败,你可以很容易地认出他们,知道哪部分代码包含了错误。既然你知道你刚才修改了什么,就可以很容易地解决。

另外一个单元测试的优点,尤其是对于web开发来说: 它使跨浏览器兼容性测试很容易。仅仅在不同浏览器中运行你的测试案例就行,如果一个浏览器出现问题,你修复它并重新运行这些测试案例,确保不会在别的浏览器引起回归,一旦全部通过测试,你可以肯定的说,所有的目标浏览器都支持。

我想提及一个 John Resig 的项目:TestSwarm(http://testswarm.com/)。 它将 Javascript 单元测试带到了一个新的层次,通过使其分布,这是一个网站,其中包含很多测试案例,任何人都可以去那运行一些测试案例,然后返回结果会返回到服务器。通过这种方式,代码会非常迅速的在不同的浏览器进行测试,甚至不同的平台运行。

三、如何用 QUnit 写单元测试

那么,你如何正确地用QUnit写单元测试呢?首先,您需要设置一个测试环境:

<!DOCTYPE html>
<html>
<head>
    <title>QUnit Test Suite</title>
    <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">
    <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
    <!-- Your project file goes here -->
    <script type="text/javascript" src="myProject.js"></script>
    <!-- Your tests file goes here -->
    <script type="text/javascript" src="myTests.js"></script>
</head>
<body>
    <h1 id="qunit-header">QUnit Test Suite</h1>
    <h2 id="qunit-banner"></h2>
    <div id="qunit-testrunner-toolbar"></div>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
</body>
</html>

正如你所见,在这里使用了一个被托管的QUnit框架版本。
将要被测试的代码已被添加到 myProject.js 中,而且你的测试应该插入到 myTest.js 。要运行这些测试,只需在一个浏览器中打开这个 HTML 文件。现在到了写些测试的时间了。
单元测试的基石是断言:

断言是一个命题,预测你的代码的返回结果。如果预测是假的,断言失败,你就知道出了问题。

运行断言,你应该把它们放入测试案例:

// Let's test this function
function isEven(val) {
    return val % 2 === 0;
}
test('isEven()', function() {
    ok(isEven(0), 'Zero is an even number');
    ok(isEven(2), 'So is two');
    ok(isEven(-4), 'So is negative four');
    ok(!isEven(1), 'One is not an even number');
    ok(!isEven(-7), 'Neither is negative seven');
})

这里我们定义一个函数:isEven,用来检测一个数字是否为奇数,并且我们希望测试这个函数来确认它不会返回错误答案。
我们首先调用 test(),它构建了一个测试案例;第一个参数是一个将被显示在结果中的字符串,第二个参数是包括我们断主的一个回调函数。
我们写了5个断言,所有的都是布尔型的。一个布尔型的断言,期望它的第一个参数为true。第二个参数依然是要显示在结果中的消息。
这里是你想要得到的,只要你运行测试:

Javascript单元测试框架QUnitjs详细介绍

四、深入学习参考

以上只简单的介绍了 qunit.js ,其断言方法还有很多,具体可参考 api 文档:
http://api.qunitjs.com/
单元测试是一个在你发布你的代码前测试你的代码的非常好的方法。如果你以前没有写过任何的单元测试,现在是时候开始了!

Javascript 相关文章推荐
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
javascript与有限状态机详解
May 08 #Javascript
ajax提交表单实现网页无刷新注册示例
May 08 #Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 #Javascript
js动态删除div元素基本思路及实现代码
May 08 #Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 #Javascript
jquery查找tr td 示例模拟
May 08 #Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 #Javascript
You might like
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
PHP分享图片的生成方法
2018/04/25 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
Python检测网络延迟的代码
2018/05/15 Python
python实现录音小程序
2020/10/26 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
小学教师管理制度
2014/01/18 职场文书
医院总经理岗位职责
2014/02/04 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
学校国庆节活动总结
2015/03/23 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers