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文档。

希望对您软件开发有帮助。

您可能感兴趣的文章：

5个单元测试容易放的错误

自动化测试

软件开发的专业化

作者：Petter Liu

出处：http://www.cnblogs.com/wintersun/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

该文章也同时发布在我的独立博客中-Petter Liu Blog。

Javascript单元测试Unit Testing之QUnit的更多相关文章

  1. JavaScript测试工具比较:　QUnit, Jasmine, and Mocha

    1. QUnit A JavaScript Unit Testing framework. QUnit is a powerful, easy-to-use JavaScript unit testi ...

  2. javascript单元测试(转)

    1.      什么是单元测试 在计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.程序单元是应用的最小可测试部件.在过程化编程中,一个单元就是单 ...

  3. [转]javascript单元测试

    1.      什么是单元测试 在计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.程序单元是应用的最小可测试部件.在过程化编程中,一个单元就是单 ...

  4. Javascript单元测试框架比较Qunit VS Jasmine

    Javascript单元测试框架比较Qunit VS Jasmine 工欲行其事必先利其器,好的单元测试框架是TDD成功的一半.Javascript优秀的测试框架很多, 包括Jasmine,Qunit ...

  5. 读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit

    读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit Author: Andrew Hunt ,David Thomas with Matt ...

  6. VS2010(2012)中使用Unit Testing进行单元测试

    原文 VS2010(2012)中使用Unit Testing进行单元测试 使用VS 2012自带的Unit Testing工具进行单元测试是非常方便的.网上关于这方面的例子很多,这篇随笔只起个人学习笔 ...

  7. [易学易懂系列|rustlang语言|零基础|快速入门|（15）|Unit Testing单元测试]

    [易学易懂系列|rustlang语言|零基础|快速入门|(15)] 实用知识 Unit Testing单元测试 我们知道,在现代软件开发的过程中,单元测试对软件的质量极及重要. 今天我们来看看Rust ...

  8. (译)学习如何构建自动化、跨浏览器的JavaScript单元测试

    作者:Philip Walton 译者:Yeaseon 原文链接:点此查看 译文仅供个人学习,不用于任何形式商业目的,转载请注明原作者.文章来源.翻译作者及链接,版权归原文作者所有. ___ 我们都知 ...

  9. Unit Testing of Spring MVC Controllers: Configuration

    Original Link: http://www.petrikainulainen.net/programming/spring-framework/unit-testing-of-spring-m ...

随机推荐

  1. Design1：数据层次结构建模之一

    1,在现实世界中,有很多现象存在层次结构,公司的人事职称是典型的层次结果,如下图 Sql Server是关系型DB,适合存储二维关系的数据,如何存储具有层次结构的数据了?需要使用一个字段ParentI ...

  2. AMD 和 CMD 的区别有哪些？

    看到玉伯在介绍seajs和requirejs时,说“RequireJS 遵循的是 AMD(异步模块定义)规范,SeaJS 遵循的是 CMD (通用模块定义)规范”. 能否详细(举例)说明下这个2个规范 ...

  3. poj2060Taxi Cab Scheme(二分图匹配)

    /* 题意: 出租车 有一个出发的时间,从点(a, b)到点(c, d),时间为 abs(a-c)+abs(b-d)! 一辆车可以在运完一个乘客后运另一个乘客, 条件是此车要在预约开始前一分钟之前到达 ...

  4. codeforces——Little Pony and Sort by Shift

    /* 题目大意:给你一个序列,不断地将最后边的数值移动到最前边,问最少经过多少次可以变成一个单调递增的序列! 如果不能则输出-1. 如果该序列按照不断从后向前移动排序成功,那么该序列要么只有一个单调递 ...

  5. 在MVC5和webAPI下是用Autofac依赖注入

    很多书本中都提到依赖注入,控制反转等概念,这些都是为了实现松耦合层.组件和类目的. 常见的是使用Repository类分离Controller和Model的直接联系.而为了解除Repository类和 ...

  6. IOS开发－KVO

    一.什么是kvo? key-value observing,观察者模式 观察者,观察对象属性的变化,当被观察者该属性发生变化时,观察者会接收到通知,可以在回调函数中做相应的处理 二.有什么作用? 变化 ...

  7. CentOS 7.1 Bridge启用STP报错"Master connection not found or invalid"

    今天在公司测试Linux bridge搭建,为了使内部docker容器的网络能够不经过2层封装转发对外公布,顾试用一下bridge功能,结果碰到报错:"Bringing up interfa ...

  8. Codrops 优秀教程：CSS 3D Transforms 实现书本效果

    这个使用  CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...

  9. 2.SDK目录结构和adb工具及命令介绍

    安卓开发学习笔记 1.安卓开发之环境搭建 2.SDK目录结构和adb工具及命令介绍 1.SDK目录介绍: ******************************** add-ons:Androi ...

  10. Elasticsearch集群管理

    ES通过设置[节点的名字]和[集群的名字],就能自动的组织相同集群名字的节点加入到集群中,并使很多的技术对用户透明化. 如果用户想要管理查看集群的状态,可以通过一些REST API来实现. 其他的ES ...