甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

jsamine单元测试框架和ext-js框架集成

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

成都创新互联公司专注于三明网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供三明营销型网站建设，三明网站制作、三明网页设计、三明网站官网定制、小程序定制开发服务，打造三明网络公司原创品牌,更为您提供三明网站排名全网营销落地服务。

 

一：介绍

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

二：适用范围

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

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

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

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

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

 

三:我们为什么选择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.  
  3.   "http://www.w3.org/TR/html4/loose.dtd"> 
  4.  
  5.  
  6.  
  7.   Jasmine Spec Runner 
  8.  
  9.    
  10.  
  11.    
  12.  
  13.    
  14.  
  15.    
  16.  
  17.   
  18.  
  19.    
  20.  
  21.    
  22.  
  23.    
  24.  
  25.   
  26.  
  27.    
  28.  
  29.    
  30.  
  31.  
  32.    
  33.  
  34.   
  35.    
  36.  
  37.  
  38.   (function() { 
  39.  
  40.       var jasminejasmineEnv = jasmine.getEnv(); 
  41.       jasmineEnv.updateInterval = 1000; 
  42.       var htmlReporter = new jasmine.HtmlReporter(); 
  43.       jasmineEnv.addReporter(htmlReporter); 
  44.       jasmineEnv.specFilter = function(spec) { 
  45.         return htmlReporter.specFilter(spec); 
  46.       }; 
  47.  
  48.       var currentWindowOnload = window.onload; 
  49.  
  50.       window.onload = function() { 
  51.         if (currentWindowOnload) { 
  52.           currentWindowOnload(); 
  53.         } 
  54.         execJasmine(); 
  55.       }; 
  56.   
  57.       function execJasmine() { 
  58.         jasmineEnv.execute(); 
  59.  
  60.       }
  61.  
  62.     })(); 
  63.  

  65.  
  66.    
  67.  
  68.  
  69.  

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

 

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

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

 

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

 

jsamine单元测试框架和ext-js框架集成

 


当前文章：jsamine单元测试框架和ext-js框架集成
网站网址：http://chengdu.cdxwcx.cn/article/pcpoho.html

其他资讯