首頁 >web前端 >js教程 >使用 QUnit 進行 JavaScript 單元測試的範例程式碼詳情

使用 QUnit 進行 JavaScript 單元測試的範例程式碼詳情

黄舟
黄舟原創
2017-03-09 14:16:291506瀏覽

使用 QUnit 進行 JavaScript 單元測試的範例程式碼詳情

簡介

QUnit是一個強大的JavaScript單元測試框架。他可用於jQuery,jQuery UI和jQuery Mobile項目,以及任何使用JavaScript程式碼編寫的項目的測試。

運行環境

  • 任何Html和JavaScript編輯器(Visual Studio 2013)

  • 從QUnit官方下載reference js和css檔

加入QUnit到單元測試

加入QUnit.js和QUnit.css到你要測試的HTML頁面。

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

建立需要進行單元測試的JavaScript類別

將要進行單元測試的程式碼放到一個單獨的js檔案中(Calculations.js):

// Create Calculation class.
var Calculation = function () { };

// Add Addition to method to the Calculation class.
Calculation.prototype.Add = function (a, b) {
    return a + b;
};

// Add Subtraction method to the Calculation class.
Calculation.prototype.Substraction = function (a, b) {
    return a - b;
};

// Add Multiplication method to the Calculation class.
Calculation.prototype.Multiplication = function (a, b) {
    return a * b;
};

// Add pision method to the Calculation class.
Calculation.prototype.pision = function (a, b) {
    return a / b;
};

為上面的方法建立一個單元測試案例

下面的程式碼就是上面JavaScript方法的單元測試案例,我們同樣將它放到單獨的一個js檔案中(UnitTest.js):

// Instantiate Calculation class.
var c = new Calculation();
// Unit test for addition.
QUnit.test("Addition Test", function (assert) {   
    assert.ok(c.Add(2, 3) == "5", "Passed!");
});

// Unit test for subtraction.
QUnit.test("Substraction Test", function (assert) {
    assert.ok(c.Substraction(3, 2) == "1", "Passed!");
});

// Unit test for pision.
QUnit.test("pision Test", function (assert) {
    assert.ok(c.pision(5, 5) == "1", "Passed!");
});

// Unit test for multiplication.
QUnit.test("Multiplication Test", function (assert) {
    assert.ok(c.Multiplication(5, 5) == "25", "Passed!");
});

在HTML程式碼中引用所有的js和css檔案

在HTML程式碼中分別建立一個id為qunit、qunit-fixture的p標記。

<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src="~/Scripts/Calculations.js"></script>
<p id="qunit"></p>
<p id="qunit-fixture"></p>
<script src="//code.jquery.com/qunit/qunit-1.22.0.js"></script>
<script src="~/Scripts/UnitTest.js"></script>

QUnit測試結果視窗

使用 QUnit 进行 JavaScript 单元测试


#

以上是使用 QUnit 進行 JavaScript 單元測試的範例程式碼詳情的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn