Javascript单元测试框架QUnitjs详细介绍

一、什么是 QUnit

QUnit（http://qunitjs.com/） 是一个非常强大的javascript单元测试框架，可以帮你调试代码。它是由 jQuery 团队的成员写的，而且是 jQuery 的官方测试套装。但QUnit一般是足以测试任何常规 javascript 代码，它甚至可能通过一些 javascript 引擎比如 Rhino 或 V8 来测试服务器端 JavaScript。
如果你不熟悉“单元测试”的概念，请不要担心。这不是很难理解的：

代码如下:

在计算机编程中，单元测试（又称为模块测试）是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类（超类）、抽象类、或者派生类（子类）中的方法。 — 引自维基百科。

简单地说，你为你的代码的每个功能写测试，如果所有这些测试都通过了，那么你可以肯定的是，代码没有缺陷（通常，还是由你的测试有多彻底而定）。

二、为什么你要测试你的代码

如果你以前从未写过任何单元测试，你可能直接将你的代码上到网站上，点击一会看看是否有什么问题出现，并且尝试去解决你所发现的问题，采用这种方法会有很多的问题。
首先，这是很腻烦的。点击事实上并不是一件轻松的工作，因为你不得不确保每样东西都被点到而且很有可能你错过了一个或两个。

其次，你为测试做的每件事情是不能复用的，这意味着它很难回归。什么是回归？想像一下你写了一些代码并测试，修复了所有你发现的缺陷，然后发布。此时，一个 用户发送了一些关于新缺陷的反馈，并且需要一些新功能。你返回到代码中，修复这些新缺陷并增加新功能。接下来可能会发生的就是一些旧的缺陷又重现了，这就 叫“回归”。看，现在你还得再去点击一遍，而且有可能你还找不到这些旧的担担缺陷；即使你这么做，这还需要一段时间才能弄清楚你的问题是由回归引起的。使用单元测试，你写测试去发现缺陷，一旦代码被修改，您通过测试再筛选一次。如果回归出现，一些测试一定会失败，你可以很容易地认出他们，知道哪部分代码包含了错误。既然你知道你刚才修改了什么，就可以很容易地解决。

另外一个单元测试的优点，尤其是对于web开发来说: 它使跨浏览器兼容性测试很容易。仅仅在不同浏览器中运行你的测试案例就行，如果一个浏览器出现问题，你修复它并重新运行这些测试案例，确保不会在别的浏览器引起回归，一旦全部通过测试，你可以肯定的说，所有的目标浏览器都支持。

我想提及一个 John Resig 的项目：TestSwarm(http://testswarm.com/)。 它将 Javascript 单元测试带到了一个新的层次，通过使其分布，这是一个网站，其中包含很多测试案例，任何人都可以去那运行一些测试案例，然后返回结果会返回到服务器。通过这种方式，代码会非常迅速的在不同的浏览器进行测试，甚至不同的平台运行。

三、如何用 QUnit 写单元测试

那么，你如何正确地用QUnit写单元测试呢？首先，您需要设置一个测试环境：


代码如下:

<!DOCTYPE html>
<html>
<head>
    <title>QUnit Test Suite</title>
    <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">
    <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
    <!-- Your project file goes here -->
    <script type="text/javascript" src="myProject.js"></script>
    <!-- Your tests file goes here -->
    <script type="text/javascript" src="myTests.js"></script>
</head>
<body>
    <h1 id="qunit-header">QUnit Test Suite</h1>
    <h2 id="qunit-banner"></h2>
    <div id="qunit-testrunner-toolbar"></div>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
</body>
</html>

正如你所见，在这里使用了一个被托管的QUnit框架版本。
将要被测试的代码已被添加到 myProject.js 中，而且你的测试应该插入到 myTest.js 。要运行这些测试，只需在一个浏览器中打开这个 HTML 文件。现在到了写些测试的时间了。
单元测试的基石是断言：

断言是一个命题，预测你的代码的返回结果。如果预测是假的，断言失败，你就知道出了问题。

运行断言，你应该把它们放入测试案例：

代码如下:

// Let's test this function
function isEven(val) {
    return val % 2 === 0;
}

test('isEven()', function() {
    ok(isEven(0), 'Zero is an even number');
    ok(isEven(2), 'So is two');
    ok(isEven(-4), 'So is negative four');
    ok(!isEven(1), 'One is not an even number');
    ok(!isEven(-7), 'Neither is negative seven');
})

这里我们定义一个函数：isEven，用来检测一个数字是否为奇数，并且我们希望测试这个函数来确认它不会返回错误答案。
我们首先调用 test()，它构建了一个测试案例；第一个参数是一个将被显示在结果中的字符串，第二个参数是包括我们断主的一个回调函数。
我们写了5个断言，所有的都是布尔型的。一个布尔型的断言，期望它的第一个参数为true。第二个参数依然是要显示在结果中的消息。
这里是你想要得到的，只要你运行测试：

四、深入学习参考

以上只简单的介绍了 qunit.js ，其断言方法还有很多，具体可参考 api 文档：
http://api.qunitjs.com/
单元测试是一个在你发布你的代码前测试你的代码的非常好的方法。如果你以前没有写过任何的单元测试，现在是时候开始了！

赞 (0)

相关推荐

  • kmock javascript 单元测试代码

    复制代码 代码如下: (function () { var KMock = window.KMock = function () { } KMock.prototype.setup = function (methodName) { var instance = this; instance[methodName] = { returnAs: function (fn) { instance["_" + methodName] = function () { instance[meth

  • Riot.js 快速的JavaScript单元测试框架

    http://github.com/alexyoung/riotjs示例: Ruby代码 复制代码 代码如下: context "a new user" do setup { User.new } asserts("that it is not yet created") { topic.new_record? } end context "a new user" do setup { User.new } asserts("that

  • JQuery团队打造的javascript单元测试工具QUnit介绍

    JQuery团队打造的javascript单元测试工具QUnit介绍

    什么是单元测试? 单元测试又称为模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.单元测试主要是用来检验程式的内部逻辑,也称为个体测试.结构测试或逻辑驱动测试.通常由撰写程式码的程式设计师负责进行. 通常来说,程式設計師每修改一次程式就會進行最少一次單元測試,在編寫程式的過程中前後很可能要進行多次單元測試,以證實程式達到軟件規格書(en:Specification)要求的工作目標,沒有臭蟲:雖然单元测试不是什么必须的,但也不坏,這牽涉到專案管理的政策決定. -- 维基百科

  • JavaScript单元测试ABC

    JavaScript单元测试ABC

    前言 当前,在软件开发中单元测试越来越受到开发者的重视,它能提高软件的开发效率,而且能保障开发的质量.以往,单元测试往往多见于服务端的开发中,但随着Web编程领域的分工逐渐明细,在前端Javascript开发领域中,也可以进行相关的单元测试,以保障前端开发的质量. 在服务器端的单元测试中,都有各种各样的测试框架,在JavaScript中现在也有一些很优秀的框架,但在本文中,我们将自己动手一步步来实现一个简单的单元测试框架. JS单元测试有很多方面,比较多的是对方法功能检查,对浏览器兼容性检查,本

  • Javascript单元测试框架QUnitjs详细介绍

    Javascript单元测试框架QUnitjs详细介绍

    一.什么是 QUnit QUnit(http://qunitjs.com/) 是一个非常强大的javascript单元测试框架,可以帮你调试代码.它是由 jQuery 团队的成员写的,而且是 jQuery 的官方测试套装.但QUnit一般是足以测试任何常规 javascript 代码,它甚至可能通过一些 javascript 引擎比如 Rhino 或 V8 来测试服务器端 JavaScript.如果你不熟悉"单元测试"的概念,请不要担心.这不是很难理解的: 复制代码 代码如下: 在计算

  • JavaScript的function函数详细介绍

    JavaScript的function函数详细介绍

    通过函数来封装任意多条语句,而且可以在任何地方.任何时间调用执行. 而我们的JavaScript脚本语言比较特殊,相对于C语言,它的参数是不需要数据类型加持的.返回值return,我就不过多描述,他是和 C语言通的,如果没写他就会自动返回undefined function fun(x,y){ } //写成这样就可以声明一个函数 以我的理解他就是以对象的形式来传入参数,通过对象的各项属性值(引用类型的值),来作为我的实际参数, 例如我有以下做法: function fun(x, y) { //

  • JavaScript可视化与Echarts详细介绍

    JavaScript可视化与Echarts详细介绍

    目录 一.可视化介绍 二.可视化库介绍 三.Echarts Echarts引入和使用 了解基础配置 一.可视化介绍 可视化:将数据用图表展示出来,让数据更加直观.让数据特点更加突出 应用场景:营销数据.生产数据.用户数据 二.可视化库介绍 常见的数据可视化库: D3.js:目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js:百度出品的一个开源 Javascript 数据可视化库 Highcharts.js:国外的前端数据可视化库,非商用免费,被许多国外

  • JavaScript可迭代对象详细介绍

    目录 1.迭代器 2.迭代器接口与可迭代对象 3.自定义可迭代对象 3.1.可迭代的Range对象 3.2.使用Generator函数作为迭代器接口 3.3.可迭代的List 3.3.可迭代的迭代器 4.可迭代对象的意义 5.使用可迭代对象 6.后记 1.迭代器 迭代器是借鉴C++等语言的概念,迭代器的原理就像指针一样,它指向数据集合中的某个元素,你可以获取它指向的元素,也可以移动它以获取其它元素.迭代器类似于数组中下标的拓展,各种数据结构,如链表(List).集合(Set).映射(Map)都有

  • 自动化测试Pytest单元测试框架的基本介绍

    自动化测试Pytest单元测试框架的基本介绍

    目录 一.Pytest概念 二.Pytest特点 三.Pytest安装 安装pytest命令: 查看pytest版本: 安装生成测试结果的HTML报告pytest-html 四.Pycharm配置Pytest pycharm依次选择 配置用例脚本运行模式. 菜单栏 配置项目路径 五.Pytest用例运行规则 六. Pytest简单使用 一.Pytest概念 Pytest 是 Python 的一种单元测试框架,与 Python 自带的 unittest 测试框架类似,但是比 unittest 框架

  • javascript面向对象入门基础详细介绍

    什么是对象 简单点说,编程语言中的对象是对现实中事物的简化.例如,我们一个人就是一个对象,但是编程语言很难完全描述一个这样复杂的对象.所以我们必须做出简化,首先,将人简化成属性和行为的组合,然后仅仅保留对程序有意义的几个属性以及行为.例如,我们做一个统计某学校的人的身高的程序,那么我们在这个程序中就可以把人的行为省略掉,只保留行为,并且只保留身高这一个属性.这样,我们就得到了一个最简单的对象. JavaScript字符串对象 对象的属性 其实我们之前在HTML DOM中已经就是在使用对象了.例如

  • JavaScript中的ArrayBuffer详细介绍

    JavaScript中的ArrayBuffer详细介绍

    相信每一个 javascript 学习者,都会去了解 JS 的各种基本数据类型,数组就是数据的组合,这是一个很基本也十分简单的概念,他的内容没多少,学好它也不是件难事情.但是本文着重要介绍的并不是我们往常看到的 Array,而是 ArrayBuffer. 我写的很多东西都是因为要完成某些特定的功能而刻意总结的,可以算是备忘,本文也是如此!前段时间一直在研究 Web Audio API 以及语音通信相关的知识,内容侧重于音频流在 AudioContext 各个节点之间的流动情况,而现在要摸清楚音频

  • Javascript 链式作用域详细介绍

     Javascript 链式作用域 其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但程序的设计,基本都是为了简单,便于理解的.记住JS中经典的一句话是,一切皆对象. 说白了链式作用域,其实就是Javascript的一个特性:子函数中可以访问父函数的所有变量.当然也包括全局变量window(一般的函数定义function a(){},其实都是win

  • Javascript 事件冒泡机制详细介绍

    Javascript 事件冒泡机制详细介绍

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3school教程 进行了解,这将有助于更好地理解以下的内容 . 2.冒泡机制 什么是冒泡呢? 下面这个图片大家应该心领神会吧,气泡从水底开始往上升,由深到浅,升到最上面.在上升的过程中,气泡会经过不同深度层次的水. 相对应地:这个气泡就相当于我们这里的事件,而水则相当于我们的整个dom树:事件从dom 树的

随机推荐