javascript之QUnit单元测试
一、javascript也需要单元测试吗?
这里我并不知道你有没有开发过大型的javascript项目,至今我开发过三个大型的js项目,分为是《课程节点树管理》、《在线制作试卷》和《在线聊天》。
从中我唯一的体会就是javascript的开发难度不是开发编码的过程,而是最后的测试阶段,非常的痛苦,因为你必须使用浏览器自带的调试器去调试,同时
也不能自动化测试。但是后台因为用了vs自带的单元测试,所以修改起来很快。
由此我就想到javascript应该也存在单元测试,所以我搜索了一下,发现了QUnit,它的特点很明显,就是学习周期很短,可以在短时间内上手,并且也拥有
非常美观的界面,所以下面我将介绍如何使用QUnit。
二、开始学习前的准备
既然要学习,我们既然就要有准备,我这里使用的是Visual Studio 2012。
下面是我的静态页面的基础模板:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/qunit/qunit-1.14.0.js"></script>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.14.0.css" />
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script type="text/javascript">
//稍后我们会在这里写上教程
</script>
</body>
</html>
这里我是直接使用CDN的路径,如果你加载CDN的资源较慢的话,我建议去下载一份放在本地,并引用,否则你的页面会奇慢无比。
三、下面我们开始学习
1.首先我们先来一个简单的测试
<script type="text/javascript">
function add(a, b) {
return a + b;
} test("Test Method 1", function () {
ok(add(1, 2) == 3, "Test Method 1 Pass");
});
</script>
这里我进行了一个最简单的测试,测试一个函数的是不是正确,我们在测试函数中调用该函数并和我们预想的结果进行对比,如果对比失败册触发断言,
下面是最终结果:

如果我们现在将上面的代码改成下面这样:
function add(a, b) {
return a + b + 1;
}
test("Test Method 1", function () {
ok(add(1, 2) == 3, "Test Method 1 Pass");
});
那么最终就会触发断言,结果就是这样的:

2.如果强制指定断言的数量
有时我们可能有5个断言,但是QUnit可能最后只识别了3个其他断言仅仅是因为语句错误未执行到,这个时候我们就需要强制指定断言的数量。
假设上面的示例中应该有两个断言,代码如下改动:
function add(a, b) {
return a + b + 1;
}
test("Test Method 1", function () {
expect(2);
ok(add(1, 2) == 3, "Test Method 1 Pass");
});
这里我们可以看到使用了 expect 这个函数,当然你也可以像下面这样写:
function add(a, b) {
return a + b + 1;
}
test("Test Method 1",2, function () {
ok(add(1, 2) == 3, "Test Method 1 Pass");
});
但是QUnit官方的说明文档中已经声明了不建议使用这个方式,所以我们尽量使用前者。
下面是上面两个不同方式的结果:

我们可以清楚的看到这里报了两个错误,但实际只有一个断言没有成功。所以这样我们就实现了最终的结果。
3.异步测试
在对比较大的模块进行测试的时候,可能会出现使用定时器等耗时的测试,但是我们不能因为一个功能的耗时而导致后面的所有测试都要等待这个测试完成,
所以我们就需要使用异步测试,当然如果你的模块必须是顺序的执行那么只能使用test了。
下面我们将断言语句放到一个定时器中,延迟1.5s后执行:
function add(a, b) {
return a + b + 1;
}
asyncTest("Test Method 1", function () {
setTimeout(function () {
ok(add(1, 2) == 3, "Test Method 1 Pass");
start();
}, 1500);
});
当你写完,刷新页面后,会发现一开始没有任何反馈的结果,但是等待一段时间后就可以看到最后的测试结果了。
这里我们可以看到我们使用了 asyncTest 这个方法,并且在断言后面加了一个 start ,如果不加start方法,那么
最后你可能看到这个测试反馈的结果。
下面是结果:

4.模块化测试
时常我们会同时测试多个模块,但是如果仅仅利用前面的方式,我们会发现最终的结果会分不清那个测试是属于那个模块的,所以QUnit
提供了module这个函数。
下面我们举例两个模块进行测试:
module("Test Module 1");
test("Test Method1", function () {
ok(true, "Module1 Test1");
});
test("Test Method2", function () {
ok(true, "Module1 Test2");
});
module("Test Module 2");
test("test Method1", function () {
ok(true, "Module2 Test1");
});
test("test Method2", function () {
ok(true, "Module2 Test2");
});
我们可以很清楚看到 module 将不同模块的测试划分开来了,但是仅仅这里划分并没有用,我们还需要最终的结果也能够清楚的划分出来:

看到这个结果是不是很容易就可以分得出哪个方法是哪个模块的。
5.断言
断言比较多,我们举例一个,其他的简要说明下。
首先是ok这个断言,它的第一个参数仅仅只是一个表达式,第二个参数是断言的说明。
下面列出能够成立断言的几个特殊列子:
test("Test Method2", function () {
ok(true, "true is pass");
ok(1, "1 is pass");
ok(2, "2 is pass");
ok(new Object(), "object is pass");
ok(2 > 1, "2 > 1 is pass");
ok(" ", "' ' is pass ");
ok([], "[] is pass");
});
以上的断言都是可以通过的,自然相反的就不好通过了。
equal(actual,expected,message):将actual和expected进行对比(相当于==),只有相等才能通过。
notEqual(actual,expected,message):将actual和expected进行对比,只有不相等才能通过。
structEqual(actual,expected,message):将actual和expected进行全等对比(相当于===),只有相等才能通过。
notStructEqual(actual,expected,message):将actual和expected进行全等对比,只有不想等才能通过。
deepEqual(actual,expected,message):将actual和expected进行深度对比,如果是对象,则将值进行简单对比(相当于==),只有相等才能通过。
notDeepEqual(actual,expected,message):将actual和expected进行深度对比,只有不想等才能通过。
propEqual(actual,expected,message):将actual和expected进行深度对比,如果是对象,则将值进行全等对比(相当于===),只有相等才能通过。
notPropEqual(actual,expected,message):将actual和expected进行深度对比,只有不想等才能通过。
javascript之QUnit单元测试的更多相关文章
- javascript QUnit 单元测试
<!doctype html> <html> <head lang="zh-CN" dir="ltr"> <meta ...
- 测试工具使用-Qunit单元测试使用过程
031302620 应课程要求写一篇单元测试工具的博客,但是暂时没用到java,所以不想使用junit(对各种类都不熟悉的也不好谈什么测试),原计划是要用phpunit,但是安装经历了三个小时,查阅各 ...
- 关于JavaScript测试工具:QUnit, Jasmine, MoCha
在进行前端开发过程中,在某些场景下,需要通过编写单元测试来提高代码质量.而JavaScript常用的单元测试框架有这几个:QUnit, Jasmine, MoCha.下面就基于这三个工具,简单做一比较 ...
- 【JS单元测试】Qunit 和 jsCoverage使用方法
近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的人来说,很难明白其中的意思,特此整理这篇文章,希望 ...
- Qunit 和 jsCoverage使用方法(js单元测试)
Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的 ...
- qunit学习(一)
QUnit是一个强大的JavaScript单元测试框架,用于调试代码.该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.任意正规JavaScript代码QUnit都能测试. 其 ...
- Qunit 和 jsCoverage使用方法
Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的 ...
- 基于Grunt构建一个JavaScript库
现在公认的JavaScript典型项目需要运行单元测试,合并压缩.有些还会使用代码生成器,代码样式检查或其他构建工具. Grunt.js是一个开源工具,可以帮助你完成上面的所有步骤.它非常容易扩展,并 ...
- JavaScript工具库
jPublic 交流QQ群:1017567122 前言 在我们开发项目的时候,无论项目规模大小,在所难免会写一些工具型函数来解决一些问题,随着项目开发和维护的时间越来越长,这些工具型函数会越来越多,同 ...
随机推荐
- 一种开源的分布式消息系统Nats
一种开源的分布式消息系统Nats 作者:chszs.未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 1.NATS介绍 NATS是一个开源的 ...
- 一致性哈希算法(consistent hashing)(转)
原文链接:每天进步一点点——五分钟理解一致性哈希算法(consistent hashing) 一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网 ...
- verilog语法实例学习(9)
常用的时序电路介绍 寄存器 一个触发器可以存储一位数据,由n个触发器组成的电路可以存储n位数据,我们把这一组触发器叫做寄存器.寄存器中每个触发器共用同一个时钟. 下面是n位寄存器的代码,我们通过一个参 ...
- 升级Https前的可行性验证(一)
升级Https之前的可行性验证 注意:自签证书和Nginx的安装都基于ContOS 6 一.如何申请OpenSSL自签证书 1.安装OpenSSL (一)OpenSSL 工具下载 下载地址 (二)Op ...
- 谁为你的app捡肥皂
2048奇迹,是大多数个人开发者的梦寐以求的期望.而做出flappy bird这样跨时代的游戏,则能够让我们赚的盆满钵满.那么我们怎么样使我们app与众不同,脱颖而出了. 我们这些凡夫俗子程序员们,对 ...
- Impala 数值函数大全(转载)
官网:https://www.cloudera.com/documentation/enterprise/latest/topics/impala_math_functions.html 转载链接1: ...
- 定时删除日志文件---linux定时清理日志
linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...
- Mac OS X /home 目录权限修改
Mac OS X /home 目录权限修改 http://ju.outofmemory.cn/entry/283070 sudo vi /etc/auto_master # 注释掉 /home那一行 ...
- 安装loadrunner
Loadrunner安装具体解释 一 .下载篇. 我的下载地址是:http://pan.baidu.com/s/1c0IqAOC 程序4G多.非常大. 二. 安装篇 1.执行&qu ...
- mongodb最大连接数、最大连接数修改
mongodb最大连接数是20000. 所以业界流传一段话,千万级以下的用mysql.千万级以上的用mongodb,亿级以上的用hadoop. 查看mongodb最大连接数 mongodb ...