ホームページ > ウェブフロントエンド > jsチュートリアル > QUnit を使用した JavaScript 単体テストのサンプル コードの詳細

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

黄舟
リリース: 2017-03-09 14:16:29
オリジナル
1529 人が閲覧しました

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 单元测试


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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート