javascript单元测试有不少工具,我们今天主要介绍下QUnit。
QUnit是jQuery团队开发的js单元测试工具,使用方便,界面美观。近期试用了一下并进一步了解了JavaScript单元测试,记录一下所思所得。
1,什么是单元测试
2,为什么js需要单元测试
3,怎么使用Qunit来进行单元测试
4,测试示例
好的:
1,什么是单元测试:单元测试又称为模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。单元测试主要是用来检验程式的内部逻辑,也称为个体测试、结构测试或逻辑驱动测试。通常由撰写程式码的程式设计师负责进行
我们可以维基百科。
2,为什么js需要单元测试:由于存在浏览器解析环境、用户操作习惯等差异,前端程序的许多问题是无法捕捉或重现的,现在前端程序的测试多是黑盒测试,即靠点击点击点击来寻找程序bug。这种方式既费时费力,又无法保证测试的覆盖面。
同时,前端逻辑和交互越来越复杂,和其他编程语言一样,一个函数,一个模块,在修改bug或添加新功能的过程中,很容易就产生新的bug,或使老的bug复活。这种情况下,反复进行黑盒测试,其工作量和测试质量是可想而知的。
此外,浏览器兼容性测试是前端程序测试的重要一环,在多个浏览器之间测试前端程序,上面说的工作量就会成n倍的增加。
为什么我们的前端程序如此脆弱?就是因为没用单元测试。。
假如使用了单元测试,上边的问题就变得很容易了,当然前提是你要花时间去研究和编写测试用例。
根据函数或模块的源代码,编写出包含各种情况的测试用例,每次解决bug或添加新功能,都随时更新这个用例然后进行测试,很容易就找出新bug和“复活”的老bug。
测试兼容性,只需要在不同的浏览器中分别运行这个测试,问题就一目了然了。
也许白盒比黑盒要多费几倍的脑子,但想想我们那脆弱的程序,想想那些随时冒出来的烦人的老bug,费点脑子,值了!
3,怎么使用Qunit来进行单元测试:
建立一个测试页面,引入 qunit.js 和 qunit.css 这两个必需的文件,这两个文件是存放在github上的,鉴于目前操蛋的互联网环境,最好下载到本地调用。
注:body中的元素id命名必须依照如下形式,否则无法正常显示。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script> </head> <body> <h1 id="qunit-header">QUnit example</h1> <h2 id="qunit-banner"></h2> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> </body> </html>
4,测试示例
下面是一个最简单的函数测试用例,解释请见程序注释。
//定义测试模块 module( "测试示例" ); //定义一个简单的函数,判断参数是不是数字 function simpleTest(para) { if(typeof para == "number") { return true; } else{ return false; } } //开始单元测试 test('simpleTest()', function() { //列举各种可能的情况,注意使用 ! 保证表达式符合应该的逻辑 ok(simpleTest(2), '2是一个数字'); ok(!simpleTest("2"), '"2"不是一个数字'); });
module( name, [lifecycle] ) 函数指定测试模块和周期。
ok( state, [message] ) 是QUnit中最常用的一个判断函数,只能判断true和false。
DEMO在这里,看一下测试结果:
结果都是绿的,说明两条测试语句都符合设定的规则。可以尝试修改下规则
//... ok(simpleTest("2"), '"2"是一个数字'); //...
就可以看到爆红了。。
更多测试判断
除了ok()之外,QUnit还有如下几个判断函数:
相等判断equals( actual, expected, [message] )
示例:
//定义一个简单的函数,返回数字和2的乘积 function simpleTest1(para) { return para * 2; } //开始单元测试 test('simpleTest1()', function() { //列举各种可能的情况 equals(simpleTest1(2), 4, '2 * 2 等于 4'); equals(simpleTest(2), 3, '2 * 2 等于 3'); });
相同判断(包含数组、对象等)same( actual, expected, [message] )
示例: //定义一个简单的函数,返回一个数组 function simpleTest2() { return [1, 2]; } //开始单元测试 test('simpleTest2()', function() { //列举各种可能的情况 equals(simpleTest2(), [1, 2], '函数返回数组[1, 2]'); equals(simpleTest2(), [1, 1], '函数返回数组[1, 1]'); });
same()和意思和equals()差不多,但same()可以判断数组、对象等的相同,而equals不能。
异步与Ajax
对于异步程序的测试,如setTimeout、setInterval、Ajax等情况,按照上面的方法,在异步调用执行之前,测试就已完成并输出了结果。这时,配合使用QUnit提供的两个函数:stop( [timeout] ) 和 start(),也可以轻松搞定。
直接看例子:
//异步测试 module( "异步测试示例" ); //setTimeout test('asynchronous test', function() { // 暂停测试 stop(); setTimeout(function() { ok(true, '完成运行'); //待测试完成后,恢复 start(); }, 100) }) //另一种形式 asyncTest('asynchronous test', function() { setTimeout(function() { ok(true); //待测试完成后,恢复 start(); }, 100) })
Ajax也是类似的道理:
//Ajax测试 function ajax(successCallback) { $.ajax({ url: 'server.php', success: successCallback }); } test('asynchronous test', function() { // 暂停测试 stop(); ajax(function() { // 异步调用判断 }) setTimeout(function() { //异步测试完成后,恢复 start(); }, 2000); })
相关推荐
jasmine是一个用来编写Javascript测试的框架,它不依赖于任何其它的javascript框架。它有拥有灵巧而明确的语法可以让你轻松的编写测试代码。
Mocha是一个JS单元测试工具
Js单元测试一直让人纠结,一般使用firefox的firebug,但这要用到浏览器,不方面应用。使用JSUnit之类测试,可以无需打开浏览器在浏览器中测试,而是象Java那样做到单元测试。这个工具就是 JS Test Driver
Venus 是一个 JavaScript (JS)的测试工具,可以简化运行单元测试。当你在 JS 开发一个基于浏览器的项目时,你想创建单元测试并频繁地运行它们。通常,你会用一些库比如 Mocha 或 Jasmine,写一个单元测试,这些库...
javascript单元测试 jsunit2.2
javascript单元测试,入门简介,简单应用(一般应用,Ajax,测试套件)
多浏览器的单元测试工具 多浏览器集成的JavaScript单元测试工县 共28页.pdf
Javascript单元测试框架QUnitjs具体介绍_.docx
如果没有一款合适的单元测试工具保证前端单元模块的正确功能,对后期的代码调试和维护会造成很大的麻烦,今天就介绍一款单元测试框架 — Qunit Qunit刚开始属于jQuery项目,专门用于测试jQuery单元模块。现在已经从...
qunit 1.5 js 单元测试, 好用简单
测试他们的脚本!一个让Javascript单元测试变得有趣的测试运行器。___下载.zip
Atom-js-test-gen-atom.zip,生成js单元测试的atom插件js test gen atom从默认/命名导出生成测试模板。,atom是一个用web技术构建的开源文本编辑器。
前端测试框架phantomjs,用来结合nodejs+grunt配置使用
Jasmine作为JS的单元测试,支持性好,易学易用。该资源是Jasmine-standalone-1.3.1版本,希望对您有用。
QUnit(http://qunitjs.com/) 是一个非常强大的javascript单元测试框架,可以帮你调试代码。它是由 jQuery 团队的成员写的,而且是 jQuery 的官方测试套装。但QUnit一般是足以测试任何常规 javascript 代码,它甚至...
完整统计js代码覆盖率,让你简单方便的了解自己代码单元测试的覆盖度
以往,单元测试往往多见于服务端的开发中,但随着Web编程领域的分工逐渐明细,在前端Javascript开发领域中,也可以进行相关的单元测试,以保障前端开发的质量。 在服务器端的单元测试中,都有各种各样的测试框架,在...
在本文中,了解JavaScript单元测试如何帮助您降低测试成本,轻松支持更多浏览器。Web应用程序面临的一个最大挑战是支持不同版本的Web浏览器。能在Safari上运行的JavaScript代码不一定能在Windows?InternetExplorer...
juta软件包包含摘要层,用于基于JavaScript单元测试API(JUTA)规范创建单元测试框架。 JUTA允许开发人员独立于他们使用的单元测试框架来编写可移植的单元测试。 例如,可以从茉莉花或摩卡咖啡中运行相同的测试,而...