模板
教程
环境
性能
功能
管理
对JavaScript进行单元测试的工具
简介
单元测试关注的是验证一个模块或一段代码的执行效果是否和设计或预期一样。有些开发人员认为，编写测试用例浪费时间而宁愿去编写新的模块。然而，在处理大型应用程序时，单元测试实际上会节省时间;它能帮助您跟踪问题并安全地更新代码。
常用缩略语
DOM：文档对象模型
HTML：超文本标记语言
JSTD：JSTestDriver
YUI：Yahoo! User Interface
在过去，只对服务器端语言进行单元测试。但前端组件越来越复杂，使得编写 JavaScript 代码测试用例的需求日益提高。如果您不经常编写客户端脚本的测试，学习进度可能非常难。测试用户界面可能需要在思路上做一些调整。(有些程序开发人员一时半会还不能相信 JavaScript 是合适的编程语言。)
在本文中，您将学习如何使用 QUnit、YUI Test 和 JSTestDriver 对 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!。如果要运行测试，需要按照以下步骤进行操作：
将两个脚本文件导入作为测试运行程序的 HTML 页面中，如清单 3 所示。
在浏览器中打开页面。
清单 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"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body></body>
</html>
|
您可以不使用浏览器控制台，而是将结果打印在页面或由 alert() 方法生成的弹出窗口中。
断言是测试用例中的核心元素，用来验证某一条件是否满足。例如，在 清单 2 中，addThreeToNumber (a) === valueExpected 就是一个断言。
如果您拥有很多用例并带有很多断言，那么使用框架就会方便很多。下面的内容将会重点介绍一些最流行的 JavaScript 单元测试框架：QUnit、YUI Test 和 JSTestDriver。
回页首
QUnit 入门
QUnit 是与 JUnit(Java 编程)类似的单元测试框架，jQuery 团队用它来对 jQuery 库进行单元测试。要使用 QUnit，需要按照以下方法：
下载 qunit.css 文件和 qunit.js 文件(参阅 参考资料)。
创建一个 HTML 页面，其中包含导入刚下载的 CSS 和 JavaScript 文件的特定标签。
清单 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" type="text/css" media="screen">
<script type="text/javascript" src="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>
|
假设您拥有两个函数分别负责将温度从摄氏转换为华氏，并转换回来。清单 5 显示了执行此转换的脚本。
