QUnit5分鐘教程

餘二五發表於2017-11-15

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

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

既然是javascript測試框架，那麼肯定就有兩部分組成，一部分是被測試的javascript函式，另一部分是測試語句的javascript函式，我們分別建2個資料夾(needTestJS和tcJS來放置）。

 

Part 1: 被測試的javascript函式：

我們這裡寫了兩個函式，按照QUnit的建議，我們為其定義一個測試模組（模組化嘛）一個用於測試引數是否為數字，一個用於測試傳入的數是否為偶數：



    

  1. //定義測試模組 
    2. 

  2. module (“測試示例”); 
    3. 

  3. //定義一個簡單的函式，判斷引數是不是數字 
    4. 

  4. function  isNumber (para){ 
    5. 

  5.     if (typeof para==“number”) { 
    6. 

  6.         return true; 
    7. 

  7.     }else{ 
    8. 

  8.         return false; 
    9. 

  9.     } 
    10. 

  10. } 
    11. 

  11.  
    12. 

  12. //這個函式用於判斷傳入的數是不是偶數 
    13. 

  13. function isEven(val) { 
    14. 

  14.     return val % 2 === 0; 
    15. 

  15. } 
    16. 



 


Part 2:測試用例：


測試用例也是javascript函式，我們必須用測試斷言來構造這些測試用例，有很多種測試斷言，最常用的幾種有：ok() ,equals(),same()，具體他們用在什麼場合見我的程式碼註釋部分：




    

  1. //開始單元測試 
    2. 

  2.  
    3. 

  3. //test的第一個引數是展現在頁面上的這個測試集合的名稱，可以指定任何有意義的名字 
    4. 

  4. test(`isNumber()`,function(){ 
    5. 

  5.     //列舉各種可能的情況，保證每種條件應該符合的邏輯 
    6. 

  6.      
    7. 

  7.     //ok 是QUnit中最常見的用於判斷的函式，不過只能判斷true和false 
    8. 

  8.     //正確，則綠色的條子，錯誤就會爆紅 
    9. 

  9.     ok (isNumber(2), “2是一個數字”); 
    10. 

  10.     ok(!isNumber(“2”),“字串2不是一個數字”); 
    11. 

  11.     ok(isNumber(NaN),“NaN是一個數字”); 
    12. 

  12.      
    13. 

  13.  
    14. 

  14.      
    15. 

  15. } 
    16. 

  16. ); 
    17. 

  17.  
    18. 

  18.  
    19. 

  19.  
    20. 

  20. test(“isEven()” ,function(){ 
    21. 

  21.      
    22. 

  22.  
    23. 

  23.     //equals(actual,expected,[message]) 用於相當的判斷函式 
    24. 

  24.     equals(true ,isEven(2),`2是偶數`); 
    25. 

  25.     equals(false,isEven(3),`3不是偶數`); 
    26. 

  26. } 
    27. 

  27. ); 
    28. 

  28.  
    29. 

  29.  
    30. 

  30. test(“恆等斷言” ,function(){ 
    31. 

  31.      
    32. 

  32.     //same()是恆等斷言，可以用來判定2個物件是否相等（可以不相同） 
    33. 

  33.     same( {}, {}, `passes, objects have the same content`); 
    34. 

  34.     same( {a: 1}, {a: 50} , `passes`); 
    35. 

  35.     same( [], [], `passes, arrays have the same content`); 
    36. 

  36.     same( [1], [1], `passes`); 
    37. 

  37. } 
    38. 

  38. ); 
    39. 



 


Part 3: 顯示結果：


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




    

  1. <!DOCTYPE html> 
    2. 

  2. <html> 
    3. 

  3. <head> 
    4. 

  4.     <meta content=“text/html; charset=utf-8” http-equiv=“Content-Type”> 
    5. 

  5.     <title>QUnit Test Suite</title> 
    6. 

  6.     <link rel=“stylesheet” href=“../css/qunit.css” type=“text/css” media=“screen”> 
    7. 

  7.     <script type=“text/javascript” src=“../js/qunit.js”></script> 
    8. 

  8.     <!– 這裡放置被測試的函式所在js檔案 –> 
    9. 

  9.     <script type=“text/javascript” src=“../project/needTestedJS/module.js”></script> 
    10. 

  10.     <!– 這裡放測試用例js檔案 –> 
    11. 

  11.     <script type=“text/javascript” src=“../project/tcJS/moduleTest.js”></script> 
    12. 

  12. </head> 
    13. 

  13. <body> 
    14. 

  14.     <h1 id=“qunit-header”>QUnit測試套件</h1> 
    15. 

  15.     <h2 id=“qunit-banner”></h2> 
    16. 

  16.     <div id=“qunit-testrunner-toolbar”></div> 
    17. 

  17.     <h2 id=“qunit-userAgent”></h2> 
    18. 

  18.     <ol id=“qunit-tests”></ol> 
    19. 

  19. </body> 
    20. 

  20. </html> 
    21. 



 


然後我們就可以看到測試結果了，正確的則顯示綠條和註解，錯誤的則顯示紅條以及錯誤資訊：




比如我們這裡故意放了一個錯誤，我們在測“恆等斷言”時候，我們故意給了2個不等的json 物件，一個是{a:1}，一個是{a,50},所以，這裡就“爆紅”了。












本文轉自 charles_wang888 51CTO部落格，原文連結：http://blog.51cto.com/supercharles888/860089，如需轉載請自行聯絡原作者












相關文章