QUnit 5分鐘教程

時間 2020-01-15

原文原文鏈接

QUnit是一個很是簡單並且強大的單元測試框架，簡單到稍微懂點javascript的人，5分鐘不到就會了，如下就是這個框架的用法：javascript

首先，既然是一個框架，確定有框架的共有特徵（框架的css->qunit.css,框架的js函數庫->qunit.js，框架的HTML 顯示頁面->framework.html，咱們按照規範放置在應該放置的地方，以下圖所示：）css

既然是javascript測試框架，那麼確定就有兩部分組成，一部分是被測試的javascript函數，另外一部分是測試語句的javascript函數，咱們分別建2個文件夾(needTestJS和tcJS來放置）。html

Part 1: 被測試的javascript函數：java

咱們這裏寫了兩個函數，按照QUnit的建議，咱們爲其定義一個測試模塊（模塊化嘛）一個用於測試參數是否爲數字，一個用於測試傳入的數是否爲偶數：json

  
  
  
  
   
   
   
   //定義測試模塊 
   
   
   
   module ("測試示例"); 
   
   
   
   //定義一個簡單的函數，判斷參數是否是數字 
   
   
   
   function  isNumber (para){ 
   
   
   
       if (typeof para=="number") { 
   
   
   
           return true; 
   
   
   
       }else{ 
   
   
   
           return false; 
   
   
   
       } 
   
   
   
   } 
   
   
   
    
   
   
   
   //這個函數用於判斷傳入的數是否是偶數 
   
   
   
   function isEven(val) { 
   
   
   
       return val % 2 === 0; 
   
   
   
   }

Part 2:測試用例：框架

測試用例也是javascript函數，咱們必須用測試斷言來構造這些測試用例，有不少種測試斷言，最經常使用的幾種有：ok() ,equals(),same()，具體他們用在什麼場合見個人代碼註釋部分：ide

  
  
  
  
   
   
   
   //開始單元測試 
   
   
   
    
   
   
   
   //test的第一個參數是展示在頁面上的這個測試集合的名稱，能夠指定任何有意義的名字 
   
   
   
   test('isNumber()',function(){ 
   
   
   
       //列舉各類可能的狀況，保證每種條件應該符合的邏輯 
   
   
   
        
   
   
   
       //ok 是QUnit中最多見的用於判斷的函數，不過只能判斷true和false 
   
   
   
       //正確，則綠色的條子，錯誤就會爆紅 
   
   
   
       ok (isNumber(2), "2是一個數字"); 
   
   
   
       ok(!isNumber("2"),"字符串2不是一個數字"); 
   
   
   
       ok(isNumber(NaN),"NaN是一個數字"); 
   
   
   
        
   
   
   
    
   
   
   
        
   
   
   
   } 
   
   
   
   ); 
   
   
   
    
   
   
   
    
   
   
   
    
   
   
   
   test("isEven()" ,function(){ 
   
   
   
        
   
   
   
    
   
   
   
       //equals(actual,expected,[message]) 用於至關的判斷函數 
   
   
   
       equals(true ,isEven(2),'2是偶數'); 
   
   
   
       equals(false,isEven(3),'3不是偶數'); 
   
   
   
   } 
   
   
   
   ); 
   
   
   
    
   
   
   
    
   
   
   
   test("恆等斷言" ,function(){ 
   
   
   
        
   
   
   
       //same()是恆等斷言，能夠用來斷定2個對象是否相等（能夠不相同） 
   
   
   
       same( {}, {}, 'passes, objects have the same content'); 
   
   
   
       same( {a: 1}, {a: 50} , 'passes'); 
   
   
   
       same( [], [], 'passes, arrays have the same content'); 
   
   
   
       same( [1], [1], 'passes'); 
   
   
   
   } 
   
   
   
   );

Part 3: 顯示結果：模塊化

測試，要調用這些測試方法和顯示結果（無數java developer的爲綠條而歡呼雀躍，爲紅條而憂傷，QUnit中沿用了JUnit中的顏色設定風格），咱們必需要有個底座，幸運的是,QUnit框架已經爲咱們提供了這個底座(HTML頁面)，咱們只須要吧被測試的js和測試用例js添加進去，以下所示：函數

  
  
  
  
   
   
   
   <!DOCTYPE html> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
       <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
   
   
   
       <title>QUnit Test Suite</title> 
   
   
   
       <link rel="stylesheet" href="../css/qunit.css" type="text/css" media="screen"> 
   
   
   
       <script type="text/javascript" src="../js/qunit.js"></script> 
   
   
   
       <!-- 這裏放置被測試的函數所在js文件 --> 
   
   
   
       <script type="text/javascript" src="../project/needTestedJS/module.js"></script> 
   
   
   
       <!-- 這裏放測試用例js文件 --> 
   
   
   
       <script type="text/javascript" src="../project/tcJS/moduleTest.js"></script> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       <h1 id="qunit-header">QUnit測試套件</h1> 
   
   
   
       <h2 id="qunit-banner"></h2> 
   
   
   
       <div id="qunit-testrunner-toolbar"></div> 
   
   
   
       <h2 id="qunit-userAgent"></h2> 
   
   
   
       <ol id="qunit-tests"></ol> 
   
   
   
   </body> 
   
   
   
   </html>

而後咱們就能夠看到測試結果了，正確的則顯示綠條和註解，錯誤的則顯示紅條以及錯誤信息：單元測試

好比咱們這裏故意放了一個錯誤，咱們在測「恆等斷言」時候，咱們故意給了2個不等的json 對象，一個是{a:1}，一個是{a,50},因此，這裏就「爆紅」了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。