使用QUnit进行自动化单元测试

时间：2022-09-14 09:44:05

前言

前阵子由于项目需求接触了java的单元测试JUnit，就顺带着学习了前端的单元测试：Qunit。

既然跟测试有关，不妨介绍一下测试中的黑盒测试、白盒测试以及单元测试。

1、黑盒测试：所谓的黑盒，就是把程序看做一个不能打开的黑盒子，不需要了解程序内部结构和特性，从用户的角度出发，主要针对软件界面以及软件功能进行测试，通过多次的测试，无穷多数的测试情况，检车出程序中的错误。黑盒测试也叫功能测试，它是通过测试来检测每个功能是否都能正常使用。

2、白盒测试：相对于黑盒的看不见，白表示看得见即透明的意思。白盒表示你清楚盒子内部的东西以及里面是如何运作的。这种方法是把测试对象看做一个打开的盒子，允许测试人员利用程序内部的逻辑结构及有关信息，设计或选择测试用例，对程序所有逻辑路径进行测试。通过在不同点检查程序状态，确定实际状态是否与预期的状态一样。因此白盒测试也称为结构测试或逻辑驱动测试。

举个简单的例子：

比如你有一部使用已久的搅拌机（就好比使用多年的代码程序），你想要清洗你的搅拌机（维护，测试有问题模块），你可以从上到下，从里到外，在不拆开搅拌机的前提下，用水冲洗你的搅拌机（这就好比黑盒测试）。你也可以用螺丝刀，把你的搅拌机拆开，一个部位一个部位地清洗（这就好比白盒测试）。

3、那么，什么是单元测试呢？

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

4、好了，讲了这么多题外话，是该回归正题了，讲讲QUnit。

QUnit是jQuery团队开发的JavaScript单元测试工具，功能强大且使用简单。目前所有的JQuery代码都使用QUnit进行测试，原生的JavaScript也可以使用QUnit。最初，John Resig将QUnit设计为jQuery的一部分。2008年，QUnit才有了自己的名字、主页和API文档，也开始允许其他人用它来做单元测试。但当时QUnit还是基于jQuery的。直到2009年，QUnit才可以完全的独立运行。

Qunit的官网：http://qunitjs.com/（如果打不开，尝试翻.墙）

正文

万事从头起，首先使用qunit写一个非常简单的例子，感受一下qunit的使用方法：

只需要加载qunit.css和qunit.js就可以了，这里我已经下载好了，喜欢使用CDN的话也可以使用官方提供的CDN：

https://code.jquery.com/qunit/qunit-2.0.1.js

https://code.jquery.com/qunit/qunit-2.0.1.css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="css/qunit-2.0.1.css">

    <script src="js/qunit-2.0.1.js"></script>

    <title>qunit</title>

</head>

<body>

    <div id="qunit"></div>

    <script>

        QUnit.test( "hello test", function( assert ) {

            assert.ok( true, "Passed!" );

            assert.ok( 1 == "2", "错了兄弟" );

            assert.ok( 2 == "2", "Passed!" );

            assert.ok( 2 == "3", "啊哦" );

        });

    </script>

</body>

</html>

运行上述代码后，可以看到一下的页面

使用QUnit进行自动化单元测试

这是个很简单的例子。定义了文档类型，包含了QUnit需要的CSS以及JS，定义了一个Script元素，script中的代码为Qunit的测试代码，id为qunit的div是qunit输出的页面，上面有测试结果。test函数定义了一个“hello test”的测试，一旦页面载入完毕，QUnit就会运行test()。传给test()的第二个参数为函数，这才是测试的本身，这里用到的是OK方法，可以看出，ok函数接受了2个参数，第一个参数表示判断，接受一个布尔值或者有判断结果的值（反正是通过或者不通过），第二个参数是输出的信息。如上图。

（本来想要写更详细点，有点事走开了，下次有时间补充，就当是抛砖引玉，有兴趣的读者可以继续研究js的单元测试）

使用QUnit进行自动化单元测试的更多相关文章

  1. TestNg JAVA 自动化单元测试框架Demo

    TestNg TestNg 是java的一个自动化单元测试框架 参考:http://testng.org/doc/index.html 环境准备 既然是java 的自动化单元测试框架,就必须要有jav ...

  2. Keil中搭建自动化单元测试框架Unity

    前言: 虽然一些C++的自动化单元测试框架也能用来C语言单元测试,但那样我们编写C语言程序时需要符合C++的标准,这样有一些C的特性是无法使用的,限制C的特性使用不太好,于是找了一个全部用C实现的自动 ...

  3. 测者的测试技术手册&colon;AI的自动化单元测试

    测者的测试技术手册:AI的自动化单元测试 谈新技术:AI的自动化单元测试    

  4. 搭建Karma&plus;Jasmine的自动化单元测试

    最近在打算将以前的代码进行重构,过程中发现自己不写自动化测试代码,而是手动的写,这样并不好,所以就学了Karma+Jasmine的自动化单元测试,以后写代码尽量要写自动化单元测试,也要测一下istan ...

  5. 学习Karma&plus;Jasmine&plus;istanbul&plus;webpack自动化单元测试

    学习Karma+Jasmine+istanbul+webpack自动化单元测试 1-1. 什么是karma?  Karma 是一个基于Node.js的Javascript测试执行过程管理工具.该工具可 ...

  6. 在Python中进行自动化单元测试的教程

    From: https://www.jb51.net/article/64119.htm 一.软件测试 大型软件系统的开发是一个很复杂的过程,其中因为人的因素而所产生的错误非常多,因此软件在开发过程必 ...

  7. Karma和Jasmine自动化单元测试

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  8. Karma和Jasmine自动化单元测试——本质上还是在要开一个浏览器来做测试

    1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...

  9. 利用Angularjs测试引擎Karma进行自动化单元测试

    Karma是Google用于angularjs框架单元测试的js引擎(javascript test runner ), angular1 和angular2项目源码的单元测试都是基于karma和ja ...

随机推荐

  1. marked&period;js简易手册

    marked.js简易手册 本文介绍的是marked.js.秉持"来之即用"的原则,对它进行简要的翻译和归纳, 安装 在网上引用或者是引用本地文件即可.要么就用命令行: npm i ...

  2. HTML中图像代替提交按钮

    1. 用图像代替提交按钮 当只有一个提交按钮的时候 ,可以简单的实现,不用添加事件函数,代码是: <input type = "image"' name = ".. ...

  3. &period;htaccess应该放在哪里？

    根据 Apache 官方的介绍,.htaccess 文件属于分布式配置文件,可以放置在网站 www 根目录的所有子目录.以及 www 根目录的上一级目录中,生效的路径总是当前目录及其所有子目录(可在文 ...

  4. 菜鸟教程之工具使用（十四）——Maven项目右击没有&OpenCurlyDoubleQuote;Maven”菜单选项

    从Git导入一个Maven项目,右击想更新Maven引用的jar包,却发现右键菜单根本没有“Maven”菜单项.怎么办?很简单,按如下步骤操作即可: 从Git导入后,右击项目没有“Maven”菜单项: ...

  5. Debian安装中文输入法

    简单暴力: apt-get install ibus-pinyin 你也可以通过GUI下面到Synaptic Package Manager里面选中ibus-pinyin进行安装 安装完成后重启计算机 ...

  6. windows&OpenCurlyDoubleQuote;画图”工具用法

    图片编辑工具不少,photoshop功能强大,但是并不是那么容易掌握.而且,倘若一个简单的图片处理问题就使用这么强大的工具,有点“杀鸡焉用牛刀”的意思,要知道只打开photoshop就需要一段等待时间 ...

  7. 数据结构：最小生成树--Prim算法

    最小生成树:Prim算法 最小生成树 给定一无向带权图.顶点数是n,要使图连通仅仅需n-1条边.若这n-1条边的权值和最小,则称有这n个顶点和n-1条边构成了图的最小生成树(minimum-cost ...

  8. ThinkPHP第二十二天&lpar;表单令牌、相对路径、扩展配置载入、&dollar;Think获取系统变量、&dollar;&lowbar;SERVER&lpar;&&num;39&semi;HTTP&lowbar;REFERER&&num;39&semi;&rpar;前页地址&rpar;

    1.表单令牌开启配置 'TOKEN_ON'=>true 2.相对路径:在thinkphp中,存在单入口index.php,所以程序中的根目录都是以index.php所在的文件夹为根目录,故用./ ...

  9. java基础 （一）之HashMap

    HashMap的存储结构是由数组和链表共同完成.Entry<K,V>[] ,Entry是单向链表. 1 HashMap数据结构 HashMap的底层主要是基于数组和链表来实现的,它之所以有 ...

  10. 【5分钟一个知识点】JS一文搞懂new操作符

    关于new操作符,看了两本书<Javascript高级程序设计3>和<你不知道的JS上>,以及其他文档后,终于豁然开朗. 现总结如下,希望同样懵逼的你,彻底理解它. 如果有不同 ...

相关文章