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('isNumber()',function(){
-
-
-
-
- ok (isNumber(2), "2是一个数字");
- ok(!isNumber("2"),"字符串2不是一个数字");
- ok(isNumber(NaN),"NaN是一个数字");
-
-
-
- }
- );
-
-
-
- test("isEven()" ,function(){
-
-
-
- equals(true ,isEven(2),'2是偶数');
- equals(false,isEven(3),'3不是偶数');
- }
- );
-
-
- test("恒等断言" ,function(){
-
-
- 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>
-
- <script type="text/javascript" src="../project/needTestedJS/module.js"></script>
-
- <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},所以,这里就“爆红”了。
本文出自 “平行线的凝聚” 博客,请务必保留此出处http://supercharles888.blog.51cto.com/609344/860089