技术开发 频道

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

       开源的单元测试工具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

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

0
相关文章