继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

使用 QUnit 进行 JavaScript 单元测试

一只斗牛犬
关注TA
已关注
手记 530
粉丝 49
获赞 300

原文链接

简介

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 Division method to the Calculation class.Calculation.prototype.Division = 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 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>

QUnit测试结果窗口

使用 QUnit 进行 JavaScript 单元测试


打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP