单元测试——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的防冲突 ...
随机推荐
- 阿里云Maven配置,Maven仓库配置,Maven镜像配置
阿里云Maven配置,Maven仓库配置,Maven镜像配置 ======================== 蕃薯耀 2018年1月29日 http://www.cnblogs.com/fanshu ...
- Hadoop问题:chmod 0700 of directory /var/lib/apt/lists/
问题描述: apt-get update W: chmod of directory /: Operation not permitted) E: Could not open : Permissio ...
- Java常用的框架
一.SpringMVC http://blog.csdn.net/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MV ...
- mysql-高性能索引策略
原文转自:http://www.cnblogs.com/happyflyingpig/p/7655762.html 独立索引: 独立索引是指索引列不能是表达式的一部分,也不能是函数的参数 例1: SE ...
- Windows下为PHP安装redis扩展
1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本. 2.下载 php_redis-2.2.7-5.5-ts-vc11-x86.zip 和 php_igbinary-2.0.5- ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- PHP面试题超强总结(PHP中文网)
PHP面试基础题目 1.双引号和单引号的区别 双引号解释变量,单引号不解释变量 双引号里插入单引号,其中单引号里如果有变量的话,变量解释 双引号的变量名后面必须要有一个非数字.字母.下划线的特殊字符, ...
- mysql与nagios的结合使用
一. 对mysql建库建表,并测试数据 基本信息:库名:nh_nagios表名:nagios_alerts [root@nhserver2 ~]# mysql -u root -pEnter pass ...
- MySQL相关文档索引
MySQL的新功能5.7 https://dev.mysql.com/doc/refman/5.7/en/mysql-nutshell.html MySQL5.7安装 http://note.youd ...
- python简单分布式demo
A服务器是master,B服务器为worker, A服务器上执行taskManger.py # coding:utf-8 import random,time,Queue from multiproc ...