玩转Javascript 给JS写测试

  给js写测试已经不是什么稀奇的事情了，最近项目里用了jasmine和JsTestDriver两种js测试框架。JsTestDriver易于与持续构建系统相集成并能够在多个浏览器上运行测试轻松实现TDD风格的开发。当在项目中配置好JsTestDriver以后，如同junit测试java文件一般，JsTestDriver可以直接通过运行js文件来进行单元测试。JsTestDriver框架本身就是JAVA的jar包，需要在本地运行并监听一个端口。JsTestDriver是xUnit测试框架领域的一个比较新的成员，它最初起源于Google。本文将介绍如何搭建一个JsTestDriver测试框架。

  首先简单介绍一下JsTestDriver的特点：

优点：

1.可以一次测试多个浏览器，使用方法是在启动服务时可以将多个浏览器的路径作为参数传进去。

2.测试运行得很快，因为不需要将结果添加到DOM中呈现出来，它们能够同时在任意多的浏览器中运行，未修改的文件浏览器会从缓存提取。

3.不需要HTML配件文件，仅仅只需提供一个或多个脚本和测试脚本，测试运行器运行时会创建一个空文件。

4.支持其它测试框架，可以测试其它测试框架写的测试代码，比如有对应的插件可以将QUnit和Jasmine测试代码转换成JsTestDriver的测试代码。

缺点：

不能在浏览器中测试，只能通过自动化工具或控制台运行。生成的结果不够直观。安装使用稍微有点麻烦，依赖于JAVA环境

搭建步奏：

一.编写测试test.js

1.给一个测试js文件写一个TestCase用来声明一个测试对象

2.写setUp，初始化被测对象

3.编写测试函数，js测试驱动程序提供了一个声明,让测试更容易阅读和维护方式向测试添加HTML。把有效的HTML在doc注释和js测试驱动程序将相应的DOM到一个变量,或者将其添加到文档的身体。

HtmlDeclaredInTest = TestCase("HtmlDeclaredInTest");
 
HtmlDeclaredInTest.prototype.setUp = function() {
  //test utils object contains convenience functions
  this.testUtils = new myapp.Greeter();
};
 
HtmlDeclaredInTest.prototype.testVariableHtml = function() {
 /*:DOC mainDiv = <div id='main'>
                    <div class='text'>Hello word.</div>
                  </div> */
  var child = this.testUtils.findFirstDiv(this.mainDiv);
 
  assertEquals("text", child.className);
  assertEquals("Hello word.", child.innerHTML);
};

二.编写源文件source.js

1.写一个让测试通过的源代码

2.运行测试

myapp = {};

myapp.Greeter = function() { };

myapp.Greeter.prototype.findFirstDiv = function(element) {
  var result, child ;
   
  for ( i = 0; i < element.childNodes.length; i++) {
    child = element.childNodes[i];
    if (child.nodeType == 1 && child.tagName=='DIV')
      result = child;
  }
   
  return result;
};

三.搭建运行环境

1.在google下载JsTestDriver唯一需要的一个集成jar包——JsTestDriver.jar

2.添加配置文件jsTestDriver.jstd，YAML格式文件，或者默认文件为jsTestDriver.conf与jar包同一目录下。

server: http://localhost:9876

load:
  - src/*.js
  - src-test/*.js

3.启动服务器

Java -jar JsTestDriver-1.3.5.jar --port 9876 --browser **/**/firefox.exe

访问 http://localhost:9876/capture

4.运行测试

java -jar JsTestDriver-1.3.5.jar  --tests all --config **/**/jsTestDriver.jstd

5.结果

Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (0.00 ms)
  Safari 528.16: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (0.00 ms)
  Firefox 1.9.0.10: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (0.00 ms)