高效 javascript 单元测试

高效 JavaScript 单元测试Hazem Saleh

议题

不实施单元测试情况下开发人员的状况。什么是单元测试？为什么要进行单元测试？当前测试 JavaScript 代码所面临的复杂性。良好的 JavaScript 单元测试工具的必要条件。什么是 JsTestDriver。

JsTestDriver 架构和配置JsTestDriver Eclipse 插件。编写 JavaScript 测试用例。JsTestDriver 通用结构。编写异步 JavaScript 测试用例。

从测试用例生成报告。

不实施单元测试情况下开发人员的状况。

JsTestDriver 兼容性


系统组件间的复杂集成。系统组件间的复杂集成。

许多新的 / 回归缺陷无法管理，尤其是系统复杂性提高时。许多新的 / 回归缺陷无法管理，尤其是系统复杂性提高时。


应用程序质量低。应用程序质量低。


测试周期更长。测试周期更长。

议题



从测试用例生成报告。JsTestDriver 兼容性

什么是单元测试？为什么要进行单元测试？

什么是单元测试？为什么要进行单元测试？单元测试就是一段代码（通常是一个方法）调用另外一段代码，并于稍后检查某些假设的正确性

单元测试有助于在项目早期阶段发现有 bug 的组件。

测试套件是一组测试用例，而每个测试用例则是一组对系统组件进行验证的测试。

良好单元测试的特征

自动化

可重复

易于运行。

快速

易于理解易于理解

增量式

什么是单元测试？为什么要进行单元测试？集成性得到显著简化。

缺陷得到管理。如果通过创建新的测试用例解决了缺陷问题，则不会再发生回归缺陷。

应用程序质量提高。

测试周期缩减。

测试用例可以成为系统文档的良好参考。

测试用例可改进系统设计，并成为代码重构的基础。

议题




当前测试 JavaScript 代码所面临的复杂性。

当前测试 JavaScript 代码所面临的复杂性

需要大量时间对所有浏览器进行测试。

在特定浏览器上运行的 JavaScript 代码并不一定意味着能在其他浏览器上运行。

如果要支持新浏览器，则意味着，需要为在新浏览器上再次测试系统及新 / 回归缺陷修复分配新预算。

议题

不实施单元测试情况下开发人员的状况。什么是单元测试？为什么要进行单元测试？当前测试 JavaScript 代码所面临的复杂性。良好 JavaScript 单元测试工具的要求。什么是 JsTestDriver。



良好的 JavaScript 单元测试工具的必要条件。

良好的 JavaScript 单元测试工具的必要条件

JavaScript 单元测试工具

JavaScript 单元测试工具

可以跨所有平台在所有浏览器上执行。

易于安装。

易于配置。

快速执行测试用例。

与 IDE 集成。与 IDE 集成。

与构建管理工具集成。

议题




什么是 JsTestDriver。

什么是 JsTestDriver

最佳开源 JavaScript 测试工具之一。最佳开源 JavaScript 测试工具之一。

满足之前的所有要求及更多要求：满足之前的所有要求及更多要求：支持所有浏览器 / 所有平台 ✓ 。

易于安装和配置 ✓ 。

快速执行测试案例 ✓ 。

与 IDE 和构建管理工具集成 ✓ 。

议题




JsTestDriver 架构和配置。

JsTestDriver 架构

JsTestDriver 配置

1 在 web 应用中，为 JavaScript 测试代码和应用代码建两个单独的文件夹

JsTestDriver 配置

1 从以下网址下载 jsTestDriver 最新 Jar 文件2http://code.google.com/p/js-test-driver/downloads/list

JsTestDriver 配置

1 使用如下初始内容创建 jsTestDriver.conf 文件（在 JS 文件夹下）：2 3

server:http://localhost:9876load:

-js-src/*.js -js-test/*.js

JsTestDriver 配置

1 使用以下命令行启动服务器2 3 4

java -jar JsTestDriver-1.3.2.jar 可选参数

--[port 9876 ]--[browser “{PATH}\firefox.exe","{PATH}\

iexplore.exe","{PATH}\Safari.exe]"

JsTestDriver 配置

1 使用以下命令行运行测试用例2 3 4 5

java -jar JsTestDriver-1.3.2.jar --tests all.........Total 9 tests (Passed:9; Fails:0; Errors:0) (16.00 ms)Firefox 9.0.1 Windows:Run 3 tests (Passed:3; Fails:0; Errors 0) (3.00 ms)Safari 534.52.7 Windows:Run 3 tests (Passed:3; Fails:0; Errors 0) (4.00 ms)Microsoft Internet Explorer 7.0 Windows:Run 3 tests (Passed:3; Fails:0; Errors 0) (16.00 ms)

议题


JsTestDriver 架构和配置

编写 JavaScript 测试用例。JsTestDriver 通用结构。编写异步 JavaScript 测试用例。


JsTestDriver Eclipse 插件。JsTestDriver Eclipse 插件。

JsTestDriver Eclipse 插件

您可以直接使用 jsTestDriver Eclipse 插件启动服务器和运行测试用例，而不使用命令行。

要安装 JsTestDriver Eclipse 插件，请从以下 URL 安装该插件： http://js-test-driver.googlecode.com/svn/update /

JsTestDriver Eclipse 插件

议题


JsTestDriver 架构和配置JsTestDriver Eclipse 插件。

JsTestDriver 通用结构。编写异步 JavaScript 测试用例。


编写 JavaScript TestCase。编写 JavaScript 测试用例。

编写 JavaScript 测试用例

ApplicationUtilTest = TestCase("ApplicationUtilTest");

ApplicationUtilTest.prototype.setUp = function () {/*:DOC += ...HTML fragment code goes here (single root) ...*/

};

ApplicationUtilTest.prototype.testMethod1 = function () {… validate using the jsTestDriver constructs …

}

ApplicationUtilTest.prototype.testMethod2 = function () {… validate using the jsTestDriver constructs …

}

...

议题



编写异步 JavaScript 测试用例。


编写 JavaScript 测试用例。JsTestDriver 通用结构。JsTestDriver 通用结构。

JsTestDriver 通用结构

fail("msg") fail("msg")

assertTrue("msg", actual) assertTrue("msg", actual)

assertFalse("msg", actual)assertFalse("msg", actual)

assertSame("msg", expected, actual) assertSame("msg", expected, actual)

assertNotSame("msg", expected, actual)assertNotSame("msg", expected, actual)

assertNull("msg", actual)assertNull("msg", actual)

assertNotNull("msg", actual)assertNotNull("msg", actual)

演示演示让我们来编写让我们来编写同同步步 JS JS

测试测试用用例例…………

议题




编写 JavaScript 测试用例。JsTestDriver 通用结构。编写异步 JavaScript TestCase。编写异步 JavaScript 测试用例。

编写异步 JavaScript 测试用例AsyncTest = AsyncTestCase("AsynchronousTesting");

AsyncTest.prototype.setUp = function{ )( :*/DOC += <!-- Initialization code/*>--

;}AsyncTest.prototype.testOperationOne = function(queue){

queue.call('Step1', function(callbacks){ var asyncObject = new AsyncObject;)(

var successCallBack = callbacks.add(function(successData){

// validate (successData) if possible.... ;)}

var failureCallBack = callbacks.addErrback('Error Message') ;

//call asynchronous API

asyncObject.operationOne(inputData ,successCallBack ,

failureCallBack;) ;)} ;}

每个内联函数为测试 Ajax API 提供一个回调参数。有两种类型的回调：

• 成功回调：代表成功路径。必须对其进行调用才能通过测试。

• 错误回调：代表错误路径。如果对其进行调用，则测试失败。

测试运行器不会移到下一个队列，直到当前队列执行了它的所有成功回调。如果一个特定的成功回调在特定的时间段内（ 30 秒）没有被调用，则测试失败。

编写异步 JavaScript TestCase

演示演示让我们编写异步让我们编写异步 JS JS 测试测试

用用例例…………

议题



JsTestDriver 兼容性从测试用例生成报告。


JsTestDriver 不只是一个 JavaScript 单元测试框架，对许多其他 JavaScript 单元测试框架而言，它还是一个测试运行器。

通过适配器， JsTestDriver 与以下 JavaScript 单元测试框架兼容：• Jasmine• YUI Test• QUnit


为了在 JSTD 测试运行器之上运行前述的单元测试框架，您需要按照如下方式在测试文件之前配置框架适配器和源：

server:http://localhost:9876

load: -jasmine/lib/jasmine-1.1.0/jasmine.js

-jasmine/lib/adapter/JasmineAdapter.js -js-src/Basics.js

-js-test/BasicsSpec.js


演示演示在在 JSTD JSTD 上运行上运行 Jasmine Jasmine 测试测试用用例例

议题



JsTestDriver 兼容性从测试案例生成报告。从测试用例生成报告。

JSTD 可生成代码覆盖文件。JSTD 可生成代码覆盖文件。

代码覆盖描述有多少源代码进行了测试。代码覆盖描述有多少源代码进行了测试。

覆盖标准：覆盖标准：

函数覆盖

语句覆盖

分支覆盖

从测试用例生成报告

JsTestDriver

可以使用代码覆盖插件为您的 JavaScript 代码生成代码覆盖。

遗憾的是 JsTestDriver 不能直接生成 HTML 报告，

JsTestDriver 以 LCOV 和 XML 格式生成测试覆盖文件。

您可以使用 LCOV 可视化工具生成 HTML 测试报告：

http://ltp.sourceforge.net/coverage/lcov.php


JsTestDriver LCOV 文件名通常是：

<config filename>-coverage.dat (jsTestDriver.conf-coverage.dat)

使用 LCOV 可视化工具从 LCOV 文件生成报告：

genhtml jsTestDriver.conf-coverage.dat


结论

结论

若要提高应用程序质量，加快修复缺陷，最小化回归缺陷数量，测试 JavaScript 代码至关重要。

好的 JavaScript 工具应该是可配置的，易于使用，并且适用于所有浏览器。

JsTestDriver 是最强大的 JavaScript 单元测试工具之一，可以用于在所有浏览器上测试同步和异步 JavaScript 代码。

专题讲座问答（免费书籍）<script>(function() {

var x = 10, y = 20, z = x+++y;

alert(x); //?alert(y); //?alert(z); //?

})();

</script> http://www.amazon.com/dp/1782160620/

JavaScript 单元测试书籍

联系我

Twitter ： http://www.twitter.com/hazems

LinkedIn ： http://eg.linkedin.com/in/hazemsaleh

博客： http://www.technicaladvices.com

电子邮件： [email protected]

高效 javascript 单元测试

Documents