Web开发者必备的JavaScript单元测试工具(1)


当前,在软件开发中单元测试越来越受到开发者的重视,它能提高软件的开发效率,而且能保障开发的质量。以往,单元测试往往多见于服务端的开发中,但随着Web编程领域的分工逐渐明细,在前端Javascript开发领域中,也可以进行相关的单元测试,以保障前端开发的质量。在本文中,将初步探讨如何在Javascript中进行单元测试及其注意要点。


Javascript中的单元测试工具


在Javascript的单元测试中工具中,有很多开源的工具,本文选取其中两个比较典型实用的工具进行介绍:jsTestDriver和Qunit。先来看下jsTestDriver(下载地址:http://code.google.com/p/js-test-driver/wiki/GettingStarted)。


jsTestDriver以客户服务端的方式运行,在客户端发送测试请求到服务端,整个运行是在可以捕捉的浏览器中进行的,其优点为它能很容易地与代码编辑器整合,以及能成为自动构建的一部分。jsTestDriver包括一系列能与Eclipse,Maven和IntelliJ整合的插件,甚至与Visual Studio整合也是可行的(参考这篇文章),比如下图是与EditPlus整合的一个示意图:



开源的单元测试工具jsTestDriver


jsTestDriver的安装


安装jsTestDriver的步骤如下:


1. 从jsTestDriver的下载页中下载相关的JAR文件,下载地址为:http://code.google.com/p/js-test-driver/downloads/list,下载其中的JsTestDriver-1.3.3a.jar 这个文件


2. 创建两个文件夹,其中一个为名称为src的存放Javascript源代码的文件,另外一个是用来存放测试用例的文件,文件夹命名为src-test。


3. 创建一个配置文件,配置文件名为jsTestDriver.conf,配置文件如下:


server: http://localhost:9876


load:


- src/*.js


- src-test/*.js


这里指出了启动位于9876的端口进行监听,并且先加载src文件夹下的所有js文件夹,然后在加载src-test文件夹下的js文件进行测试。


4. 接下来,我们配置jsTestDriver的服务端,以让其监控chrome浏览器,让其运行Javascript测试用例。在命令行输入如下代码,具体路径请根据实际情况修改。


"C:\Program Files (x86)\Java\jre6\bin\java" -jar JsTestDriver-1.3.2.jar --port 4224 --browser "C:\Documents and Settings\Tarwn\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"


这样的话,会在4224端口启动jsTestDriver,并且会启动一个chrmoe浏览器的实例,这个实例会捕捉所有的在Chrmoe中运行的Javascript单元测试。接下来,编写一个.cmd文件,在命令方式下执行,以执行测试,测试所有放在src-test中的测试用例,代码如下:


  1. "C:\Program Files (x86)\Java\jre6\bin\java" -jar JsTestDriver-1.3.2.jar --tests all  
  2. Pause 

开始编写Javascript


我们开始编写一个简单的Javascript来进行测试,先在src和src-test目录下,分别编


写如下代码:


Src目录下的mystuff.js


  1. myAwesomeApp = {};  
  2. myAwesomeApp.MyAwesomeClass = function(){};  
  3. myAwesomeApp.MyAwesomeClass.prototype.add = function(num0, num1){  
  4. return num0 + num1;  
  5. };  
  6. Src-test 目录下的mystuff.js  
  7. TestCase("Sample Test Case",{  
  8. "test Number plus Zero Equals Number"function(){  
  9. var adder = new myAwesomeApp.MyAwesomeClass();  
  10. assertEquals(5, adder.add(5,0));  
  11. },  
  12. "test Number plus Number Equals Sum"function(){  
  13. var adder = new myAwesomeApp.MyAwesomeClass();  
  14. assertEquals(8, adder.add(5,3));  
  15. },  
  16. "test Zero plus Number Equals Number"function(){  
  17. var adder = new myAwesomeApp.MyAwesomeClass();  
  18. assertEquals(5, adder.add(0,5));  
  19. },  
  20. "test Number plus Negative of Number Equals Zero"function(){  
  21. var adder = new myAwesomeApp.MyAwesomeClass();  
  22. assertEquals(0, adder.add(5,-5));  
  23. },  
  24. "test Fails miserably"function(){  
  25. fail("miserably");   
  26. }  
  27. }); 

熟悉单元测试的开发者对它们应该不感到陌生。在上面的测试代码组中,分别测试


了多种用例,用到的都是assertEquals断言。更多的用法请参考其官方主页的介绍。


接下来,我们开始运行测试用例,方法为在命令行模式下,


"C:\Program Files (x86)\Java\jre6\bin\java" -jar ../JsTestDriver-1.3.2.jar --port 4224 --browser "C:\Documents and Settings\Tarwn\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"


这样就可以启动chrome浏览器监听相关的Javascript单元测试用例。运行后可以看到打开了浏览器,如下图:



开源的单元测试工具jsTestDriver


接下来开始进行单元测试,命令行输入如下代码:


  1. "C:\Program Files (x86)\Java\jre6\bin\java" -jar ../JsTestDriver-1.3.2.jar --tests all 

运行后,会在浏览器中看到相关的输出结果,如下:


  1. ....F  
  2. Total 5 tests (Passed: 4; Fails: 1; Errors: 0) (0.00 ms)  
  3. Chrome 13.0.782.220 Windows: Run 5 tests (Passed: 4; Fails: 1; Errors 0) (0.00 ms)  
  4. Object Literal Test Case.test Fails miserably failed (0.00 ms): AssertError: miserably  
  5. AssertError: miserably  
  6. at Object.test Fails miserably (http://localhost:4224/test/src-test/mystuff.js:22:3)  
  7. Tests failed: Tests failed. See log for details. 

从结果中可以看到,.S表示成功通过的单元测试,.F为失败的单元测试用例,而.E为错误的测试用例,信息中还指出了有多少个单元测试,通过了多少,多少个没有通过。


jsTestDriver还支持传统的setup和teardown等单元测试方法。更多的相关介绍可以参考其在线帮助手册。





标签:

友情链接
轻松育儿世界奇观
苏ICP备16066217号-2