使用 DOH 对 Web 前端 JavaScript 进行单元测试

核心提示：本文主要通过如下的几个部分对 DOH 进行讲述：首先，我们来关注客户端单元测试的重要性及什么是 DOH；接着，使用 DOH 对 Web 前端 JavaScript 进行单元测试，通过搭建适合自己项目的测试框架和编写 Hello World 测试用例来让读者迅速的掌握 DOH；然后，针对 DOH 中的细节进行了相应的阐述

本文主要通过如下的几个部分对 DOH 进行讲述：首先，我们来关注客户端单元测试的重要性及什么是 DOH；接着，通过搭建适合自己项目的测试框架和编写 Hello World 测试用例来让读者迅速的掌握 DOH；然后，针对 DOH 中的细节进行了相应的阐述，包括注册函数，断言及异步测试；最后，文章给出了一些最佳实践。

为什么在 Web2.0 开发中需要客户端单元测试？

Web 2.0 相对于 Web1.0，不仅是背后哲学和商业价值的提升，也是一次技术的变革，并伴随着新的客户端编程技术 Ajax 不断成熟。这也就导致了客户端代码由原来的配角逐渐演化成了主角。另一方面，单元测试是高质量软件开发的重要组成部分，尤其是在敏捷开发软件开发方法学中。所以如何在 Web2.0 开发中保证主角把自己的戏演好，客户端单元测试是不可或缺的。

什么是 DOH ？

DOH 是 Dojo Objective Harness 的简称，是 Dojo 在 0.9 版本之后新增的单元测试工具。随着 Javascript 代码的数量和复杂度的增加，Web 前端开发者也需要一个 Javascript 代码的单元测试框架来保证自己写出来的 Javascript 代码是健壮的。所以，DOH 是 Web 前端开发者对 JUnit 的回应。

为什么选择 DOH?

具备了 Javascript 单元测试的思想还是不够的，必须有强有力的工具支持才能保证单元测试在 Web 开发中顺利发挥作用。为什么选择 DOH ？我觉得主要是基于以下几个原因：

DOH 提供了与 Dojo 无关的自动化单元测试框架，也就是说它可以完全脱离 Dojo 来完成单元测试任务，另一方面您也可以利用 Dojo 强大的功能来完成复杂的单元测试。

DOH 不但可以基于浏览器运行，也能以命令行的方式运行。命令行的方式非常有助于与 CI 结合。

如果您以前用过 Dojo，那么您以前对 Dojo 的 Knowledge 是同样适用于 DOH 的。

DOH 还提供了针对 UI（User Interface）可视化的单元测试能力，这非常有助于帮助解决跨浏览器的可视化问题。

DOH 可对异步回调进行测试。异步回调是 Ajax 的核心，也是它之所以成功的根本。异步回调在 Web2.0 的客户端代码中随处可见，保证它们的健壮性是保证客户端顺利运行的基石。

如何在自己的 Web2.0 工程中搭建 DOH 单元测试框架？

在开始搭建框架之前，请您从 dojo 的官方网站上下载所需的 dojo 版本（这里我下载的是：dojo-release-1.3.2-src.zip），并解压到您的目录。解压之后的目录结构如下图所示，在目录中我们可以看到 doh 目录，文章下面部分主要针对该目录进行配置。

图 1. DOH 所在目录

DOH 自身提供了简单的方式来搭建自己的测试框架，但由于是在 URL 上进行配置，所以对于复杂的情况，很不方便。在这里，我主要介绍一种适合复杂情况的方式。

首先，在 <DOJO_HOME>\util\doh 下找到 runner.html，并其拷贝至您的 Web 工程目录下。如果您需要修改后缀，那么可以将 runner.html 的后缀直接改成您想要的后缀，例如：runner.jsp。

然后，打开 runner.html，对其进行修改，代码如清单 1 所示：

清单 1. 省略的runner.html

//　1.　config　the　correct　dojo.js　path　#　
window.dojoUrl　=　"./dojo/dojo.js";　
　
//…　
　
//　2.　config　the　module.js　path　
window.testModule　=　"package.module";　
　
//　…　
　
<script　type="text/javascript">　
//　3.　registerModulePath　
dojo.registerModulePath("package",　"../package");　　
</script>　

对于上述清单，有几个要点需要解释一下（分别与注释中的序号对应）：

将 window.dojoUrl 指向您的 dojo.js 的位置（相对位置）。

在修改本处之前，请建立自己的 testModel，testModel 在整个测试框架中充当管理者的角色，通过它可以对测试用例进行增删。在这里，我建立的 testModule 是 package.module，位置为 <YOUR_DIR>/package/module.js。testModule 结构将在“Hello World 一章”给出示例代码。

对于一个大中型的 Web 工程，会划分出很多个 Module。为了方便编写测试用例，可以在 runner.html 中将所有的 Module Path 注册进去。当然您也可以在编写测试用例时注册 Module Path。

综上所述，建立适合自己工程的单元测试框架是非常容易的，主要包括两个步骤：首先拷贝 runner.html，然后修改 runner.html（建立自己的 testModule，注册 Module Path）。另外，需要提醒的是：这种方式建立的测试框架会导致图标和声音丢失，处理方法是将 small_logo.png 和 _sound 文件夹拷贝至 runner.html 的同一目录。框架建立后，我们接下来编写第一个测试用例。

使用 DOH 编写第一个测试用例：Hello World!

接下来，我们来编写第一个测试用例，最好的方式自然是采用 Hello, World。刚才在建立测试框架的时候，我们已经建立了相应的目录结构。为了方便，我们在 package 目录下新建 SayHello.js，其代码如清单 2 所示：

清单 2. SayHello测试用例

dojo.provide("package.SayHello");　
　
doh.register("package.SayHello",[　
　function　isSayHelloToWorld(){　
　　doh.assertEqual("Hello,　World","Hello,　China");　
　}　
]);　

对于上述清单，我们主要关注 2 个要点：doh.register 用来注册函数测试用例；doh.assertEqual 是断言，用来比较 Hello, World 和 Hello, China 的值是否相等。

编写完测试用例后，就需要将该测试用例添加到 testModule 里去了，在这里是 <YOUR_DIR>/package/module.js，其代码如清单 3 所示：

清单 3. 在module.js中添加SayHello测试用例

dojo.provide("package.module");　
　
try{　
　dojo.require("package.SayHello");　
}catch(e){　
　doh.debug(e);　
}　

在完成上述步骤之后，请在浏览器中打开 runner.html 页面，如图 2 所示：

图 2. 测试用例 SayHello 的运行结果

查看原图（大图）

对于上图，红色意味着 SayHello 测试用例 Failed，这是因为 Hello, World 和 Hello, China 是不相等的。另外，我们不难发现，测试结果页面主要包括了三个区域：测试套件列表，进度条，Log 视图。

虽然我们已经完成了第一测试用例，但 DOH 提供了丰富的功能，所以下文我们主要针对注册函数，断言和异步测试进行详尽的讲述。

如何注册函数测试用例？

DOH 提供了大量的注册函数来注册函数测试用例。为了方便介绍，我根据参数和测试用例编写的方式将注册函数划分为三类。

首先，我们来看第一类，它的函数原型为：doh.regFunName(group, testCase)。原型中的标识如表 1 所示：

表 1. doh.regFunName(group, testCase)

函数原型中的标识	描述	可选的值
regFunName	函数名	registerTestNs registerGroup registerTest registerTests register
Group	测试用例的名字	String
testCase	测试主体	Namespace Object Function Fixture Array of Function Array of Fixture

对于这个表可能有些迷惑，regFunName 有 5 种，而 testCase 有 5 种，也就是组合就有 25 种。下面我将给出它们之间组合的关系，如图 3 所示：

图 3. regFunName 与 testCase 之间组合的关系

在上图中，我们提到了 Ns（Namespace） Object 和 Fixture，下面我们将给出简单的解释：

Ns Object，形如代码清单 4 所示。以“_”开头的函数被 DOH 认为是私有函数，DOH 运行测试用例时并不 Run 这些私有函数。

清单 4. Ns Object示例

{　
_privateFun:　function(){　
　doh.t(false);　
},　
　
publicFunOne:　function(){　
　console.info("publicFunOne");　
　doh.t(true);　
　}　
}　

Fixture Object，形如代码清单 5 所示。其中，name 为测试用例的名字；timeout 为该测试用例运行的超时时间，若超时将抛出超时异常；setUp 在 runTest 之前运行，用于准备 runTest 之前的环境；runTest 为测试用例的核心函数，一般在这里进行测试；tearDown 在 runTest 之后运行，用于释放资源等。

清单 5. Fixture Object示例

{　
　name:　“testCaseName”,　
　timeout:　5000,　
　runTest:　function(){　
　//　…　
　},　
　setUp:　function(){　
　//　…　
　},　
　tearDown:　function(){　
　//　…　
　}　
}　

接下来是第二类，它的函数原型为：doh.registerGroup(group, testCase, setUp, tearDown)。该函数原型中的参数同第一类基本一致。不同的是，setUp 在 testCase 之前运行，tearDown 在 testCase 之后运行。若 testCase 为 Fixture Object，那么它的运行顺序为：setUp-> （setUp->runTest->tearDown）->tearDown。

最后是第三类，它的函数原型为：doh.registerDocTests(module)。该注册函数是 DOH 比较特殊，也是比较有趣的一个。下面给出一个简单的示例，代码如清单 6 所示：

清单 6. doh.registerDocTests(module)示例

function　funOne(){　
　//　>>>　var　val1　=　"a"　
　//　>>>　var　val2　=　"b"　
　//　>>>　val1　+　val2　
　//　"ab"　
　
　//　need　empty　line　console.info("I　am　funOne!");　
}　

在这里有几个关键点需要注意：注释中必须以 >>> 作为开头；期望的值不能以 >>> 开头，并且与上一行之间要以回车分隔；在测试片段之后需要添加一个空行。

如何书写断言？

DOH 作为 Javascript 对 JUnit 的回应，DOH 也提供了大量的断言，主要包括 5 种：

doh.assertTrue(/*Object*/ condition)，对 condition 求值，看它是否“真”。可以简写为：doh.t。

doh.assertFalse(/*Object*/ condition)，对 condition 求值，看它是否为“假”。可以简写为：doh.f。

doh.assertEqual(/*Object*/ expected, /*Object*/ actual)，比较 expected 的值与 actual 的值是否相等。可简写为：doh.is。

doh.assertNotEqual(/*Object*/ notExpected, /*Object*/ actual)，比较 notExpected 的值与 actual 的值是否不相等。

doh.assertError(/*Error object*/expectedError, /*Object*/scope, /*String*/functionName, /*Array*/args)，用来判断在 scope 上下文情况下，函数名为 funtionName，参数列表为 args 的函数抛出的异常是否为 expectedError。可简写为：doh.e。对于此种断言可能不是很好理解，下面给出示例代码清单 7：

清单 7. doh.assertError示例代码

function　MyError(){};　
　　
　var　scrope　=　{};　
　scrope.throwError　=　function(){　
　　throw　new　MyError();　　
　}　
　
doh.assertError(MyError,　scrope,　"throwError",　[]);　

如何编写异步单元测试用例？

Web2.0 的技术特点之一就是通过 Javascript 来进行异步请求，而且这在 Web2.0 应用开发中十分普遍。所以，对 Javascript 进行单元测试的一个重点就是对异步函数进行单元测试。幸运的是，DOH 为我们提供了很好的支持。

编写异步单元测试并不像普通的单元测试那么直观，为了方便用户的深入理解，我在下载中给出了 7 种方式，通过这 7 种方式可以更为深入地了解 DOH 对于异步测试的支持。但在这里我主要介绍两种方式：

第一种，使用 try-catch 模板方式，其模板如清单 8 所示：

清单8. try-catch模板

{　
　name:　"asyn",　
　timeout:　5000,　
　runTest:　function(){　
　　var　d　=　new　doh.Deferred();　
　　dojo.xhrGet({　
　　　url:　"package/source.html",　
　　　preventCache:　true,　
　　　load:　function(data){　
　　　　try{　
　　　　//　write　test　logic　here　
　　　　　d.callback(true);　
　　　　}　catch(e){　
　　　　　d.errback(e);　
　　　　}　
　　}　
　});　
　return　d;　
　}　
}　

从上面的模板，我们不难发现异步单元测试的 3 个关键点：为了表示该测试用例是异步的，它通过返回 doh.Deferred 对象来通知 DOH；必须 catch 所有的异常，并将其传递给 errback；当没有异常发生时，应该调用 callback，并将 true 作为其参数。

第二种，使用 getTestCallback 函数，这种方式虽然是 DOH 提供的，但在我们的实际测试中却很少用到，因为它并不直观，另外也不太符合实际的需求，不推荐使用。具体请参看下载。

最佳实践总结

在文章的最后，我将给出一些在 Javascript 单元测试中的最佳实践：

对于注册函数，除了 Namespace Object 外，使用 register 就可以满足所有需求。对于 Namespace Object，可使用 registerNs。

对于异步测试函数，尽量采用异步测试的 try-catch 模板。

在测试中，尽量使用 console.group 和 console.groupEnd，这样非常有助于您对错误快速的定位。

使用 Command Line 来运行单元测试非常有效和方便。例如，firebug 的命令行。

小结

本文介绍了如何使用 DOH 来对 Javascript 进行单元测试。DOH 是一个不依赖 Dojo 的测试框架，如果您的项目没有采用 Dojo，同样也可以采用 DOH。另外，使用 DOH 对 Javascript 进行单元测试是保证客户端稳定健壮的利器。