QUnit是一个非常简单而且强大的单元测试框架，简单到稍微懂点javascript的人，5分钟不到就会了，以下就是这个框架的用法：
首先，既然是一个框架，肯定有框架的共有特征（框架的css->qunit.css,框架的js函数库->qunit.js，框架的HTML 显示页面->framework.html，我们按照规范放置在应该放置的地方，如下图所示：）
既然是javascript测试框架，那么肯定就有两部分组成，一部分是被测试的javascript函数，另一部分是测试语句的javascript函数，我们分别建2个文件夹(needTestJS和tcJS来放置）。
Part 1: 被测试的javascript函数：
我们这里写了两个函数，按照QUnit的建议，我们为其定义一个测试模块（模块化嘛）一个用于测试参数是否为数字，一个用于测试传入的数是否为偶数：
- //定义测试模块
- module ("测试示例");
- //定义一个简单的函数，判断参数是不是数字
- function isNumber (para){
- if (typeof para=="number") {
- return true;
- }else{
- return false;
- }
- }
- //这个函数用于判断传入的数是不是偶数
- function isEven(val) {
- return val % 2 === 0;
- }
Part 2:测试用例：
测试用例也是javascript函数，我们必须用测试断言来构造这些测试用例，有很多种测试断言，最常用的几种有：ok() ,equals(),same()，具体他们用在什么场合见我的代码注释部分：
- //开始单元测试
- //test的第一个参数是展现在页面上的这个测试集合的名称，可以指定任何有意义的名字
- test('isNumber()',function(){
- //列举各种可能的情况，保证每种条件应该符合的逻辑
- //ok 是QUnit中最常见的用于判断的函数，不过只能判断true和false
- //正确，则绿色的条子，错误就会爆红
- ok (isNumber(2), "2是一个数字");
- ok(!isNumber("2"),"字符串2不是一个数字");
- ok(isNumber(NaN),"NaN是一个数字");
- }
- );
- test("isEven()" ,function(){
- //equals(actual,expected,[message]) 用于相当的判断函数
- equals(true ,isEven(2),'2是偶数');
- equals(false,isEven(3),'3不是偶数');
- }
- );
- test("恒等断言" ,function(){
- //same()是恒等断言，可以用来判定2个对象是否相等（可以不相同）
- same( {}, {}, 'passes, objects have the same content');
- same( {a: 1}, {a: 50} , 'passes');
- same( [], [], 'passes, arrays have the same content');
- same( [1], [1], 'passes');
- }
- );
Part 3: 显示结果：
测试，要调用这些测试方法和显示结果（无数java developer的为绿条而欢呼雀跃，为红条而忧伤，QUnit中沿用了JUnit中的颜色设定风格），我们必须要有个底座，幸运的是,QUnit框架已经为我们提供了这个底座(HTML页面)，我们只需要吧被测试的js和测试用例js添加进去，如下所示：
- <!DOCTYPE html>
- <html>
- <head>
- <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
- <title>QUnit Test Suite</title>
- <link rel="stylesheet" href="../css/qunit.css" type="text/css" media="screen">
- <script type="text/javascript" src="../js/qunit.js"></script>
- <!-- 这里放置被测试的函数所在js文件 -->
- <script type="text/javascript" src="../project/needTestedJS/module.js"></script>
- <!-- 这里放测试用例js文件 -->
- <script type="text/javascript" src="../project/tcJS/moduleTest.js"></script>
- </head>
- <body>
- <h1 id="qunit-header">QUnit测试套件</h1>
- <h2 id="qunit-banner"></h2>
- <div id="qunit-testrunner-toolbar"></div>
- <h2 id="qunit-userAgent"></h2>
- <ol id="qunit-tests"></ol>
- </body>
- </html>
然后我们就可以看到测试结果了，正确的则显示绿条和注解，错误的则显示红条以及错误信息：
比如我们这里故意放了一个错误，我们在测“恒等断言”时候，我们故意给了2个不等的json 对象，一个是{a:1}，一个是{a,50},所以，这里就“爆红”了。
