溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jsamine單元測試框架和ext-js框架集成

發(fā)布時間：2020-06-10 14:09:59 來源：網(wǎng)絡 閱讀：1052 作者：charles_wang888 欄目：web開發(fā)

 

最近研究了下jasmine框架，收益頗豐?；诠疽晃煌碌奈臋n，我這里列舉下jasmine框架的一些特征。

 

一：介紹

Jasmine框架是一個行為驅(qū)動的開發(fā)框架，用于測試javascript代碼，它不會依賴于任何其他的javascript框架，也不需要一個DOM，并且它有非常簡單和清晰的語法。

二：適用范圍

因為Jasmine框架不依賴瀏覽器，DOM，或者任何javascript框架，所以它特別適合單元測試網(wǎng)站，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. }); 

 

三:我們?yōu)槭裁催x擇Jasmine框架？

雖然在市面上有許多種類的js單元測試框架，比如TestSwarm, JsTestDriver,Buster.js,YUI Yeti,Sinon等，但是很多單元測試框架只支持和瀏覽器協(xié)同工作，有些單元測試框架無法支持異步回調(diào)代碼的測試。有些代碼，對于IDE很難理解，然而，Jasmine框架則是集各種框架優(yōu)點于一身的好框架。

 

四：Jasmine框架的優(yōu)秀設計原則：

(1)好的js單元測試框架不應該聯(lián)合到任何瀏覽器，框架，平臺或者宿主機器的語言設置。

(2)好的js單元測試框架應該有符合js語言習慣的語法。

(3)好的js單元測試框架應該在任何js可以運行的地方運行

(4)好的js單元測試框架應該對于被測試的應用是非侵入式的。

(5)好的js單元測試框架應該能和IDE很好融合，比如可以通過IDE的靜態(tài)代碼質(zhì)量檢查。

(6)好的js單元測試框架應該足夠簡單，并且容易上手。(這一點我深有體會，我看5分鐘就學會了，然后寫了第一個demo并且跑通了）

 

五:實踐

這里給出一個我前幾天實踐的例子，我利用jasmine來測試ext-js的代碼：

首先我們要建立單元測試的目錄結(jié)構(gòu)，基于建立在test目錄之下，我們共需要2個目錄和一個文件。

 

目錄1: lib ---這個目錄是存放jasmine框架本身的代碼

目錄2: spec---這個目錄是存放所有的單元測試代碼

SpecRunner.html--這個文件用于配置整個jasmine單元測試框架，因為我們最簡單的應用只要把測試結(jié)果輸出到控制臺上，所以我們這里只配置了ConsoleReporter.

 

SpecRunner.html的代碼如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  2.  
  3.   "http://www.w3.org/TR/html4/loose.dtd"> 
  4.  
  5. <html> 
  6. <head> 
  7.   <title>Jasmine Spec Runner</title> 
  8.  
  9.   <link rel="shortcut icon" type="p_w_picpath/png" href="lib/jasmine-1.2.0/jasmine_favicon.png"> 
  10.  
  11.   <link rel="stylesheet" type="text/css" href="lib/jasmine-1.2.0/jasmine.css"> 
  12.  
  13.   <script type="text/javascript" src="lib/jasmine-1.2.0/jasmine.js"></script> 
  14.  
  15.   <script type="text/javascript" src="lib/jasmine-1.2.0/jasmine-html.js"></script> 
  16.  
  17.   
  18.  
  19.   <!-- include the ext-js library here --> 
  20.  
  21.   <!-- load the ext framework work under root folder  --> 
  22.  
  23.   <script type="text/javascript" src="/html/js/ext-js/ext-all.js"></script> 
  24.  
  25.   
  26.  
  27.   <!-- include the source files here which need to be tested --> 
  28.  
  29.   <script type="text/javascript" src="../app/app.js"></script> 
  30.  
  31.  
  32.   <!-- include spec files here...they are test cases --> 
  33.  
  34.   <script type="text/javascript" src="spec/ProjectFoundationVerification.js"></script>
  35.   <script type="text/javascript"> 
  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.   </script> 
  67. </head> 
  68. <body> 
  69. </body> 

從這段代碼我們不難看出，13-15行引入了jasmine框架，23行引入了ext-js庫，因為我們要測試ext-js代碼，29行是需要被我們測試的代碼，34行是單元測試代碼，也就是我們寫的測試用例，第40-59行則是創(chuàng)建一個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.   

 

最終測試的結(jié)果，就是在瀏覽器上顯示了測試報告，綠條告訴我們測試用例都通過了：

 

jsamine單元測試框架和ext-js框架集成

 

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手