接下来开始进行单元测试,命令行输入如下代码:
运行后,会在浏览器中看到相关的输出结果,如下:
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,代码如下:
<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,代码如下:
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,可以看到效果如下:
▲
其中,红色部分即时表示没能通过的单元测试。