单元测试——Qunit
为什么需要单元测试
- 正确性:测试可以验证代码的正确性,在上线前做到心里有底
- 自动化:当然手工也可以测试,通过console可以打印出内部信息,但是这是一次性的事情,下次测试还需要从头来过,效率不能得到保证。通过编写测试用例,可以做到一次编写,多次运行
- 解释性:测试用例用于测试接口、模块的重要性,那么在测试用例中就会涉及如何使用这些API。其他开发人员如果要使用这些API,那阅读测试用例是一种很好地途径,有时比文档说明更清晰
- 驱动开发,指导设计:代码被测试的前提是代码本身的可测试性,那么要保证代码的可测试性,就需要在开发中注意API的设计,TDD将测试前移就是起到这么一个作用
- 保证重构:互联网行业产品迭代速度很快,迭代后必然存在代码重构的过程,那怎么才能保证重构后代码的质量呢?有测试用例做后盾,就可以大胆的进行重构
测试工具分类
- Qunit、jasmine、mocha、jest、intern
各自有各自的优缺点,相对比较流行的有jasmine、mocha和Qunit(待验证) - Qunit诞生于Jquery团队,但是并不依赖jquery
Qunit内置断言
- ok()
- 只有一个请求的参数,如果返回值TRUE,这个断言通过,否则就失败。另外它接受1个字符串作为测试测试结果的显示。
- equal()
- 常用于简单的使用(==)运算符比较期望参数和真实值,当他们相等的时候,断言通过,否则断言失败。这2个值都会在测试结果中显示,额外的也会显示测试消息。
- 严格比较(===),使用 strictEqual() 代替
- deepEqual()
- 比 equal() 并且有更多选项。代替使用简单的比较运算符(==),使用更加准确的比较运算符(===),也能操作NaN,dates,正则表达式,数组,方法等类型,而 equal() 只能测试基本对象类型。
同步回调测试
调用test() 和 expect() 开始测试,使用这个期望断言数量作为参数
实际例子QUnit.test("a test", function(assert) {
expect(1);
var $body = $("body");
$body.on("click", function() {
assert.ok(true, "body was clicked!");
});
$body.trigger("click");
});
异步回调测试
- 当测试代码开始一个timeout 和 interval 或者一个ajax 请求,通过expect、asyncTest 和 start配合使用实现
QUnit.asyncTest("asynchronous test: video ready to play", function(assert) {
expect(1);
var $video = $("video");
$video.on("canplaythrough", function() {
assert.ok(true, "video has loaded and is ready to play");
QUnit.start();
});
});
测试用户行为
栗子
function KeyLogger(target) {
if (!(this instanceof KeyLogger)) {
return new KeyLogger(target);
}
this.target = target;
this.log = [];
var self = this;
this.target.off("keydown").on("keydown", function(event) {
self.log.push(event.keyCode);
});
}
QUnit.test("keylogger api behavior", function(assert) {
var event,
$doc = $(document),
keys = KeyLogger($doc);
// trigger event
event = $.Event("keydown");
event.keyCode = 9;
$doc.trigger(event);
// verify expected behavior
assert.equal(keys.log.length, 1, "a key was logged");
assert.equal(keys.log[0], 9, "correct key was logged");
});
自定义断言
定义一个可以重复使用的方法。条用Qunit.push 在方法内部然后告诉QUnit断言已经发生。
1 QUnit.assert.contains = function(needle, haystack, message) {
2 var actual = (function() {
3 var result = haystack.some(function(val) {
4 return val.indexOf(needle) > -1;
5 });
6 return result ? needle : '';
7 }());
8 this.push(actual, actual, needle, message);
9 };
10 QUnit.test("retrieving object keys", function(assert) {
11 var arrayKeys = ["apple", "big"];
12 assert.contains("apple", arrayKeys, "Array keys");
13 assert.contains("bigbang", arrayKeys, "Array keys");
14 });
木啦
单元测试——Qunit的更多相关文章
- 单元测试 Qunit
http://api.qunitjs.com/category/assert/ 测试方法 选中 "Check for Globals" 会暴露全局对象,看你的代码会不会无 ...
- Qunit 和 jsCoverage使用方法
Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的 ...
- Web前端工程师成长之路——知识汇总
一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...
- Web自动化测试工具调研
背景 Web自动化测试越来越被重视, 因为现在Web已经是工程化的状态. 如何通过工具测试, 保证Web开发的质量,提升开发效率,是Web工具的诞生的来由. Web测试分为以下几个方面: 1. 界面测 ...
- Web前端工程师成长之路
一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/D ...
- 如何成为一名优秀的前端工程师 (share)
发现一篇不错的博文,和大家分享一下,为有志成为一名优秀前端工程师的童鞋们提供一个参考. :)~ 本文来源:http://www.biaodianfu.com/what-makes-a-good-fro ...
- Web前端知识技能大汇总
项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以 ...
- 前端技能汇总 Frontend Knowledge Structure
Frontend Knowledge Structure 项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有 ...
- Bootstrap 源码解析(转)
1.Bootstrap的作用域 2.Bootstrap的类定义 3.Bootstrap的插件定义 4.Bootstrap的事件代理 5.Bootstrap的对象数据缓存 6.Bootstrap的防冲突 ...
随机推荐
- Android调试错误-No resource identifier found for attribute 'showAsAction'
转载自:http://www.bubuko.com/infodetail-498830.html 1.问题描述: 24\YoumiAndroidSdk\demo\offers\res\menu\mai ...
- redux学习日志:关于react-redux
首先先强调一句:一定要多读官方文档,而且要精读,否则你会忽略掉很多东西! 一,Provider 刚开始看的时候,大致浏览了一下,知道了这个组件是能够接收store作为它的属性,然后它里面的子组件就可以 ...
- window安装swagger editor
1.下载 nodejs,并安装 2. 下载swagger editor并安装 2.1 git clone https://github.com/swagger-api/swagger-editor.g ...
- SerialChart串口示波器的成功调试
2018-01-1601:29:06 深夜更新一波串口示波器! http://t.cn/RQMA3uq 心得体会 总之将数据输出设置为","分割的形式即可 重点注意事项!!!! m ...
- _3_form_标签
什么是input标签? 处理输入信息 input有哪些类型? 选择: <input type="checkbox"> 多选框,选择爱好等 <input type= ...
- CentOS 7 修改SSH端口号 和 ssh无法使用密码登录 和 查看pid 端口占用
如下示例把SSH默认端口22改为122. 1 修改/etc/ssh/sshd_config文件 #Port #找到改行,如果还想继续使用该端口,可以把#去掉,如果使用新端口,可以默认不管 Port # ...
- Python 字符串大小写操作
#coding=utf-8 #python中字符串的操作 # 字符串的大小写 s='hello_wOrld_oF_you' upper_str = s.upper() print('全部大写: ',u ...
- linkin大话设计模式--门面模式
linkin大话设计模式--门面模式 随着系统的不断改进和开发,他们会变得越来越复杂,系统会生成大量的类,这使得程序的流程更加难以理解.门面模式可以为这些类提供一个简易的接口,从而简化访问这些类的复杂 ...
- VisionPro随笔-Visionpro空间字符的含义
在visionpro中名字空间是一个非常重要的概念.简单的说就是在图像中的一个特殊坐标系. 下面说下名字空间中一些固定的字符的特殊含义: 1)“.”=这个表示使用输入图像的当前名字空间.即cogima ...
- MySQL刷新事务日志级别设置
标签(linux): mysql 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 # if set to 1 , InnoDB will flush (fsync ...