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中如何进行数据驱动的单元测试. 开始之前先来明确一下 ...
随机推荐
- 佛祖保佑,从来没有Bug
<span style="font-size:14px;">// _ooOoo_ // o8888888o // 88" . "88 // (| - ...
- nginx: [emerg] the size 10485760 of shared memory zone "cache_one" conflicts with already declared size 0
注意配置段中的区域包含关系. proxy_cache_patch 要在proxy_cache前已经定义. what seems to be the problem? [emerg]: the size ...
- Android checkbox和radiobutton 以及Toast和AlertDialog的使用
package com.example.radiobutton_01; import android.app.Activity; import android.os.Bundle; import an ...
- HTTP请求中POST与GET的差别
一.原理差别 一般我们在浏览器输入一个网址訪问站点都是GET请求;再FORM表单中,能够通过设置Method指定提交方式为GET或者POST提交方式,默觉得GET提交方式. HTTP定义了与serve ...
- lsblk请参阅块设备
lsblk可以查看分区和挂载的磁盘使用情况 lsblk全部的參数 -a, --all 显示全部设备 -b, --bytes 以bytes方式显示设备大小 - ...
- STL源代码分析--迭代摘要、迭代器失效汇总
Vector 1.内部数据结构:连续存储,比如数组. 2.随机訪问每一个元素,所须要的时间为常量. 3.在末尾添加或删除元素所需时间与元素数目无关,在中间或开头添加或删除元素所需时间随元素数目呈线性变 ...
- TDD和BDD
开发人员看测试之TDD和BDD 前言: 已经数月没有来园子了,写博客贵在坚持,一旦松懈了,断掉了,就很难再拾起来.但是每每看到自己博客里的博文的浏览量每天都在增加,都在无形当中给了我继续写博客的动 ...
- JTextField限制输入长度的完美解决方案（转）
关于JTextField限制输入字符长度的问题,因为没提供现成的api,所以我们得自己动手,来实现这个功能,网上也有很多这样的资料,大多是在JTextField的Document的insertStri ...
- 比ORA-24777: 我不使用不可移植数据库链接更郁闷的事情达成一致
现场有一个同步误差,内容如下面: java.sql.BatchUpdateException: ORA-24777: 不同意使用不可移植的数据库链路 at oracle.jdbc.driv ...
- Hadoop Streaming 得到mapreduce_map_input_file中遇到的问题的版本号
1.Hadoop Streaming,您可以在任务获得hadoop设置环境变量, 例如,使用awk书面map从而能获得:filename = ENVIRON["mapreduce_map_i ...