电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 DOH 对 Web 前端 JavaScript 进行单元测试 -1 [打印本页]

作者: look_w 时间: 2018-8-23 19:54 标题: 使用 DOH 对 Web 前端 JavaScript 进行单元测试 -1

本文主要通过如下的几个部分对 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-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
2
3
4
5
6
7
8
9
10
11
12
13
14

// 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 的同一目录。框架建立后，我们接下来编写第一个测试用例。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)