QUnit jQuery的TDD框架


Posted in Javascript onNovember 04, 2010

在讨论jQuery TDD之前,我们先来了解下什么才是一个标准的TDD框架。作为标准的TDD框架,必须满足这么几个要求:

1. 即使测试脚本出错了也要能继续运行接下来的脚本

2. 能够不依赖被测试代码写测试用例,即使代码没有实现也可以先写测试用例

3. 能够显示详细的错误信息和位置

4. 能够统计通过和未通过的用例的数量

5. 有专门的可视化界面用于统计和跟踪测试用例

6. 易于上手,通过一些简单的指导就可以马上开始写测试代码。

 

以上这些要求QUnit都做到了, 这也是我推荐QUnit的原因。

 

QUnit目前已经可以脱离jQuery独立运行,这也是它成功的另外一个原因,即兼容性好,其实严格意义上它已经不是一个jQuery的测试框架了,而是JavaScript测试框架。有意思的是你会发现QUnit的注释曾经发生过微小的变化,如下

QUnit jQuery的TDD框架

这也说明QUnit的代码是做过专门的调整,使之能脱离JQuery运行。

下载Qunit

下载qunit的代码可以去http://github.com/jquery/qunit,那里的代码是最新的。

 

如何使用QUnit

使用QUnit很简单,只需要下面这些html代码,初始的设置就完成了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>My Foo Tests</title>  
  <link href="qunit.css" type="text/css" rel="stylesheet"/>  
  <script language="javascript" src="jquery-1.4.2.js" type="text/javascript" />
  <script language="javascript" src="qunit.js" type="text/javascript"/>
</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不仅仅为你提供了测试脚本函数,还为你的单元测试提供了一个标准化的测试界面,如下图所示,红色的表示这个测试用例没有通过,绿色的表示通过。每一个框比表示一个测试函数,里面可能有多个断言语句的结果,标题中(x,y,z)表示总共有z个断言,y个是正确的,x个是错误的。

QUnit jQuery的TDD框架

刚才只是初步看了下界面,现在我们来学习如何使用,我从http://github.com/jquery/jquery/raw/master/test/unit/core.js下载了一个core.js的范例测试代码,这个是jQuery用来测试它的核心模块的代码。

在<head></head>中加入<script language="javascript" src="core.js" type="text/javascript"></script>,注意一定要在qunit.js声明后面,因为core.js中用到了qunit.js定义的函数。

这时你再运行刚才我们创建的html文件,你就会看到类似上图的结果,这就是core.js的测试结果,是不是一清二楚?如果是测试你自己的函数,你就可以根据红色的错误提示跟踪问题所在,直到把所有的测试结果都变成绿色。

测试脚本怎么写

测试脚本的写法,我建议你参考http://docs.jquery.com/Qunit#Reference_Test_Suites,这里面有提到一些测试用例的文件,你可以通过它们来研究怎么写测试用例,尽管有些测试用例已经跑不通了。

比较常用的函数有:

expect(amount) - 指定某个函数中会有多少个断言,通常写在测试函数开头。

module(name) - 模块是测试函数的集合,使用该函数可以在UI中将测试函数按模块归类。

ok(state, message) ? 布尔型断言,message是专门显示在QUnit界面上,用来区分不同的断言的

equals(actual, expected, message) - 相等断言,actual和expected的值相等时才能通过。

same(actual, expected, message) - 完全相等断言,和equals的区别在于它会比较子元素,对于数组和一些自定义对象的比较十分有用。

这些是最常用的,其他的大家可以自己参考Qunit官方文档。

 

第一个QUnit测试用例

假设我们写个这样的函数,计算a+b的结果,如下

function CalculateAPlusB(a,b)
{
  return a+b;
}

在页面中加入一个单独的js引用专门用来写单元测试的function,比如叫test.js

<script language="javascript" src="test.js" type="text/javascript"/>

具体的测试代码如下

test("basic calculation", function() {
    equals(CalculateAPlusB(1,5),6,"1+5=6");
    equals(CalculateAPlusB(1.2,5.5),6.7,"1.2+5.5=6.7");
    equals(CalculateAPlusB(-1,10),9,"-1+10=9");
  });

test("pass null test", function() {
    ok(isNaN(CalculateAPlusB(null,5)),"pass null as the first argument");
    ok(isNaN(CalculateAPlusB(5,null)),"pass null as the second argument");
    ok(isNaN(CalculateAPlusB(null,null)),"no argument pass in");
  });

其中test方法是qunit用来定义测试方法的语句,其第一个参数表示这个测试用例的名称,第二个参数就是具体的实现。equals是用来比较期望值和实际值是否一致,ok是用来判断结果是否为真。

如果一切顺利,你将看到类似下面的结果。

QUnit jQuery的TDD框架

这时应该恭喜自己,因为所有的测试结果都是绿颜色的,这表示这些测试都通过了。 当然这里只是举2个例子,你可以写更多的测试用例来测试这个方法,比如测测值溢出的情况。

 

参考资料

http://www.lostechies.com/blogs/chad_myers/archive/2008/08/28/getting-started-with-jquery-qunit-for-client-side-javascript-testing.aspx

http://docs.jquery.com/Qunit

http://www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit/

http://www.agiledata.org/essays/tdd.html

http://www.oncoding.cn/2010/javascript-unit-testing-qunit/

Javascript 相关文章推荐
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 #Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 #Javascript
关于document.cookie的使用javascript
Oct 29 #Javascript
深入理解JavaScript定时机制
Oct 29 #Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 #Javascript
ExtJS 入门
Oct 29 #Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 #Javascript
You might like
PHP Echo字符串的连接格式
2016/03/07 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
document.all与WEB标准
2020/05/13 Javascript
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
小程序转发探索示例
2019/02/19 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
Python端口扫描简单程序
2016/11/10 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
大学生毕业自荐信
2013/10/10 职场文书
党员培训思想汇报
2014/01/07 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
《社戏》教学反思
2016/02/22 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers