對JavaScript進行單元測試的工具

2019-11-14 16:45:54

字體：大中小

來源：轉載

供稿：網友

　簡介

　　單元測試關注的是驗證一個模塊或一段代碼的執行效果是否和設計或預期一樣。有些開發人員認為，編寫測試用例浪費時間而寧愿去編寫新的模塊。然而，在處理大型應用程序時，單元測試實際上會節省時間；它能幫助您跟蹤問題并安全地更新代碼。

　　常用縮略語

　　DOM：文檔對象模型

　　HTML：超文本標記語言

　　JSTD：JSTestDriver

　　YUI：Yahoo! User Interface

　　在過去，只對服務器端語言進行單元測試。但前端組件越來越復雜，使得編寫 javaScript 代碼測試用例的需求日益提高。如果您不經常編寫客戶端腳本的測試，學習進度可能非常難。測試用戶界面可能需要在思路上做一些調整。（有些程序開發人員一時半會還不能相信 Javascript 是合適的編程語言。）

　　在本文中，您將學習如何使用 QUnit、YUI Test 和 JSTestDriver 對 JavaScript 進行單元測試。

　　下載本文的源代碼。

　　JavaScript 單元測試

　　為了演示 JavaScript 測試，這一節將分析 JavaScript 中一個基本函數測試用例。清單 1 顯示了要測試的函數：將 3（作為一個數）添加到傳遞的變量中。

　　清單 1. 源代碼 (example1/script.js)

                 
function addThreeToNumber(el){
    return el + 3;
}

　　清單 2 在自執行的函數中包含了測試用例。

　　清單 2.測試用例 (example1/test.js)

                 
(function testAddThreeToNumber (){
    var a = 5,
        valueExpected= 8;
  
    if (addThreeToNumber (a) === valueExpected) {
        console.log("Passed!");
    } else {
        console.log("Failed!");
    }
}());

　　將 5 傳遞給測試的函數之后，測試檢查返回值是 8。如果測試成功，就會在一個現有瀏覽器的控制臺中打印出 Passed!；否則就會出現 Failed!。如果要運行測試，需要按照以下步驟進行操作：

　　1. 將兩個腳本文件導入作為測試運行程序的 HTML 頁面中，如清單 3 所示。

　　2. 在瀏覽器中打開頁面。

　　清單 3. HTML 頁面 (example1/runner.html)

                 
<!DOCTYPE html>
<html>
     <head>
         <meta http-equiv="Content-type" content="text/html; charset=utf-8">
         <title>Example 1</title>
         <script type="text/javascript" src="js/script.js"></script>
          <script type="text/javascript" src="js/test.js"></script>
     </head>
     <body></body>
</html>

　　您可以不使用瀏覽器控制臺，而是將結果打印在頁面或由 alert() 方法生成的彈出窗口中。

　　斷言是測試用例中的核心元素，用來驗證某一條件是否滿足。例如，在清單 2 中，addThreeToNumber (a) === valueExpected 就是一個斷言。

　　如果您擁有很多用例并帶有很多斷言，那么使用框架就會方便很多。下面的內容將會重點介紹一些最流行的 JavaScript 單元測試框架：QUnit、YUI Test 和 JSTestDriver。

　　QUnit 入門

　　QUnit 是與 JUnit（Java 編程）類似的單元測試框架，jQuery 團隊用它來對 jQuery 庫進行單元測試。要使用 QUnit，需要按照以下方法：

　　1. 下載 qunit.CSS 文件和 qunit.js 文件（參閱參考資料）。

　　2. 創建一個 HTML 頁面，其中包含導入剛下載的 CSS 和 JavaScript 文件的特定標簽。

　　清單 4 顯示了適用于 QUnit 的標準的 HTML 運行程序。

　　清單 4. HTML 運行程序 (qunit/runner.html)

                 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>QUnit Test Suite</title>
        <link rel="stylesheet" href="css/qunit.css" type="text/css" media="screen">
        <script type="text/javascript" src="js/lib/qunit.js"></script>
    </head>
    <body>
        <h1 id="qunit-header">QUnit Test Suite</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup</div>
    </body>
</html>

　　假設您擁有兩個函數分別負責將溫度從攝氏轉換為華氏，并轉換回來。清單 5 顯示了執行此轉換的腳本。

　　清單 5. 轉換 (qunit/js/script.js)

                 
function convertFromCelsiusToFahrenheit(c){
    var f = c * (9/5) + 32;
    return f;
}
  
function convertFromFahrenheitToCelsius(f){
    var c = (f - 32) * (5/9);
    return c;
}

　　清單 6 顯示了各自的測試用例。

　　清單 6. 測試用例 (qunit/js/test.js)

                 
module ("Temperature conversion")
  
test("conversion to F", function(){
    var actual1 = convertFromCelsiusToFahrenheit(20);
    equal(actual1, 68, ?Value not correct?);
  
    var actual2 = convertFromCelsiusToFahrenheit(30);
    equal(actual2, 86, ?Value not correct?);
})
  
test("conversion to C", function(){
    var actual1 = convertFromFahrenheitToCelsius(68);
    equal(actual1, 20, ?Value not correct?);
  
    var actual2 = convertFromFahrenheitToCelsius(86);
    equal(actual2, 30, ?Value not correct?);
})

　　QUnit 中的測試用例由 test() 方法定義。邏輯是包含在傳入函數的第二個參數中。在清單 6 中，兩個測試分別名為 conversion to F和 conversion to C。每個測試包含兩個斷言。該測試中的斷言使用了 equal() 方法。equal() 函數可以將預期值與測試函數的實際值相比較。equal() 方法中的第三個參數是錯誤情況下顯示的消息。

　　還可以通過 module() 函數將測試組織到模塊中。在清單 6 中，Temperature conversion 模塊含有這兩個測試。

　　如果要運行測試：

　　1. 在 HTML 運行程序中包含源代碼和測試文件，如清單 7 所示。

　　2. 在瀏覽器中打開頁面。

　　清單 7. 在運行程序中包含 script.js 和 test.js

                 
...<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/test.js"></script>
...

　　圖 1 顯示了 QUnit 如何在瀏覽器 (Firefox) 中顯示結果。

　　圖 1. QUnit 結果

對 JavaScript 進行單元測試的工具

　　清單 6 中的斷言使用了 equal() 方法，但它不是 QUnit 提供的惟一斷言。QUnit 提供的其他斷言包括 ok() 或 strictEqual()。清單 8 顯示了正在執行的方法。

　　清單 8. 更多的斷言

                 
module ("Other assertion");
test("assertions", function(){
    ok(true);
    ok(3);
    strictEqual("c", "c");
    equal (3, "3");
});

　　ok() 函數檢查第一個參數為 true；strictEqual() 驗證第一個參數嚴格等于第二個參數。在這些代碼背后，strictEqual() 使用了=== 運算符，equal() 使用了 == 運算符。

　　如果測試失敗，QUnit 還提供了有用的信息。將清單 8 中的代碼改成清單 9 中的代碼，讓上一次斷言執行失敗。

　　清單 9. 上一次斷言出現的錯誤

                 
module ("Other assertion");
test("assertions", function(){
    ok(true);
    ok(3);
    strictEqual("c", "c");
    strictEqual (3, "3");
});

　　圖 2 顯示了 QUnit 執行清單 9 代碼所返回的結果。

　　圖 2. QUnit 結果：上次測試失敗

對 JavaScript 進行單元測試的工具

　　結果非常詳細，而且很容易查到上次斷言的預期值與實際值有什么不同。

　　QUnit 另一項特性能讓您在模塊中的所有測試執行之前或之后執行命令。module() 函數接受 setup() 和 teardown() 回調作為第二個參數。使用 setup() 函數更新清單 6 ，如清單 10 所示。

　　清單 10. setup() (qunit/js/test-setup.js)

module ("Temperature conversion", {
    setup : function() {
        this.celsius1 = 20;
        this.celsius2 = 30;
  
        this.fahrenheit1 = 68;
        this.fahrenheit2 = 86;
    }
});
test("conversion to F", function(){
    var actual1 = convertFromCelsiusToFahrenheit(this.celsius1);
    equal(actual1, this.fahrenheit1);
  
    var actual2 = convertFromCelsiusToFahrenheit(this.celsius2);
    equal(actual2, this.fahrenheit2);
});
test("conversion to C", function(){
    var actual1 = convertFromFahrenheitToCelsius(this.fahrenheit1);
    equal(actual1, this.celsius1);
  
    var actual2 = convertFromFahrenheitToCelsius(this.fahrenheit2);
    equal(actual2, this.celsius2);
});

　　該示例移動了設置部分的斷言所使用的值，以避免在測試的邏輯中使用這些值。

　　QUnit 還通過 asyncTest() 函數提供對異步測試的支持，如果您使用 Asynchronous JavaScript and xml (Ajax)，這是非常有用的特性。在這樣的環境中，expect() 函數可以讓你輕松地驗證測試中運行的斷言數量。

　　YUI Test：獨立的單元測試模塊

　　YUI Test 是 YUI 庫（Yahoo!）的一個組件，是一個可擴展而完整的單元測試框架。如果要使用 YUI Test，需要：

　　1. 將 YUI 導入 HTML 運行程序，如下所示。

1	`<script` `src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>`

　　如以上代碼所示，此樣例使用了 YUI Test 第 3 版本。

　　2. 在測試腳本文件中，實例化 YUI 函數。加載所需的模塊，test 和 console，如清單 11 所示。

　　清單 11.下載 test 和 console YUI 模塊

YUI().use("test", "console", function (Y) {
     // Test cases go here
});

　　test 模塊顯然是用于測試的。console 模塊并不是強制性的，但本示例將用它來打印結果。測試用例將會進入回調中，并以全局的 Y實例作為參數。

　　YUI Test 使用 Y.Test.Case() 構造函數實例化新測試用例，使用 Y.Test.Suite() 構造函數來實例化測試套件。測試套件與 JUnit 類似，包含若干個測試用例?？梢允褂?add() 方法將測試用例添加到測試套件中。

　　我們使用 YUI test 重新測試清單 5 中的源代碼。清單 12 顯示了如何創建測試用的套件和測試用例。

　　清單 12. 測試套件和用例

YUI().use("test", "console", function (Y) {
  
     var suite = new Y.Test.Suite("Temperature conversion suite");
  
     //add a test case
     suite.add(new Y.Test.Case({
         name:"Temperature conversion?
     )); 
});

　　清單 12 生成了一個名為 Temperature conversion suite 的套件和一個名為 Temperature conversion 的測試用例?，F在，可以將測試方法寫入對象文本中，作為參數傳遞給 Y.Test.Case 構造函數，如清單 13 所示。

　　清單 13. 測試用例與測試方法

suite.add(new Y.Test.Case({
    name:"Temperature conversion",
  
    setUp : function () {
        this.celsius1 = 20;
        this.celsius2 = 30;
  
        this.fahrenheit1 = 68;
        this.fahrenheit2 = 86;
    },
  
    testConversionCtoF: function () {
        Y.Assert.areEqual(this.fahrenheit1,         
convertFromCelsiusToFahrenheit(this.celsius1));
  
        Y.Assert.areEqual(this.fahrenheit2, 
convertFromCelsiusToFahrenheit(this.celsius2));
    },
  
    testConversionFtoC: function () {
        Y.Assert.areEqual(this.celsius1,
convertFromFahrenheitToCelsius(this.fahrenheit1));
  
        Y.Assert.areEqual(this.celsius2, 
convertFromFahrenheitToCelsius(this.fahrenheit2));
    }
}));

　　您可能注意到，在清單 13 中：

　　1. 可使用 setUp() 方法。YUI Test 在測試用例和測試套件層提供了 setUp() 和 tearDown() 方法。

　　2. 測試方法名以 test 單詞開頭，它們包含斷言。

　　3. 本示例使用 Y.Assert.areEqual() 斷言類型，它與 QUnit 中的 equal() 函數類似。YUI Test 為斷言提供了多種方法，如：

　　1). Y.Assert.areSame()，它類似于 QUnit 中的 strictEqual()。

　　2). 數據類型斷言（Y.Assert.isArray()、Y.Assert.isBoolean()、Y.Assert.isNumber() 等等）。

　　3). 特殊值斷言（Y.Assert.isFalse()、Y.Assert.isNaN()、Y.Assert.isNull() 等等）。

　　要啟動 YUI 中的測試，需要使用 Y.Test.Runner 對象。還需要將套件或測試用例添加到對象中，然后調用 run() 方法來運行測試。清單 14 顯示了如何運行清單 13 中創建的測試。

　　清單 14. 運行 YUI test

                 
Y.Test.Runner.add(suite);
Y.Test.Runner.run();

　　在默認情況下，結果會打印在瀏覽器的控制臺中（如果瀏覽器支持控制臺的話）。更好的方法是使用 Yahoo! Console 組件來打印結果。如果要使用 Yahoo! Console 組件，需要采用 Y.Console 構造函數將控制臺綁定到 HTML 運行程序的 DOM 元素中，如清單 15 所示。

　　清單 15. Yahoo! Console

                 
var console = new Y.Console({
    verbose: true,
    newestOnTop: false,
    width:"600px"
});
  
console.render('#testLogger');

　　清單 15 顯示了如何使用幾個參數配置控制臺。該控制臺會在 DOM 元素內部呈現，其 id 為 testLogger。

　　需要更新 HTML 運行程序。添加該控制臺所引用的 DOM 元素，如清單 16 所示。

                 
<body>
     <div id="testLogger"></div> 
</body>

　　本例為 <body> 設置了一個類，名為 yui3-skin-sam。該類負責定義控制臺的皮膚。

　　圖 3 顯示了運行測試之后的控制臺。

　　圖 3. YUI Test 結果

對 JavaScript 進行單元測試的工具

　　使用 JSTestDriver 輕松測試

　　通過使用功能強大的 JSTestDriver (JSTD) 工具，您能夠在多個瀏覽器中從命令行運行 JavaScript。JSTD 帶有一個 JAR 文件，它可以讓您啟動服務器、捕獲一或多個瀏覽器并在這些瀏覽器中運行測試。因為擁有上述的兩個框架，您不需要 HTML 運行程序，但您需要一個配置文件。圖 17 顯示了配置文件。

　　清單 17. 配置文件 (jsTestDriver.conf)

                 
server: http://localhost:4224
load:
  - js/src/*.js
test:
  - js/test/*.js

　　該配置文件是用 YAML 編寫的，這是一種很好的配置文件格式。它包含了要啟動的服務器以及源代碼和測試文件的位置信息。

　　要使用 JSTD 來執行測試：

　　1. 啟動測試服務器。從命令行中，進入到保存 jsTestDriver.jar 的文件夾，并執行以下命令：

1	`java -jar JsTestDriver-1.3.3d.jar -port 4224`

　　清單 17 中指定的端口應該與配置文件中指定的一樣。在默認情況下，JSTD 會在 JAR 文件所在的同一個目錄下查找 jsTestDriver.conf 文件。

　　2. 在測試中，通過將 URL http://localhost:4224/capture 復制粘貼到測試中的瀏覽器，在服務器上注冊一個或多個瀏覽器。

　　測試之前示例中所使用的相同代碼（清單 5），但這次使用 JSTD 語法。清單 18 顯示了如何轉換清單 10 的 QUnit 和清單14 的 YUI Test 中的代碼。

　　清單 18. JSTD 測試

                 
TestCase("Temperature conversion", {
    setUp : function () {
        this.celsius1 = 20;
        this.celsius2 = 30;
  
        this.fahrenheit1 = 68;
        this.fahrenheit2 = 86;
    },
  
    testConversionCtoF: function () {
        assertSame(this.fahrenheit1, convertFromCelsiusToFahrenheit(this.celsius1));
        assertSame(this.fahrenheit2, convertFromCelsiusToFahrenheit(this.celsius2));
    },
  
    testConversionFtoC: function () {
        assertSame(this.celsius1, convertFromFahrenheitToCelsius(this.fahrenheit1));
        assertSame(this.celsius2, convertFromFahrenheitToCelsius(this.fahrenheit2));
    }
});