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导致网页中GIF动画停止的解决方法
Nov 02 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
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之第三天
2006/10/09 PHP
php google或baidu分页代码
2009/11/26 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
js获取单选按钮的数据
2006/11/27 Javascript
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
windows下python安装小白入门教程
2018/09/18 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python作用域与名字空间原理详解
2020/03/21 Python
python如何安装下载后的模块
2020/07/03 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
反邪教警示教育方案
2014/05/13 职场文书
2015年酒店工作总结
2015/04/28 职场文书
女性励志书籍推荐
2019/08/19 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
python 制作一个gui界面的翻译工具
2021/05/14 Python
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS