QUnit を使用した JavaScript 単体テストのサンプル コードの詳細

QUnit を使用した JavaScript 単体テストのサンプル コードの詳細

はじめに

QUnit は強力な JavaScript 単体テスト フレームワークです。これは、jQuery、jQuery UI、および jQuery Mobile プロジェクトだけでなく、JavaScript コードで記述された任意のプロジェクトのテストにも使用できます。

実行環境

• 任意のHtmlおよびJavaScriptエディター(Visual Studio 2013)

• QUnit公式からリファレンスjsおよびcssファイルをダウンロード

単体テストにQUnitを追加

QUnit.jsとQUnitを追加t.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 コード内に 1 つずつ作成します。 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>

Q単体テスト結果ウィンドウ

以上がQUnit を使用した JavaScript 単体テストのサンプル コードの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。