注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭州 QA Team

务实 专注 分享 做有态度的QA

 
 
 
 
 

日志

 
 

Js单元测试之QUnit框架介绍  

来自郑xinghua   2013-02-22 16:47:23|  分类: 单元测试 |举报 |字号 订阅

  下载LOFTER 我的照片书  |

    前面介绍了自己对js单元测试的一些想法,接下来介绍一款简单易上手的测试框架-QUnitQUnitjQuery团队开发的JavaScript单元测试工具,框架本身只有一个js文件和css文件,只要能运行js的地方就可以使用,十分的轻便,很多前端程序员使用它进行自测。

它的优点大致如下:

(1)       简单,易上手,公开的API只有16

(2)       运行界面外观漂亮清晰,运行结果详细、一目了然

(3)       轻便,仅有两个文件,运行不依赖于其它任何软件包或框架

(4)       测试功能完整,支持timeoutsajax和事件等异步代码的测试

(5)       支持在各浏览器中运行,可用来测试兼容性问题,只要测试用例在各个浏览器下跑一遍即可

(6)       不仅支持在浏览器中测试,还支持在Rhinonode.js等后端测试

(7)       运行界面,可对测试结果进行筛选并可选择重新运行某单条用例,方面跟踪错误信息。

它的缺点:对自动化支持不好,很难和Ant/Maven或自动构建等工具集成,主要还是用在浏览器中进行测试。

简单介绍下QUnit框架的配置及使用:

一、QUnit环境配置

 1、首先下载QUnit的开发包(https://github.com/jquery/qunit/tree/master/qunit ),解压后我们只需要qunit目录下的qunit.cssqunit.js两个文件即可。

 2、创建一个html文件将这两个文件引用进来即可,html代码如下:

1.        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

2.        <html>

3.        <head>

4.        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

5.        <title>qunit单元测试集</title>

6.        <link rel="stylesheet" href="../css/qunit.css" type="text/css" media="screen">

7.        <script type="text/javascript" src="../js/qunit.js"></script>

8.        <!-- source.js中可存放被测的js代码 -->

9.        <script type="text/javascript" src="../js/source.js"></script>

10.     <!-- test.js中存放测试用例的代码 -->

11.     <script type="text/javascript" src="../js/test.js"></script>

12.     </head>

13.     <body>

14.        <h1 id="qunit-header">QUnit Test Suite</h1>

15.        <h2 id="qunit-banner"></h2>

16.        <div id="qunit-testrunner-toolbar"></div>

17.        <h2 id="qunit-userAgent"></h2>

18.        <ol id="qunit-tests"></ol>

19.        <div id="qunit-fixture">test markup</div>

20.     </body>

21.     </html>

    

     被测的js源代码可以单独一个文件引入到html中,也可以写在测试用例test.js文件里;当然,你也可以根据测试需要将用到的其他js文件引入到html文件中的head部分。

     框架搭建起来了,接着看下如何编写测试用例并运行。

二、QUnit框架的使用

举例说明:

   对一个简单的加法函数做单元测试,被测代码和测试用例分别如下,将这段代码写入test.js文件中:

1.        //被测函数

2.        function addTwoNumbers(value1, value2){

3.            return parseInt(value1) + parseInt(value2);

4.        }

5.        //测试用例

6.        test("testdemo1",function(){

7.           var result1 = addTwoNumbers(0,1);

8.           equal(result1, 1, "passed!");

9.        });

10.     test("testdemo2",function(){

11.        var result1 = addTwoNumbers(1,1);

12.        equal(result1, 2, "passed!");

13.        equal(result1, 3, "failed!");

14.        equal(result1, 4, "failed!");

15.     });

 

例子中用到的方法就是QUnit最基本的方法之一:

      test( name, [expected], test ),代表QUnit中的一个测试,每添加一个测试就调用一次test()name参数是要测试的名称;expected参数是可选参数,用来表示该测试函数的断言的数量,是个正整数;test参数是一个函数对象,所有的测试代码都应该包括在该函数里,通常这是一个匿名函数。

    断言函数equal( actual, expected, [message] ) 用来描述整个断言,比较参数actualexpected是否相等,相等则测试用例pass。

   例子中,定义了testdemo1和testdemo2两个测试,其中testdemo1中定义了一个正确的断言;testdemo2中定义了1个正确的断言和2个错误的断言。

运行html文件,上面例子中单元测试结果展示如下:

Js单元测试之QUnit框架介绍 - 网易杭州QA - 网易杭州 QA Team

       运行结果界面顶部有几个筛选框,可根据需求对测试结果进行选择性展示,例如只显示失败的test;对于失败的test,QUnit框架会展示出详细的信息,便于跟踪错误,并可选择Rerun按钮重新运行用例。

     到此,一个简单的基于QUnit框架的js单元测试用例便完成了。

     

    另外,QUnit支持对异步的测试,如setTimeoutsetIntervalAjax等情况,按照上面的方法,在异步调用执行之前,测试就已完成并输出了结果。这时,如果配合使用QUnit提供的两个函数:stop([timeout])  start()  ,也可以轻松搞定,引用方法如下:

1.        //异步测试

2.        test('asynchronous test', function() {

3.          // 暂停测试

4.          stop();

5.          setTimeout(function() {

6.            ok(true, '完成运行');

7.            //待测试完成后,恢复

8.            start();

9.          }, 100);

10.     });

    

     Qunit框架也支持分模块测试等。共有16API,这里就不一一介绍了,需要的同学可以参考以下链接内容

http://qunitjs.com/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DQunit%26redirect%3Dno#Reference_Test_Suites

http://www.cnblogs.com/softlover/tag/QUnit/

http://www.weakweb.com/articles/259.html

备注:本文对QUnit框架的介绍参考了以上链接中的内容,向各位作者致谢~

 

  评论这张
 
阅读(2342)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016