Web开发者必备的JavaScript单元测试工具-前端测试工具

当前,在软件开发中单元测试越来越受到开发者的重视,它能提高软件的开发效率,而且能保障开发的质量。以往，单元测试往往多见于服务端的开发中，但随着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的步骤如下：

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单元测试用例。运行后可以看到打开了浏览器，如下图：

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

"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等单元测试方法。更多的相关介绍可以参考其在线帮助手册。

#p#

开源的单元测试工具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,可以看到效果如下：

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

整合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>   
    <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>   
        <script src="jsTestDriverInQunit.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.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>

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

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

原文：http://tech.it168.com/a2011/1019/1260/000001260942_all.shtml

【编辑推荐】