body{
font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif;
}
QUnit是一个基于JQuery的单元测试Unit Testing 框架。虽然是基于JQuery但用来测试纯Javascript代码。
用来运行Javascript单元测试用例的html页面是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit test runner</title>
<link rel="stylesheet" href="lib/qunit-1.10.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="lib/qunit-1.10.0.js"></script>
<!--test code goes here-->
</body>
</html>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
假设我们有如下简单的javascript代码simpleMath.js，实现基本的数学操作，阶乘，平均数。
SimpleMath = function() {
};
SimpleMath.prototype.getFactorial = function (number) {
if (number < 0) {
throw new Error("There is no factorial for negative numbers");
}
else if (number == 1 || number == 0) {
// If number <= 1 then number! = 1.
return 1;
} else {
// If number > 1 then number! = number * (number-1)!
return number * this.getFactorial(number-1);
}
}
SimpleMath.prototype.signum = function (number) {
if (number > 0) {
return 1;
} else if (number == 0) {
return 0;
} else {
return -1;
}
}
SimpleMath.prototype.average = function (number1, number2) {
return (number1 + number2) / 2;
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
如对getFactorial函数，我们可以编写以下3种测试用例：
正数，零，负数
// Factorial testing module
module("Factorial", {
setup: function() {
this.simpleMath = new SimpleMath();
}, teardown: function() {
delete this.simpleMath;
}
});
test("calculating factorial for a positive number", function() {
equal(this.simpleMath.getFactorial(3), 6, "Factorial of three must equal six");
});
test("calculating factorial for zero", function() {
equal(this.simpleMath.getFactorial(0), 1, "Factorial of zero must equal one");
});
test("throwing an error when calculating the factorial for a negative number", function() {
raises(function() {
this.simpleMath.getFactorial(-10)
}, "There is no factorial for negative numbers ...");
});
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
上面的代码中，module中有setup, teardown可以让我们事前事后做一些操作，使用断言equal期望3的阶乘结果是6，如果您有接触过Java或C#平台的单元测试，应该不能理解。然后我们把2个js脚本文件引入到上面html中
<script src="src/simpleMath.js"></script>
<script src="tests/simpleMathTest.js"></script>
最终我们在浏览器中打开这个html，结果也就是显示出来了。
如上图，我们看到7个测试用例，全部有通过了，点击前2个用例，显示出断言的结果。常见的断言还有ok( truthy [, message ] ), deepEqual( actual, expected [, message ] )，如下是ok:
ok(true, "true passes");
ok(4==4, "4 must equal 4");
ok("some string", "Non-empty string passes");
QUnit也有支持异步ajax的测试方法asyncTest，由于篇幅有限，在这儿不多介绍了。写这篇文章的时候，QUnit是v1.14.0版本了。未来可能还有新版本。更多内容，请可以参考API文档。
希望对您软件开发有帮助。
您可能感兴趣的文章：
作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。