使用QUnit进行JavaScript单元测试
作者:网络转载 发布时间:[ 2016/3/9 13:47:18 ] 推荐标签:软件测试 测试用例
简介
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测试结果窗口
相关推荐
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11