技术开发 频道

开发者必备的Javascript单元测试工具

  【IT168专稿】当前,在软件开发中单元测试越来越受到开发者的重视,它能提高软件的开发效率,而且能保障开发的质量。以往,单元测试往往多见于服务端的开发中,但随着Web编程领域的分工逐渐明细,在前端Javascript开发领域中,也可以进行相关的单元测试,以保障前端开发的质量。在本文中,将初步探讨如何在Javascript中进行单元测试及其注意要点。

  Javascript中的单元测试工具

  在Javascript的单元测试中工具中,有很多开源的工具,本文选取其中两个比较典型实用的工具进行介绍:jsTestDriver和Qunit。先来看下jsTestDriver(下载地址:http://code.google.com/p/js-test-driver/wiki/GettingStarted)。

  jsTestDriver以客户服务端的方式运行,在客户端发送测试请求到服务端,整个运行是在可以捕捉的浏览器中进行的,其优点为它能很容易地与代码编辑器整合,以及能成为自动构建的一部分。jsTestDriver包括一系列能与Eclipse,Maven和IntelliJ整合的插件,甚至与Visual Studio整合也是可行的(参考这篇文章),比如下图是与EditPlus整合的一个示意图:

开源的单元测试工具jsTestDriver

  jsTestDriver的安装

  安装jsTestDriver的步骤如下:

  1. 从jsTestDriver的下载页中下载相关的JAR文件,下载地址为:http://code.google.com/p/js-test-driver/downloads/list,下载其中的JsTestDriver-1.3.3a.jar 这个文件

  2. 创建两个文件夹,其中一个为名称为src的存放Javascript源代码的文件,另外一个是用来存放测试用例的文件,文件夹命名为src-test。

  3. 创建一个配置文件,配置文件名为jsTestDriver.conf,配置文件如下:

  server: http://localhost:9876

  load:

  - src/*.js

  - src-test/*.js

  这里指出了启动位于9876的端口进行监听,并且先加载src文件夹下的所有js文件夹,然后在加载src-test文件夹下的js文件进行测试。

  4. 接下来,我们配置jsTestDriver的服务端,以让其监控chrome浏览器,让其运行Javascript测试用例。在命令行输入如下代码,具体路径请根据实际情况修改。

  "C:\Program Files (x86)\Java\jre6\bin\java" -jar JsTestDriver-1.3.2.jar --port 4224 --browser "C:\Documents and Settings\Tarwn\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"

  这样的话,会在4224端口启动jsTestDriver,并且会启动一个chrmoe浏览器的实例,这个实例会捕捉所有的在Chrmoe中运行的Javascript单元测试。接下来,编写一个.cmd文件,在命令方式下执行,以执行测试,测试所有放在src-test中的测试用例,代码如下: 

"C:\Program Files (x86)\Java\jre6\bin\java" -jar JsTestDriver-1.3.2.jar --tests all

  Pause

  开始编写Javascript

  我们开始编写一个简单的Javascript来进行测试,先在src和src-test目录下,分别编

  写如下代码:

  Src目录下的mystuff.js

 myAwesomeApp = {};

  myAwesomeApp.MyAwesomeClass
= function(){};

  myAwesomeApp.MyAwesomeClass.prototype.add
= function(num0, num1){

  return num0
+ num1;

  };

  Src
-test 目录下的mystuff.js

  TestCase(
"Sample Test Case",{

  
"test Number plus Zero Equals Number": function(){

  var adder
= new myAwesomeApp.MyAwesomeClass();

  assertEquals(
5, adder.add(5,0));

  },

  
"test Number plus Number Equals Sum": function(){

  var adder
= new myAwesomeApp.MyAwesomeClass();

  assertEquals(
8, adder.add(5,3));

  },

  
"test Zero plus Number Equals Number": function(){

  var adder
= new myAwesomeApp.MyAwesomeClass();

  assertEquals(
5, adder.add(0,5));

  },

  
"test Number plus Negative of Number Equals Zero": function(){

  var adder
= new myAwesomeApp.MyAwesomeClass();

  assertEquals(
0, adder.add(5,-5));

  },

  
"test Fails miserably": function(){

  fail(
"miserably");

  }

  });

  熟悉单元测试的开发者对它们应该不感到陌生。在上面的测试代码组中,分别测试

  了多种用例,用到的都是assertEquals断言。更多的用法请参考其官方主页的介绍。

  接下来,我们开始运行测试用例,方法为在命令行模式下,

  "C:\Program Files (x86)\Java\jre6\bin\java" -jar ../JsTestDriver-1.3.2.jar --port 4224 --browser "C:\Documents and Settings\Tarwn\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"

  这样就可以启动chrome浏览器监听相关的Javascript单元测试用例。运行后可以看到打开了浏览器,如下图:
 

开源的单元测试工具jsTestDriver

  

  接下来开始进行单元测试,命令行输入如下代码:

"C:\Program Files (x86)\Java\jre6\bin\java" -jar ../JsTestDriver-1.3.2.jar --tests all

  运行后,会在浏览器中看到相关的输出结果,如下: 

....F

  Total
5 tests (Passed: 4; Fails: 1; Errors: 0) (0.00 ms)

  Chrome
13.0.782.220 Windows: Run 5 tests (Passed: 4; Fails: 1; Errors 0) (0.00 ms)

  
Object Literal Test Case.test Fails miserably failed (0.00 ms): AssertError: miserably

  AssertError: miserably

  at
Object.test Fails miserably (http://localhost:4224/test/src-test/mystuff.js:22:3)

  Tests failed: Tests failed. See
log for details.

  从结果中可以看到,.S表示成功通过的单元测试,.F为失败的单元测试用例,而.E为错误的测试用例,信息中还指出了有多少个单元测试,通过了多少,多少个没有通过。

  jsTestDriver还支持传统的setup和teardown等单元测试方法。更多的相关介绍可以参考其在线帮助手册。
 

       开源的单元测试工具Qunit

  接下来,介绍另外一款开源的单元测试工具Qunit(下载地址:http://code.jquery.com/qunit),它是完全基于浏览器运行的,因此不需要象jsTestDriver那么安装麻烦,而且值得一提的是,这个框架是jQuery的单元测试Javascript框架,功能十分强大。下面是安装方法:

  1) 只需要下载qunit.js(http://code.jquery.com/qunit/qunit-git.js)和qunit.css(http://code.jquery.com/qunit/qunit-git.css)

  2) 我们需要编写一个Qunit的界面,命名为testrunner.html,代码如下:
 

<DOCTYPE html>
<html>
<head>
    
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    
<script src="qunit.js" type="text/javascript"></script>
    
<link rel="stylesheet" media="all" href="qunit.css" />

    
<script src="src/mystuff.js" type="text/javascript"></script>
    
<script src="src-test/mystuff_qunit.js" type="text/javascript"></script>

</head>
<body>
    
<h1 id="qunit-header">MyStuff</h1>
    
<h2 id="qunit-banner"></h2>
    
<h2 id="qunit-userAgent"></h2>
    
<ol id="qunit-tests"></ol>
</body>
</html>

       这个页面中分别引入了jquery类库,qunit的类库,还有就是我们之前编写的,位于Src目录下的原先的javascript脚本mystuff.js,以及位于src-test目录下的测试用例Mystuff_qunit.js。

  接下来,来看下测试用例文件Mystuff_qunit.js,代码如下:

module("Sample Test Case");

  test(
"Number plus Zero Equals Number", function(){

  var adder
= new myAwesomeApp.MyAwesomeClass();

  equals( adder.add(
5,0),5);

  });

  test(
"Number plus Number Equals Sum", function(){

  var adder
= new myAwesomeApp.MyAwesomeClass();

  equals(adder.add(
5,3),8);

  });

  test(
"Zero plus Number Equals Number", function(){

  var adder
= new myAwesomeApp.MyAwesomeClass();

  equals(adder.add(
0,5),5);

  });

  test(
"Number plus Negative of Number Equals Zero", function(){

  var adder
= new myAwesomeApp.MyAwesomeClass();

  equals(adder.add(
5,-5),0);

  });

  test(
"Fails miserably", function(){

  ok(
false,"miserably");

  });

  这个看上去跟jsTestDriver有点象,但注意的是在断言方法中,参数的顺序不同,即在qunit中,断言的参数顺序为:Qunit.equals(actual, expected),即实际的数值。在前面,而期望的数值在后面,这点请注意。最后,直接在浏览器中运行test.html,可以看到效果如下:

开源的单元测试工具Qunit

  其中,红色部分即时表示没能通过的单元测试。

  整合jsTestDriver和Qunit

  由于jsTestDriver和Qunit各有优势,因此我们可以考虑对其进行整合。比如,我们可以将jsTestDriver编写的脚本移植到Qunit中去,由于它们的断言参数顺序有不同,因此可以修改一下,编写名为jsTestDriverInQunit.js的脚本如下: 

function TestCase(name, tests){

  
if(tests != null)

  module(name);

  
for(var key in tests){

  
if(tests[key] instanceof Function && key.indexOf("test") == 0){

  test(key,tests[key]);

  }

  }

  return
function(){};

  }

  
function assertEquals(arg0,arg1){

  equals(arg1,arg0);

  }

  
function fail(msg){

  ok(
false,msg);

  }

 
  并且将testrunner.html修改如下:

<DOCTYPE html>
2.    <html>
3.    <head>
4.        <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
5.        <script src="qunit.js" type="text/javascript"></script>
6.        <script src="jsTestDriverInQunit.js" type="text/javascript"></script>
7.        <link rel="stylesheet" media="all" href="qunit.css" />
8.    
9.        <script src="src/mystuff.js" type="text/javascript"></script>
10.        <script src="src-test/mystuff.js" type="text/javascript"></script>
11.    </head>
12.    <body>
13.        <h1 id="qunit-header">MyStuff</h1>
14.        <h2 id="qunit-banner"></h2>
15.        <h2 id="qunit-userAgent"></h2>
16.        <ol id="qunit-tests"></ol>
17.    </body>
18.    </html>


        这样一来,我们无论是使用jsTestDriver还是使用Qunit,都可以都使用同一套测试用例了。

  此外,还有一个开源项目提供了将Qunit转化为jsTestDriver的功能,项目地址为:

  http://code.google.com/p/js-test-driver/wiki/QUnitAdapter。

  小结

  本文简单介绍了如何使用两款Javascript单元测试工具进行前端的开发单元测试,前端的单元测试在复杂的前端Javascript开发中,能够保证前端开发的质量,值得前端开发者仔细研究学习。

0
相关文章