Js单元测试——QUnit学习
一、前言：
作为程序开发，单元测试有时候是必要的，相信大多数做过开发的都听说过测试驱动开发（TDD），而TDD的基本思路就是通过测试来推动整个开发的进行，先写测试后写业务代码；既然是单元测试，肯定有运行测试的程序（或者说框架）才可以，对于后端开发领域，以Java开发为例，我们有著名的JUnit；CPP的的有cppUnit；C#的有NUnit；但是在前端开发领域，我们却很少听得有啥单元测试框架，以我目前的公司为例，基本流程就是：后端开发API（RESTful也好、WebService也好）/美工把页面设计并且切片好=>前端用这些页面，然后写js；或者说前后端开发并行一点，在界面没有出来之前，也可以一边开发者后台的API、一边前台调用，最后测试、测试、测试，前端忙忙忙、测试工程师也忙忙忙，这样的测试的方式就是所谓的黑盒测试；可能的情况就是前端开发不严谨，那么遗留到测试的bug就越来越多，或者有些不是很负责人的开发人员压根就懒得做代码的review，可想而知道，开发效率就这样子悲剧的降慢了，此外，还有浏览器兼容性测试，在多个浏览器之间测试前端程序，效率也*n倍的下降；
备注：关于测试驱动开发http://www.ibm.com/developerworks/cn/linux/l-tdd/
二、我们需要单元测试了
话说白盒测试：白盒测试也称结构测试或逻辑驱动测试，它是按照程序内部的结构测试程序，通过测试来检测产品内部动作是否按照设计规格说明书的规定正常进行，检验程序中的每条通路是否都能按预定要求正确工作。也就是说事先程序内部逻辑你是知道的，但后写代码去调用模块、方法；
显然这样子要花费一定量的工作量去写方法，而我们还想很显眼的测试我们的方法是否可用，也就是所谓的可视化显示结果，而框架很好帮助我们做到了这些；
对应前端开发而言，我们需要一个测试框架，来做这件事情，感谢开源，我们有了这么一个框架：QUnit；
三、使用QUnit；
备注：参考 QUnit文档，我写了下面的例子作为自己学习练习
例子一：
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="https://raw.github.com/jquery/qunit/master/qunit/qunit.css" type="text/css" media="screen" /> <script type="text/javascript" src="https://raw.github.com/jquery/qunit/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> <script type="text/javascript"> test( "hello test", function() { ok( 1 == "1", "Passed!" ); }); </script> </html>
但是网络速度实在糟糕，显示出来的界面是这样的：
于是我下载到本地；
显示的效果马上好很多，你看：
值得提下的是：qunit.js和qunit.css是两个必要的文件
ok( state, [message] ) 是qunit中最常用的方法，不过功能只是能够判断true和false；
例子二：
View Code
<script type="text/javascript"> //定义测试模块 module( "测试示例1" ); function qUnitTest(para) { if(typeof para == "number") { return true; } else{ return false; } } //测试 test('qUnitTest()', function() { ok(qUnitTest(4), '4是一个数字'); ok(!qUnitTest("4"), '"4"不是一个数字'); }); </script>
备注：module( name, [lifecycle] ) 函数指定测试模块和周期。
我们把代码改下如图：
运行页面，错误提示立即出来了：
上面这些测试部分参考：
http://www.cnblogs.com/NNUF/archive/2013/01/17/2865327.html
好吧，我以后重点考虑用这种方式开发js的项目了，驱动团队的开发更加高效