QUnit - 基本用法

現在，我們將向您展示一個循序漸進的過程，透過一個基本示例快速入門 QUnit。

匯入 qunit.js

QUnit 庫中的 qunit.js 代表測試執行器和測試框架。

<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>

匯入 qunit.css

QUnit 庫中的 qunit.css 為測試套件頁面設定樣式，以顯示測試結果。

<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">

新增 Fixture

新增兩個 div 元素，分別具有id = "qunit" 和 "qunit-fixture"。這些 div 元素是必需的，併為測試提供 fixture。

<div id = "qunit"></div>
<div id = "qunit-fixture"></div>

建立待測試函式

function square(x) {
   return x * x;
}

建立一個測試用例

呼叫 QUnit.test 函式，並傳入兩個引數。

名稱 - 測試的名稱，用於顯示測試結果。
函式 - 包含一個或多個斷言的函式測試程式碼。

QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

執行測試

現在讓我們看看完整的程式碼。

線上演示

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      
      <script>
         function square(x) {
            return x * x;
         }
         QUnit.test( "TestSquare", function( assert ) {
            var result = square(2);
            assert.equal( result, "4", "square(2) should be 4." );
         });
      </script>
   </body>
</html>

在瀏覽器中載入頁面。頁面載入時，測試執行器呼叫QUnit.test()並將測試新增到佇列中。測試用例的執行被延遲，並由測試執行器控制。

驗證輸出

您應該看到以下結果：

標題 - 測試套件標題顯示頁面標題；所有測試透過時顯示綠色條；至少有一個測試失敗時顯示紅色條；帶有三個複選框的條用於過濾測試結果；藍色條顯示 navigator.userAgent 文字以顯示瀏覽器詳細資訊。
隱藏已透過測試複選框 - 隱藏已透過的測試用例，只顯示失敗的測試用例。
檢查全域性變數複選框 - 在每個測試之前和之後顯示視窗物件上的所有屬性列表，然後檢查差異。屬性的修改將導致測試失敗。
無 try-catch 複選框 - 在 try-catch 塊之外執行測試用例，以便如果測試丟擲異常，測試執行器將停止並顯示原生異常。
摘要 - 顯示執行測試用例的總時間、執行的總測試用例數和失敗的斷言數。
內容 - 顯示測試結果。每個測試結果都包含測試名稱以及失敗、透過和總斷言數。可以單擊每個條目以獲取更多詳細資訊。

列印頁面