JS自动化测试 单元测试之Qunit
前言
因为公司开发了一套javascript SDK需要测试，在网上找了很久，找到了JQuery团队开发的QUnit，和基于JUnit的JsUnit，还有一些还没有看，先讲讲QUnit吧
下载
登录JQuery官网http://qunitjs.com/直接首页右边可以下载最新版本的QUnit。
或者直接点击下载qunit-1.16.0.js，使用QUnit还需要下载官方css文件。下载地址qunit-1.16.0.css
使用QUnit前提条件
1、需要引用qunit-1.16.0.js和qunit-1.16.0.css，有人会问，css可以不引用吗，答案是不行。展示执行用例结果的样式，需要css来显示。
2、需要在body标签中加入两行HTML代码，id属性不能去掉的哦~
<div id="qunit"></div>
<div id="qunit-fixture"></div>
3、需要写一个js用于测试。这里随便写了一个user.js 有登录登出和判断用户名是否存在的方法。引用这个user.js
贴出user.js代码
// JavaScript Document
// 创建user类
var user={
///登录 userName：用户名 userPwd：密码
login:function(userName,userPwd){
return userName+userPwd;
},
///退出 返回1为成功 返回0为失败
logout:function(){
///省去登出代码
return "1";
},
getUser:function(){
return {userName:'',userPwd:''};
},
///判断用户名是否存在 返回1存在 返回0不存在
///测试异步操作 需要提供一个回调函数 用于延迟加载
existUserName:function(userName,callBack){
setTimeout(function(){
var state =0;
if (userName=='milan'){
state= 1;
}
else{
state= 0;
}
if (callBack){
callBack(state);
}
},1000);
}
,
callback:null,
existUserName2:function(userName){
setTimeout(function(){
var state =0;
if (userName=='milan'){
state= 1;
}
else{
state= 0;
}
if (user.callback){
user.callback(state);
}
},1000);
}
};
使用QUnit
1、test ：所有用例必须在test方法中执行，表示一个测试用例，一般一个用例有N个断言。
///测试登录
test('user.login',function(){
equal(user.login('milan','123'),'milan123',"登录测试");
})
运行结果
2、断言函数
- ok（ result, message）断言返回值为true/false
- equal( actual, expected, message )actual为实际值、expected为预期值；浅对比，判断实际值是否与预期值相等。相当于==
- propEqual( actual, expected, message )用于判断对象和值是否相等
- deepEqual( actual, expected, message )深对比，用于判断两个值类型和值是否相等，相当于===
- 以上2、3、4条分别提供了功能相反的函数 notEqual、notPropEqual、notDeepEqual。参数跟2、3、4条是一样的。
大家也可以在qunit-1.16.0.js的源代码中搜索“notPropEqual”(或者其他函数名称)，搜索到同级函数都是QUnit提供的断言函数，可以方便大家查看及扩展。 如下图：
3、使用断言函数
楼主一般喜欢一个接口一个测试用例，当然每个人的习惯不一样。不能一概而论，反正只要做到清晰易读就可以啦！
///登出测试
test('user.logout',function(){
ok(user.logout()==1,"登出测试ok");
//验证实际值不等于断言值为正确，这里实际是相等的，所以是错的
notEqual(user.logout()==1,true,"登出测试notEqual");
//验证实际值等于断言值
equal(user.logout()==1,true,"登出测试notEqual");
//验证返回值是否同类型同值
deepEqual(user.logout(),1,"登出测试deepEqual");
});
///获取用户信息测试
test("user.getUser",function(){
///判断两个对象是否相等 此方法 不适用于判断基本的数值或者字符串
propEqual(user.getUser(),{"userName": "12","userPwd": ""},"登出测试propEqual");
///判断是否不相等，不相等为通过
notPropEqual(user.getUser(),{"userName": "12","userPwd": ""},"登出测试propEqual");
});
执行结果如图：
4、QUnit实现异步测试
大家都知道，要测试接口/方法，必须等到接口的返回值，才能测试，如果没有返回值，我们也不知道结果对不对啦。
所以异步测试一般有两种办法：一种是把回调当作参数传入方法中；二是开发者提供一个变量，我们可以把回调函数赋值给变量；等异步处理完毕之后再执行我们写的回调函数
这里我们用setTimeout来模拟异步延迟返回操作。
用例代码：
//模块化
module("异步测试");
///方法一 回调用参数的方式传入 异步测试
user.existUserName('milan',function(result){
///注意啦 这里是先调方法，再写用例哦。
test("user.existUserName",function(){
ok(result==1,"判断用户名是否存在ok");
notEqual(result==1,true,"判断用户名是否存在notEqual");
});
});
//方法二 回调用内置变量赋值的方式传入 异步测试
user.callback=function(result){
test("user.existUserName2",function(){
ok(result==1,"判断用户名是否存在ok");
notEqual(result==1,true,"判断用户名是否存在notEqual");
});
};
user.existUserName2('milan');
测试结果：
5、模块化
在上面的异步测试中，我们看到每个用例的开头都多了“异步测试”这几个字。那么这几个字是怎么来的呢？
很多时候，要测试的用例过多，我们也会眼花缭乱了。QUnit提供module("模块名称")来实现用例分组。
使用方法直接放在要模块化的地方就行啦。参照第4接异步测试的代码和结果
贴出教程所有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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title> <link rel="stylesheet" href="../../qunit/qunit-1.16.0.css">
<script src="../../qunit/qunit-1.16.0.js"></script>
<script src="user.js"></script> </head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div> <script type="text/javascript" language="javascript">
///测试登录
test('user.login',function(){
equal(user.login('milan','123'),'milan123',"登录测试"); })
//模块测试
module("基本测试");
///登出测试
test('user.logout',function(){
ok(user.logout()==1,"登出测试ok");
//验证实际值不等于断言值为正确，这里实际是相等的，所以是错的
notEqual(user.logout()==1,true,"登出测试notEqual");
//验证实际值等于断言值
equal(user.logout()==1,true,"登出测试notEqual");
//验证返回值是否同类型同值
deepEqual(user.logout(),1,"登出测试deepEqual");
});
///获取用户信息测试
test("user.getUser",function(){
///判断两个对象是否相等 不适用于判断基本的数值或者字符串
propEqual(user.getUser(),{"userName": "12","userPwd": ""},"登出测试propEqual");
///判断是否不相等，不相等为通过
notPropEqual(user.getUser(),{"userName": "12","userPwd": ""},"登出测试propEqual");
});
//模块化
module("异步测试");
///回调用参数的方式传入 异步测试
user.existUserName('milan',function(result){
///注意啦 这里是先调方法，再写用例哦。
test("user.existUserName",function(){
ok(result==1,"判断用户名是否存在ok");
notEqual(result==1,true,"判断用户名是否存在notEqual");
});
});
//回调用内置变量赋值的方式传入 异步测试
user.callback=function(result){
test("user.existUserName2",function(){
ok(result==1,"判断用户名是否存在ok");
notEqual(result==1,true,"判断用户名是否存在notEqual");
});
};
user.existUserName2('milan'); </script> </body>
</html>
结论
在很多时候，我们不可能把每一种方法都讲到极致，没有讲到的，还需要大家多多去试一试。第一次写博客，写得不好，有什么建议或者问题，都可以在下面回复。楼主会在看到后第一时间解决的。谢谢！
JS自动化测试 单元测试之Qunit的更多相关文章
- 单元测试之Qunit
单元测试之Qunit 前言 因为公司开发了一套javascript SDK需要测试,在网上找了很久,找到了JQuery团队开发的QUnit,和基于JUnit的JsUnit,还有一些还没有看,先讲讲QU ...
- Javascript单元测试之QUnit
首先去Qunit官网下载. Qunit有一个js脚本文件和一个css我们在页面中引入它. <script src="qunit-2.0.1.js"></scrip ...
- [转载]单元测试之道（使用NUnit）
首先来看下面几个场景你是否熟悉 1.你正在开发一个系统,你不断地编码-编译-调试-编码-编译-调试……终于,你负责的功能模块从上到下全部完成且编译通过!你长出一口气,怀着激动而又忐忑的心情点击界面上的 ...
- 单元测试之道（使用NUnit）
首先来看下面几个场景你是否熟悉 1.你正在开发一个系统,你不断地编码-编译-调试-编码-编译-调试……终于,你负责的功能模块从上到下全部完成且编译通过!你长出一口气,怀着激动而 又忐忑的心情点击界面上 ...
- iOS 单元测试之XCTest详解（一）
iOS 单元测试之XCTest详解(一) http://blog.csdn.net/hello_hwc/article/details/46671053 原创blog,转载请注明出处 blog.csd ...
- 玩转单元测试之Testing Spring MVC Controllers
玩转单元测试之 Testing Spring MVC Controllers 转载注明出处:http://www.cnblogs.com/wade-xu/p/4311657.html The Spri ...
- 玩转单元测试之WireMock -- Web服务模拟器
玩转单元测试之WireMock -- Web服务模拟器 WireMock 是一个灵活的库用于 Web 服务测试,和其他测试工具不同的是,WireMock 创建一个实际的 HTTP服务器来运行你的 We ...
- 单元测试之NSNull 检测
本文主要讲 单元测试之NSNull 检测,在现实开发中,我们最烦的往往就是服务端返回的数据中隐藏着NSNull的数据,一般我们的做法是通过[data isKindOfClass:[NSNull cla ...
- 使用VisualStudio进行单元测试之二
借着工作忙的借口,偷了两天懒,今天继续单元测试之旅.前面说了如何进行一个最简单的单元测试,这次呢就跟大家一起来熟悉一下,在visual studio中如何进行数据驱动的单元测试. 开始之前先来明确一下 ...
随机推荐
- 如何成为游戏的生产者——第二章:如何开始你的编程(开发环境的搭建、C++语言适应)
如何成为游戏的生产者--文章二章:怎样開始你的编程 小故事:上节说到我六年级打开了那本C语言的书,然后其实我还是没看懂.好像看懂了一些printf语句.之后遇到了史无前例的困难--怎么让代码执行起来. ...
- css javascript 自动化压缩（保存后即自动生成压缩文件）
先上图:
- C# ^ 运算符和 || 运算符的区别
|| : 条件“或”,条件或运算符 (||) 执行的逻辑或其 bool 操作数. 如果第一个操作数计算结果为 true,第二个操作数对象不会计算. 如果第一个操作数计算结果为 false,第二个运算符 ...
- （大数据工程师学习路径）第二步 Vim编辑器----查找替换
一.字符的替换及撤销(Undo操作) 1.替换和撤销(Undo)命令 替换和Undo命令都是针对普通模式下的操作 命令 说明 r+<待替换字母> 将游标所在字母替换为指定字母 R 连续替换 ...
- OpenWrt配置opkg.conf
傻人干活才累. 用openwrt有一年多了, 数据传输一直使用wget从外部的webserver取. 这样的方法我个人认为还算轻松. 可是调试的多了,写大型一点的程序,总是这样就有点麻烦了. 安装软件 ...
- Androids含文档erver结束（工具包 Httputils）两
在同server在...的基础上,本文client还登录界面 Andriod简单http get请求基础上,用户注冊后跳转到下载界面,本文下载界面仅仅有两个View,一个是textView显示注冊后u ...
- 如何安装一个优秀的BUG管理平台（转）
前言 就BUG管理而言,国内的禅道做得很不错,而且持续有更新.我们来看看如何从头到尾安装禅道,各位要注意的是,不是文章深或者浅,而是文章如何在遇到问题的时候,从什么途径和用什么方法解决问题的.现在发觉 ...
- zTree实现访问到第一节点在相同水平当前所选节点数目
zTree实现访问到第一节点在相同水平当前所选节点数目 1.实现源代码 <!DOCTYPE html> <html> <head> <title>zTr ...
- PHP第三个教训 PHP基本数据类型
学习平台: 1.php七种变量类型 2.isset和empty到这两个功能区分 3.型式试验 4.自己主动类型转换 5.类型转换 注意: 1.通过 变量->方法名 来调用. $user1 = ...
- [Android 4.4.3] 泛泰A870 Mokee4.4.3 20140610 RC2.0 通过刷第三版 by syhost
欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...