如何使用 QUnit 进行 JavaScript 单元测试

    一、QUnit简介     

      我们做后台开发过程的工程师，毫无疑问，都用过NUnit或JUnit对我们的类或方法进行过单元测试。但对于十分重要的JavaScript，却很少进行。

      而QUnit是一个强大的JavaScript单元测试框架。他可用于jQuery，jQuery UI和jQuery Mobile项目，以及任何使用JavaScript代码编写的项目的测试。较好的解决了这方面的问题。

    二、运行环境

      任何Html和JavaScript编辑器都可以，如VS、Eclipse等。  还需要从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 Division method to the Calculation class.
Calculation.prototype.Division = function (a, b) {
    return a / b;
};

       五、为上面的方法创建一个单元测试用例

// 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 division.
QUnit.test("Division Test", function (assert) {
    assert.ok(c.Division(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的div标记。

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

       六、查看测试结果