Javascript单元测试Unit Testing之QUnit
body{
font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif;
}
QUnit是一个基于JQuery的单元测试Unit Testing 框架。虽然是基于JQuery但用来测试纯Javascript代码。
用来运行Javascript单元测试用例的html页面是这样的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit test runner</title>
<link rel="stylesheet" href="lib/qunit-1.10.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="lib/qunit-1.10.0.js"></script>
<!--test code goes here-->
</body>
</html>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
假设我们有如下简单的javascript代码simpleMath.js,实现基本的数学操作,阶乘,平均数。
SimpleMath = function() {
};
SimpleMath.prototype.getFactorial = function (number) {
if (number < 0) {
throw new Error("There is no factorial for negative numbers");
}
else if (number == 1 || number == 0) {
// If number <= 1 then number! = 1.
return 1;
} else {
// If number > 1 then number! = number * (number-1)!
return number * this.getFactorial(number-1);
}
}
SimpleMath.prototype.signum = function (number) {
if (number > 0) {
return 1;
} else if (number == 0) {
return 0;
} else {
return -1;
}
}
SimpleMath.prototype.average = function (number1, number2) {
return (number1 + number2) / 2;
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
如对getFactorial函数,我们可以编写以下3种测试用例:
正数,零,负数
// Factorial testing module
module("Factorial", {
setup: function() {
this.simpleMath = new SimpleMath();
}, teardown: function() {
delete this.simpleMath;
}
});
test("calculating factorial for a positive number", function() {
equal(this.simpleMath.getFactorial(3), 6, "Factorial of three must equal six");
});
test("calculating factorial for zero", function() {
equal(this.simpleMath.getFactorial(0), 1, "Factorial of zero must equal one");
});
test("throwing an error when calculating the factorial for a negative number", function() {
raises(function() {
this.simpleMath.getFactorial(-10)
}, "There is no factorial for negative numbers ...");
});
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
上面的代码中,module中有setup, teardown可以让我们事前事后做一些操作,使用断言equal期望3的阶乘结果是6,如果您有接触过Java或C#平台的单元测试,应该不能理解。然后我们把2个js脚本文件引入到上面html中
<script src="src/simpleMath.js"></script>
<script src="tests/simpleMathTest.js"></script>
最终我们在浏览器中打开这个html,结果也就是显示出来了。
如上图,我们看到7个测试用例,全部有通过了,点击前2个用例,显示出断言的结果。常见的断言还有ok( truthy [, message ] ), deepEqual( actual, expected [, message ] ),如下是ok:
ok(true, "true passes");
ok(4==4, "4 must equal 4");
ok("some string", "Non-empty string passes");
QUnit也有支持异步ajax的测试方法asyncTest,由于篇幅有限,在这儿不多介绍了。写这篇文章的时候,QUnit是v1.14.0版本了。未来可能还有新版本。更多内容,请可以参考API文档。
希望对您软件开发有帮助。
您可能感兴趣的文章:
作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。
Javascript单元测试Unit Testing之QUnit的更多相关文章
- JavaScript测试工具比较: QUnit, Jasmine, and Mocha
1. QUnit A JavaScript Unit Testing framework. QUnit is a powerful, easy-to-use JavaScript unit testi ...
- javascript单元测试(转)
1. 什么是单元测试 在计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.程序单元是应用的最小可测试部件.在过程化编程中,一个单元就是单 ...
- [转]javascript单元测试
1. 什么是单元测试 在计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.程序单元是应用的最小可测试部件.在过程化编程中,一个单元就是单 ...
- Javascript单元测试框架比较Qunit VS Jasmine
Javascript单元测试框架比较Qunit VS Jasmine 工欲行其事必先利其器,好的单元测试框架是TDD成功的一半.Javascript优秀的测试框架很多, 包括Jasmine,Qunit ...
- 读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit
读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit Author: Andrew Hunt ,David Thomas with Matt ...
- VS2010(2012)中使用Unit Testing进行单元测试
原文 VS2010(2012)中使用Unit Testing进行单元测试 使用VS 2012自带的Unit Testing工具进行单元测试是非常方便的.网上关于这方面的例子很多,这篇随笔只起个人学习笔 ...
- [易学易懂系列|rustlang语言|零基础|快速入门|(15)|Unit Testing单元测试]
[易学易懂系列|rustlang语言|零基础|快速入门|(15)] 实用知识 Unit Testing单元测试 我们知道,在现代软件开发的过程中,单元测试对软件的质量极及重要. 今天我们来看看Rust ...
- (译)学习如何构建自动化、跨浏览器的JavaScript单元测试
作者:Philip Walton 译者:Yeaseon 原文链接:点此查看 译文仅供个人学习,不用于任何形式商业目的,转载请注明原作者.文章来源.翻译作者及链接,版权归原文作者所有. ___ 我们都知 ...
- Unit Testing of Spring MVC Controllers: Configuration
Original Link: http://www.petrikainulainen.net/programming/spring-framework/unit-testing-of-spring-m ...
随机推荐
- iOS-数据持久化-属性列表
属性列表 属性列表文件是一种XML文件,Foundation框架中的数组和字典等都可以于属性列表文件相互转换. NSArray类常用读写属性列表文件的方法: +arrayWithContentsOfF ...
- Web前端优化最佳实践及工具集锦
Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...
- 使用Expression Tree构建动态LINQ查询
这篇文章介绍一个有意思的话题,也是经常被人问到的:如何构建动态LINQ查询?所谓动态,主要的意思在于查询的条件可以随机组合,动态添加,而不是固定的写法.这个在很多系统开发过程中是非常有用的. 我这里给 ...
- HTML5移动Web开发(六)——定义一个内容策略
通过分析工具搜集到的数据,你可以定义一个内容策略,这对已经有了一个桌面网站的人是非常有用的. 1.确认你已经把分析工具的Javascript代码嵌入到网站中.(http://www.cnblogs.c ...
- html选中图片时,在页面回写图片
我们经常会遇到这种情况,就是上传一个图片,但是点击一个图片的时候,最好是可以在浏览器预览这个图片,不然用户还以为没有选择图片呢,但是浏览器的安全机制却阻止了这个问题,就是当访问的是网络上的网站的时候, ...
- Azure REST API (2) Azure Storage
<Windows Azure Platform 系列文章目录> 注意:本文适用于国内由世纪互联运维的Azure China. 本文将会介绍如何使用REST API来直接访问Storage ...
- 使用junit测试用例
通常只会使用junit测试非main方法,在我眼里就是程序入口实现而已.今天,发现原来可以测试类. 针对mybatis练习.在需要测试的UserDaoImpl类上右键,新建一个junit case,位 ...
- list的一些使用
list无数据判断 在一次判断中,我这样: if(list!=null){ ... } 结果发现list为空数据的时候不管用,后来发现,list只要创建实例就不会是null,但可以为empty,因此 ...
- 高性能ORM 框架之 MySqlSugar
mysql 3.X API地址: http://www.cnblogs.com/sunkaixuan/p/5987308.html MySqlSugar 1.5 API 一.介简 SqlSugar ...
- SQL--分页查询
SELECT * FROM ( SELECT ROW_NUMBER() OVER ( ORDER BY EmployeeID DESC ) AS Rownumber , ...