1. 猴子技术宅首页
  2. JavaScript干货教程

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


本文主要通过如下的几个部分对 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>utildoh 下找到 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 进行单元测试是保证客户端稳定健壮的利器。

—-想了解更多的linux相关异常处理怎么解决关注<猴子技术宅>



本文来自网络收集,不代表猴子技术宅立场,如涉及侵权请点击右边联系管理员删除。

如若转载,请注明出处:https://www.ssfiction.com/archives/65661

发表评论

电子邮件地址不会被公开。 必填项已用*标注