最近研究了下jasmine框架，收益颇丰。基于公司一位同事的文档，我这里列举下jasmine框架的一些特征。

 

一：介绍

Jasmine框架是一个行为驱动的开发框架，用于测试javascript代码，它不会依赖于任何其他的javascript框架，也不需要一个DOM，并且它有非常简单和清晰的语法。

二：适用范围

因为Jasmine框架不依赖浏览器，DOM，或者任何javascript框架，所以它特别适合单元测试网站，Node.js项目或者任何有javascript运行的项目。

小例子1：比如要测试是否真实值比期望值小

   
   
   
   
    
    
    
    
    
  1. beforeEach(function() { 
    2. 
    
    
    
    
  2.   this.addMatchers({ 
    3. 
    
    
    
    
  3.  
    4. 
    
    
    
    
  4.     toBeLessThan: function(expected) { 
    5. 
    
    
    
    
  5.       var actual = this.actual; 
    6. 
    
    
    
    
  6.       var notText = this.isNot ? " not" : ""; 
    7. 
    
    
    
    
  7.  
    8. 
    
    
    
    
  8.       this.message = function () { 
    9. 
    
    
    
    
  9.         return "Expected " + actual + notText + " to be less than " + expected; 
    10. 
    
    
    
    
  10.       } 
    11. 
    
    
    
    
  11.  
    12. 
    
    
    
    
  12.       return actual < expected; 
    13. 
    
    
    
    
  13.     } 
    14. 
    
    
    
    
  14.  
    15. 
    
    
    
    
  15.   }); 
    16. 
    
    
    
    
  16. }); 
    17.

小例子2: 比如要测试Ajax或者其他异步的行为：

   
   
   
   
    
    
    
    
    
  1. var Klass = function () { 
    2. 
    
    
    
    
  2. }; 
    3. 
    
    
    
    
  3.  
    4. 
    
    
    
    
  4. Klass.asyncMethod = function (callback) { 
    5. 
    
    
    
    
  5.   someAsyncCall(callback); 
    6. 
    
    
    
    
  6. }; 
    7. 
    
    
    
    
  7.  
    8. 
    
    
    
    
  8. ... 
    9. 
    
    
    
    
  9.  
    10. 
    
    
    
    
  10. it('should test async call', function () { 
    11. 
    
    
    
    
  11.   spyOn(Klass, 'asyncMethod'); 
    12. 
    
    
    
    
  12.   var callback = jasmine.createSpy(); 
    13. 
    
    
    
    
  13.  
    14. 
    
    
    
    
  14.   Klass.asyncMethod(callback); 
    15. 
    
    
    
    
  15.   expect(callback).not.toHaveBeenCalled(); 
    16. 
    
    
    
    
  16.  
    17. 
    
    
    
    
  17.   var someResponseData = 'foo'; 
    18. 
    
    
    
    
  18.   Klass.asyncMethod.mostRecentCall.args[0](someResponseData); 
    19. 
    
    
    
    
  19.   expect(callback).toHaveBeenCalledWith(someResponseData); 
    20. 
    
    
    
    
  20.  
    21. 
    
    
    
    
  21. }); 
    22.

 

三:我们为什么选择Jasmine框架？

虽然在市面上有许多种类的js单元测试框架，比如TestSwarm, JsTestDriver,Buster.js,YUI Yeti,Sinon等，但是很多单元测试框架只支持和浏览器协同工作，有些单元测试框架无法支持异步回调代码的测试。有些代码，对于IDE很难理解，然而，Jasmine框架则是集各种框架优点于一身的好框架。

 

四：Jasmine框架的优秀设计原则：

(1)好的js单元测试框架不应该联合到任何浏览器，框架，平台或者宿主机器的语言设置。

(2)好的js单元测试框架应该有符合js语言习惯的语法。

(3)好的js单元测试框架应该在任何js可以运行的地方运行

(4)好的js单元测试框架应该对于被测试的应用是非侵入式的。

(5)好的js单元测试框架应该能和IDE很好融合，比如可以通过IDE的静态代码质量检查。

(6)好的js单元测试框架应该足够简单，并且容易上手。(这一点我深有体会，我看5分钟就学会了，然后写了第一个demo并且跑通了）

 

五:实践

这里给出一个我前几天实践的例子，我利用jasmine来测试ext-js的代码：

首先我们要建立单元测试的目录结构，基于建立在test目录之下，我们共需要2个目录和一个文件。

 

目录1: lib ---这个目录是存放jasmine框架本身的代码

目录2: spec---这个目录是存放所有的单元测试代码

SpecRunner.html--这个文件用于配置整个jasmine单元测试框架，因为我们最简单的应用只要把测试结果输出到控制台上，所以我们这里只配置了ConsoleReporter.

 

SpecRunner.html的代码如下：

   
   
   
   
    
    
    
    
    
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3.   "http://www.w3.org/TR/html4/loose.dtd"> 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. <html> 
    6. 
    
    
    
    
  6. <head> 
    7. 
    
    
    
    
  7.   <title>Jasmine Spec Runnertitle> 
    8. 
    
    
    
    
  8.  
    9. 
    
    
    
    
  9.   <link rel="shortcut icon" type="p_w_picpath/png" href="lib/jasmine-1.2.0/jasmine_favicon.png"> 
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11.   <link rel="stylesheet" type="text/css" href="lib/jasmine-1.2.0/jasmine.css"> 
    12. 
    
    
    
    
  12.  
    13. 
    
    
    
    
  13.   <script type="text/javascript" src="lib/jasmine-1.2.0/jasmine.js">script> 
    14. 
    
    
    
    
  14.  
    15. 
    
    
    
    
  15.   <script type="text/javascript" src="lib/jasmine-1.2.0/jasmine-html.js">script> 
    16. 
    
    
    
    
  16.  
    17. 
    
    
    
    
  17.   
    18. 
    
    
    
    
  18.  
    19. 
    
    
    
    
  19.    
    20. 
    
    
    
    
  20.  
    21. 
    
    
    
    
  21.    
    22. 
    
    
    
    
  22.  
    23. 
    
    
    
    
  23.   <script type="text/javascript" src="/html/js/ext-js/ext-all.js">script> 
    24. 
    
    
    
    
  24.  
    25. 
    
    
    
    
  25.   
    26. 
    
    
    
    
  26.  
    27. 
    
    
    
    
  27.    
    28. 
    
    
    
    
  28.  
    29. 
    
    
    
    
  29.   <script type="text/javascript" src="../app/app.js">script> 
    30. 
    
    
    
    
  30.  
    31. 
    
    
    
    
  31.  
    32. 
    
    
    
    
  32.    
    33. 
    
    
    
    
  33.  
    34. 
    
    
    
    
  34.   <script type="text/javascript" src="spec/ProjectFoundationVerification.js">script>
    35. 
    
    
    
    
  35.   <script type="text/javascript"> 
    36. 
    
    
    
    
  36.  
    37. 
    
    
    
    
  37.  
    38. 
    
    
    
    
  38.   (function() { 
    39. 
    
    
    
    
  39.  
    40. 
    
    
    
    
  40.       var jasminejasmineEnv = jasmine.getEnv(); 
    41. 
    
    
    
    
  41.       jasmineEnv.updateInterval = 1000; 
    42. 
    
    
    
    
  42.       var htmlReporter = new jasmine.HtmlReporter(); 
    43. 
    
    
    
    
  43.       jasmineEnv.addReporter(htmlReporter); 
    44. 
    
    
    
    
  44.       jasmineEnv.specFilter = function(spec) { 
    45. 
    
    
    
    
  45.         return htmlReporter.specFilter(spec); 
    46. 
    
    
    
    
  46.       }; 
    47. 
    
    
    
    
  47.  
    48. 
    
    
    
    
  48.       var currentWindowOnload = window.onload; 
    49. 
    
    
    
    
  49.  
    50. 
    
    
    
    
  50.       window.onload = function() { 
    51. 
    
    
    
    
  51.         if (currentWindowOnload) { 
    52. 
    
    
    
    
  52.           currentWindowOnload(); 
    53. 
    
    
    
    
  53.         } 
    54. 
    
    
    
    
  54.         execJasmine(); 
    55. 
    
    
    
    
  55.       }; 
    56. 
    
    
    
    
  56.   
    57. 
    
    
    
    
  57.       function execJasmine() { 
    58. 
    
    
    
    
  58.         jasmineEnv.execute(); 
    59. 
    
    
    
    
  59.  
    60. 
    
    
    
    
  60.       }
    61. 
    
    
    
    
  61.  
    62. 
    
    
    
    
  62.     })(); 
    63. 
    
    
    
    
  63.  
    64. 
    
    
    
    

    65. 
    
    
    
    
  65.  
    66. 
    
    
    
    
  66.   script> 
    67. 
    
    
    
    
  67. head> 
    68. 
    
    
    
    
  68. <body> 
    69. 
    
    
    
    
  69. body> 
    70.

从这段代码我们不难看出，13-15行引入了jasmine框架，23行引入了ext-js库，因为我们要测试ext-js代码，29行是需要被我们测试的代码，34行是单元测试代码，也就是我们写的测试用例，第40-59行则是创建一个HTMLReporter用于显示，并且启动jasmine框架。

 

我们写了一个很简单的测试用例，它用来判定ext-js库的一些基本信息：

   
   
   
   
    
    
    
    
    
  1. /** 
    2. 
    
    
    
    
  2.  
    3. 
    
    
    
    
  3. * This file is used for verifying the project foundation 
    4. 
    
    
    
    
  4.  
    5. 
    
    
    
    
  5. */ 
    6. 
    
    
    
    
  6.  
    7. 
    
    
    
    
  7.  
    8. 
    
    
    
    
  8. describe("Ext-js Basic Information", function() { 
    9. 
    
    
    
    
  9.  
    10. 
    
    
    
    
  10.  
    11. 
    
    
    
    
  11.          //test whether ext-js has been loaded 
    12. 
    
    
    
    
  12.  
    13. 
    
    
    
    
  13.     it(" Ext-js has been loaded", function() { 
    14. 
    
    
    
    
  14.  
    15. 
    
    
    
    
  15.         expect(Ext).toBeDefined(); 
    16. 
    
    
    
    
  16.  
    17. 
    
    
    
    
  17.          
    18. 
    
    
    
    
  18.  
    19. 
    
    
    
    
  19.     }); 
    20. 
    
    
    
    
  20.  
    21. 
    
    
    
    
  21.      
    22. 
    
    
    
    
  22.  
    23. 
    
    
    
    
  23.     //test whether ext-js major version is 4 
    24. 
    
    
    
    
  24.  
    25. 
    
    
    
    
  25.     it(" Ext-js has version ,and major version is 4" ,function(){ 
    26. 
    
    
    
    
  26.  
    27. 
    
    
    
    
  27.          expect(Ext.getVersion()).toBeTruthy(); 
    28. 
    
    
    
    
  28.  
    29. 
    
    
    
    
  29.         expect(Ext.getVersion().major).toEqual(4); 
    30. 
    
    
    
    
  30.  
    31. 
    
    
    
    
  31.     }); 
    32. 
    
    
    
    
  32.  
    33. 
    
    
    
    
  33. }); 
    34. 
    
    
    
    
  34.  
    35. 
    
    
    
    
  35.   
    36.

 

最终测试的结果，就是在浏览器上显示了测试报告，绿条告诉我们测试用例都通过了：

 

jsamine单元测试框架和ext-js框架集成_第1张图片