模板
教程
环境
性能
功能
管理
JavaScript的单元测试工具
引言
单元测试致力于验证一个模块或一个代码单元是按照设计或是如预期那样运作的。一些开发者宁愿花时间来实现一些新的模块，却把编写测试用例看成是浪费时间的事情。然而，在应付大型应用时，单元测试实际上是节省了时间；其帮助你追踪问题，让你能够安全地进行代码更新。
在过去，单元测试只是应用在服务器端语言上。但是，随着前端组件中的复杂性的不断提升，编写JavaScript代码的测试单元的这种需要就增加了。如果你通常都不为客户端脚本编写测试代码的话，则学习曲线可能会很陡峭，对用户界面的测试可能会要求你调整一下思维过程。（而且，一些开发者可能一时还难以认可JavaScript是一种正式的编程语言）。
JavaScript单元测试
为了说明JavaScript的测试，本节内容分析了一个用JavaScript编写的基本函数的测试用例。清单1给出了要测试的函数：把（数值）3和传递进来的变量相加。
清单1. 源代码（example1/script.js）
function addThreeToNumber(el){
return el + 3;
}
|
清单2把测试用例包含在一个自执行函数中。
清单2. 测试用例（example1/test.js）
(function testAddThreeToNumber (){
var a = 5,
valueExpected= 8;
if (addThreeToNumber (a) === valueExpected) {
console.log("Passed!");
} else {
console.log("Failed!");
}
})();
|
在把5传入到被测试的函数中之后，测试检查其返回值是8，如果测试成功的话，在某个现代浏览器的控制台中输出Passed!，否则输出的是Failed!。为了运行这一测试，你需要：
1. 在某个充当测试运行器的HTML页面中导入两个脚本文件，如清单3所示。
2. 在浏览器中打开该页面。
清单3. HTML页面（example1/runner.html）
< !DOCTYPE html> < html> < head> < meta http-equiv="Content-type" content="text/html; charset=utf-8"> < title>Example 1< /title> < script type="text/javascript" src="js/script.js" kesrc="js/script.js">< /script> < script type="text/javascript" src="js/test.js" kesrc="js/test.js">< /script> < /head> < body>< /body> < /html> |
一种替代使用浏览器控制台的做法是，在页面中或是在由alert()方法生成的弹出窗口中输出结果。
断言（assertion），测试用例中的核心要素，被用来验证某个条件的满足。例如，在清单2中，addThreeToNumber (a) === valueExpected就是一个断言。
如果大量的测试用例都有很多断言的话，框架就派上用场了，接下来的几节内容重点说明一些最受欢迎的JavaScript单元测试框架：QUnit、YUI Test和JSTestDriver。
QUnit入门
QUnit是一个类似于JUnit（Java编程）的单元测试框架，其被JQuery团队用来测试jQuery库。若要使用QUnit，你需要：
1. 下载qunit.css和qunit.js文件（参见参考资料）。
2. 创建一个HTML页面，该页面包含了一些导入你刚下载的那些CSS和JavsScript文件的特定标签。
清单4给出了QUnit的一个标准的HTML运行器。
清单4. HTML运行器（qunit/runner.html）
< !DOCTYPE html> < html> < head> < meta charset="UTF-8" /> < title>QUnit Test Suite< /title> < link rel="stylesheet" href="css/qunit.css" kesrc="css/qunit.css" type="text/css" media="screen"> < script type="text/javascript" src="js/lib/qunit.js" kesrc="js/lib/qunit.js">< /script> < /head> < body> < h1 id="qunit-header">QUnit Test Suite< /h1> < h2 id="qunit-banner">< /h2> < div id="qunit-testrunner-toolbar">< /div> < h2 id="qunit-userAgent">< /h2> < ol id="qunit-tests">< /ol> < div id="qunit-fixture">test markup< /div> < /body> < /html> |
原文转自：http://www.uml.org.cn/Test/201301152.asp
