QUnit是一個強大的JavaScript單元測試框架。他可用於jQuery,jQuery UI和jQuery Mobile項目,以及任何使用JavaScript程式碼編寫的項目的測試。
任何Html和JavaScript編輯器(Visual Studio 2013)
從QUnit官方下載reference js和css檔
加入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">
將要進行單元測試的程式碼放到一個單獨的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程式碼中分別建立一個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 進行 JavaScript 單元測試的範例程式碼詳情的詳細內容。更多資訊請關注PHP中文網其他相關文章!