Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013

高效JavaScript单元测试
Hazem Saleh

议
题
不实施单元测试情况下开发人员的状况。
什么是单元测试？为什么要进行单元测试？
当前测试 JavaScript 代码所面临的复杂性。
良好的 JavaScript 单元测试工具的必要条件。
什么是 JsTestDriver。
JsTestDriver 架构和配置
JsTestDriver Eclipse 插件。
编写 JavaScript 测试用例。
JsTestDriver 通用结构。
编写异步 JavaScript 测试用例。
从测试用例生成报告。
JsTestDriver 兼容性

系统组件间的复杂集成。

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

应用程序质量低。
测试周期更长。
test
fixtest
fix
fix
test
fix
test
fix
testfix
test
fix
test
fix
test

议
题

什么是单元测试？为什么要进行单元测
试？
单元测试就是一段代码（通常是一个方法）调用另外一
段代码，并于稍后检查某些假设的正确性
单元测试有助于在项目早期阶段发现有bug的组件。
测试套件是一组测试用例，而每个测试用例则是一组
对系统组件进行验证的测试。

良好单元测试的特征
自动化
可重复快速
易于运行。
易于理解
增量式

什么是单元测试？为什么要进行单元测
试？
集成性得到显著简化。
缺陷得到管理。如果通过创建新的测试用例解决了缺陷问题，则不
会再发生回归缺陷。
应用程序质量提高。
测试周期缩减。
测试用例可以成为系统文档的良好参考。
测试用例可改进系统设计，并成为代码重构的基础。

议
题

当前测试 JavaScript 代码所面临的复杂性
需要大量时间对所有浏览器进行测试。
在特定浏览器上运行的 JavaScript 代码并不一定意味着
慢
在特定浏览器上运行的 JavaScript 代码并不一定意味着
能在其他浏览器上运行。
如果要支持新浏览器，则意味着，需要为在新浏览器上
再次测试系统及新/回归缺陷修复分配新预算。
不灵活

议
题
良好 JavaScript 单元测试工具的要求。

良好的 JavaScript 单元测试工具的必要条件
JavaScript 单元
测试工具
可以跨所有平台在
所有浏览器上执
行。
快速执行测试用例
。行。
易于安装。
易于配置。
。
与 IDE 集成。
与构建管理工具集成
。

议
题

什么是 JsTestDriver
最佳开源 JavaScript 测试工具之一。
满足之前的所有要求及更多要求：
支持所有浏览器/所有平台。 ✓
易于安装和配置。 ✓
快速执行测试案例。 ✓
与 IDE 和构建管理工具集成。 ✓

议
题
JsTestDriver 架构和配置JsTestDriver 架构和配置。JsTestDriver 架构和配置
JsTestDriver 架构和配置。

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

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

JsTestDriver 配置
1 使用如下初始内容创建 jsTestDriver.conf 文件（
在 JS 文件夹下）：2 3
server:http://localhost:98server:http://localhost:98
76
load:
js/*.src-js-
jstest/*.-js-

JsTestDriver 配置
1 使用以下命令行启动服务器2 3 4
java -jar JsTestDriver-1.3.2.jarjava -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 alljava -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 架构和配置JsTestDriver 架构和配置
JsTestDriver Eclipse 插件。JsTestDriver Eclipse 插件。

JsTestDriver Eclipse 插件
您可以直接使用 jsTestDriver Eclipse 插件启动服务器和运行测试用
例，而不使用命令行。
要安装 JsTestDriver Eclipse 插件，请从以下 URL 安装该插件：要安装 JsTestDriver Eclipse 插件，请从以下 URL 安装该插件：
driver.googlecode.com/svn/update/-test-http://js

议
题
编写 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 …… validate using the jsTestDriver constructs …
}
ApplicationUtilTest.prototype.testMethod2 = function () {
… validate using the jsTestDriver constructs …
}
...

议
题
JsTestDriver 通用结构。JsTestDriver 通用结构。

JsTestDriver 通用结构
fail("msg")
assertTrue("msg", actual)
assertFalse("msg", actual)
assertSame("msg", expected, actual)
assertNotSame("msg", expected,
actual)
assertNotSame("msg", expected,
actual)
assertNull("msg", actual)
assertNotNull("msg", actual)

演示演示
让我们来编写让我们来编写同同步步 JSJS让我们来编写让我们来编写同同步步 JSJS
测试测试用用例例…………

议
题
编写异步 JavaScript TestCase。编写异步 JavaScript 测试用例。

编写异步 JavaScript 测试用例
AsyncTest = AsyncTestCase("AsynchronousTesting");
AsyncTest.prototype.setUp = function () {
/*:DOC += */
};
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 提供一个回调参数。有
两种类型的回调：
• 成功回调：代表成功路径。必须对其进行调用才能
通过测试。
• 错误回调：代表错误路径。如果对其进行调用，则
测试失败。
编写异步 JavaScript TestCase
测试运行器不会移到下一个队列，直到
当前队列执行了它的所有成功回调。如果
一个特定的成功回调在特定的时间段内（30
秒）没有被调用，则测试失败。

演示演示
让我们编写异步让我们编写异步 JSJS 测试测试让我们编写异步让我们编写异步 JSJS 测试测试
用用例例…………

议
题

JsTestDriver 不只是一个 JavaScript 单元测试
框架，对许多其他 JavaScript 单元测试框架
而言，它还是一个测试运行器。
通过适配器，JsTestDriver 与以下 JavaScript
单元测试框架兼容：
• Jasmine
• YUI Test
• QUnit

为了在 JSTD 测试运行器之上运行前述的单元
测试框架，您需要按照如下方式在测试文件之
前配置框架适配器和源：
server:http://localhost:9876
load:
/jasmine.js0.1.1-jasmine/lib/jasmine-
/adapter/JasmineAdapter.jslib/jasmine-
/Basics.jssrc-js-
test/BasicsSpec.js-js-

演示演示
在在 JSTDJSTD 上运行上运行在在 JSTDJSTD 上运行上运行
JasmineJasmine 测试测试用用例例

议
题
从测试案例生成报告。从测试用例生成报告。

JSTD 可生成代码覆盖文件。
代码覆盖描述有多少源代码进行了测试。
从测试用例生成报告
覆盖标准：
函数覆盖
语句覆盖
分支覆盖

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

Configuring the plugin:
Download the Add the coverage plugin declaration Specify the --
Download the
“coverage.jar”.
Add the coverage plugin declaration
to the configuration file:
:plugin
- name: "coverage"
jar: "plugins/coverage.jar"
module:
"com.google.jstestdriver.coverage.Co
verageModule"
Specify the --
testOutput
<<output_folder
>> flag in the
test running
command.

遗憾的是 JsTestDriver 不能直接生成 HTML 报告，
JsTestDriver 以 LCOV 和 XML 格式生成测试覆盖文件。
您可以使用 LCOV 可视化工具生成 HTML 测试报告：
您可以使用 LCOV 可视化工具生成 HTML 测试报告：
http://ltp.sourceforge.net/coverage/lcov.php

JsTestDriver LCOV 文件名通常是：
<config filename>-coverage.dat (jsTestDriver.conf-
coverage.dat)
使用 LCOV 可视化工具从 LCOV 文件生成报告：
使用 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> /1782160620http://www.amazon.com/dp/
JavaScript 单元测试书籍

Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013

联系我
http://www.twitter.com/hazems：Twitter
LinkedIn：
http://eg.linkedin.com/in/hazemsaleh
http://www.technicaladvices.com博客：
hazems@apache.org电子邮件：

Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013

More Related Content

What's hot (19)

Viewers also liked (7)

Similar to Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013 (20)

More from Hazem Saleh (12)

Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013