分析JsUnit

2001年初,Edward Hieatt开始“移植”JUnit,目的是在浏览器中测试JavaScript。从那以后,JsUnit的下载次数已近10 000次,大约300人加入了JsUnit的新闻组。JsUnit支持一般的xUnit功能,完全用JavaScript编写,如果你习惯使用JUnit 或者类似的xUnit框架,就会发现JsUnit使用起来相当简单直观。

  JsUnit也有一些不同的地方:这里也有setUp()和tearDown(),不过现在作为函数,而不是方法;测试函数(而不是测试方法)分成多个测试页(而不是测试用例);另外JsUnit提供了自己的基于HTML的测试运行工具。表6-1对这两个框架做了比较。

  表1 JUnit与JsUnit的比较

JUnit JsUnit
Test类扩展 TestCase 测试页包含jsUnitCore.js
测试方法 测试函数
Test类 基于HTML的测试页
TestSuites 基于HTML的测试集
多个测试运行工具 基于HTML/JavaScript的测试运行工具
setUp()和tearDown()方法 setUp()和tearDown()函数
在虚拟机中运行 在浏览器中运行
用Java编写 用JavaScript编写

  1 起步

  对于JsUnit,起步很简单,只需从JsUnit网站(www.edwardh.com/jsunit/)下载JsUnit zip文件。把这个压缩文件解开,会得到一个jsunit文件夹,可以把Web服务器放在这里,这样整个团队或者整个组织就能更容易地使用JsUnit。 JsUnit的大部分“核心”都在jsunit/app目录中,在这里可以看到jsUnitCore.js、jsUnitTracer.js和 jsUnitTestManager.js,另外还有其他一些文件。如果你想运行具体的JsUnit测试,可以使用testRunner.html来运行 jsunit/tests目录中找到的任何测试页。如果你在使用IntelliJ,而且想具体使用JsUnit,jsunit/intellij目录中包含了需要的所有适当文件。

  2 编写测试

  用JsUnit编写测试与用JUnit编写测试很相似。测试函数不能有任何参数,必须有一个前缀test,例如testDateValidation()。测试函数包含在一个测试页(test page)中,这类似于JUnit中的一个Test类。测试页必须包含jsUnitCore.js文件,解开JsUnit zip文件后,就会在jsunit/app目录中找到这个文件。包含这个JavaScript文件实际上就是把一个外部JavaScript文件增加到页面中;只需使用脚本元素<script language="JavaScript" src="jsUnitCore.js"></script>来引用这个文件,要记住,如果你的当前目录不是jsunit/app目录,则还需要提供jsUnitCore.js文件的相关路径信息。当然,在测试页中可以包含任意多个其他函数或JavaScript;实际上,把多个 JavaScript函数放在分开的文件中,是一个很好的做法。测试函数也可以放在单独的JavaScript文件中;不过,如果这样做,就需要使用 exposeTestFunctionNames()方法,这样JsUnit才能找到测试函数。实际上,如果需要针对不同的页面内容建立测试,可以把测试函数放在一个单独的文件中,这样能避免复制-粘贴问题带来的痛苦。

  一般地,JsUnit会自动发现测试函数,就像JUnit会发现所有测试方法一样。不过,有些操作系统/浏览器不能合作。如果你发现不能如你所愿地发现测试函数,使用exposeTestFunctionNames()方法就能解决这个问题。

  断言方法

  现在你对测试函数和测试页有一定的了解了,下面需要写一些实际的测试!与用JUnit一样,你可以使用断言方法(assert method)。断言方法是任何单元测试的基本模块,它们只是一些简单的布尔表达式,可以指示一个给定语句为true还是false。断言失败时,就会产生一个错误,这样将得到众所周知的红条。与JUnit不同,JsUnit没有提供那么丰富的断言方法,但是已经足够你测试JavaScript代码了。注意,除了fail()方法的注释外,其他断言方法的注释都是可选的(这与JUnit类似,甚至也“不正确”地把可选参数放在最前面,而不是最后)。
  assert([comment], booleanValue)
  assertTrue([comment], booleanValue)
  assertFalse([comment], booleanValue)
  assertEquals([comment], value1, value2)
  assertNotEquals([comment], value1, value2)
  assertNull([comment], value)
  assertNotNull([comment], value)
  assertUndefined([comment], value)
  assertNotUndefined([comment], value)
  assertNaN([comment], value)
  assertNotNaN([comment], value)
  fail(comment)

  要看这些方法怎么用于测试(象征性地从字面了解),只需看JsUnit下载包提供的测试页就行了。JsUnit还提供了一个变量:JSUNIT_UNDEFINED_VALUE,它映射到JavaScript中的undefined变量。

  我们说的已经够多的了!下面来看一个简单的测试!这个例子中有一个简单的函数,会让两个数相加,而且有两个测试:一个用于正整数的相加,另一个用于负整数相加。要测试这个函数,先创建一个简单的Web页面,如代码清单1所示,其中包含了jsUnitCore.js文件,另外包含了要测试的函数和测试函数[4]。当然,在生产代码中,可能不能把测试代码与所测试的函数混在一起,但是作为第一次尝试这样做未尝不可。
  代码清单1 简单的测试页
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>A Simple Test Page</title>
  <script language="JavaScript" src="../jsunit/app/jsUnitCore.js"></script>
  <script language="JavaScript">
  function addTwoNumbers(value1, value2) {
  return value1 + value2;
  }
  function testValidArgs() {
  assertEquals("2 + 2 is 4", 4, addTwoNumbers(2, 2));
  }
  function testWithNegativeNumbers() {
  assertEquals("negative numbers: -2 + -2 is -4", -4,
  addTwoNumbers(-2, -2));
  }
  </script>
  </head>
  <body>
  This is a simple test page for addTwoNumbers(value1, value2).
  </body>
  </html>

  运行这些测试会得到图1所示的结果。(后面将更详细地介绍测试运行工具。)

  

图1 简单测试的结果

  显然,不太可能把生产代码(函数)与测试函数混在同一个测试页中。你可能会把生产代码放在一个单独的JavaScript文件中,然后在测试页中包含这个文件。代码清单2就采用了这种方法。

  代码清单2 一种更典型的方法
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>Another Test Page</title>
  <script language="JavaScript" src="../jsunit/app/jsUnitCore.js"></script>
  <script language="JavaScript" src="simpleJS.js"></script>
  <script language="JavaScript">
  function testValidArgs() {
  assertEquals("2 + 2 is 4", 4, addTwoNumbers(2, 2));
  }
  function testWithNegativeNumbers() {
  assertEquals("negative numbers: -2 + -2 is -4", -4,
  addTwoNumbers(-2, -2));
  }
  </script>
  </head>
  <body>
  This is a simple test page for the simpleJS file.
  </body>
  </html>

  JavaScript文件实际上相当简单,如代码清单3所示。

  代码清单3 simple.js
  function addTwoNumbers(value1, value2) {
  return parseInt(value1) + parseInt(value2);
  }

  不出所料,结果是一样的(见图2)。


  图2 采用典型方法的结果

  可以看到,两个测试函数会自动被发现,而且通常都是这样。不过,如果打开测试页,点击Run之后什么也没有发生,可能就需要使用exposeTestFunctionNames(),以确保JsUnit能找到你的测试,如代码清单4所示。

  代码清单4 使用exposeTestFunctionNames()
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>A Test Page With exposeTestFunctions</title>
  <script language="JavaScript" src="../jsunit/app/jsUnitCore.js"></script>
  <script language="JavaScript" src="simpleJS.js"></script>
  <script language="JavaScript">
  function testValidArgs() {
  assertEquals("2 + 2 is 4", 4, addTwoNumbers(2, 2));
  }
  function testWithNegativeNumbers() {
  assertEquals("negative numbers: -2 + -2 is -4", -4,
  addTwoNumbers(-2, -2));
  }
  function exposeTestFunctionNames() {
  var tests = new Array(2);
  tests[0] = "testValidArgs";
  tests[1] = "testWithNegativeNumbers";
  return tests;
  }
  </script>
  </head>
  <body>
  This is a simple test page that uses exposeTestFunctionNames.
  </body>
  </html>

  如你所愿,这样就能工作了(见图3)。

  如果看到如图4中所示的错误消息,说明你可能忘了在测试页中包含jsUnitCore.js,或者文件的路径不对。请检查测试页,再运行一次。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kingapex1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值