&">nbsp;在本文中,您将了解一些对 JavaScript 进行单元测试的最常用的工具:QUnit、YUI Test 和 JSTestDriver。本文将会通过代码示例让您了解这些样测试用例样例。
单元测试关注的是验证一个模块或一段代码的执行效果是否和设计或预期一样。有些开发人员认为,编写测试用例浪费时间而宁愿去编写新的模块。然而,在处理大型应用程序时,单元测试实际上会节省时间;它能帮助您跟踪问题并安全地更新代码。
在过去,只对服务器端语言进行单元测试。但前端组件越来越复杂,使得编写 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。