QUnit 学习笔记 使用说明（一）
一、单元测试前言
什么是单元测试？
如果是新接触单元测试的童鞋，简要的解释：就是一个JS函数/功能/模块的测试。
单元测试的工具：这里介绍QUnit
Qunit原本是jqury家的，不过现在已经独立了，即是说使用QUnit不需要依赖jquery
官方api地址：http://api.qunitjs.com/
二、QUnit 使用、学习教程
一、下载与安装
首先要下载qunit的相关js和css，目前版本v1.23.1，下载地址： 打开官网http://qunitjs.com/，右侧即download，选择要下载的文件。
也可以通过npm安装：npm install --save-dev qunitjs
也可以直接输入下方地址下载：
https://code.jquery.com/qunit/qunit-1.23.1.js
https://code.jquery.com/qunit/qunit-1.23.1.css
二、一个简单的QUnit测试单个功能
二（1）创建基本的html文件
新建一个html文件，先引入必要js和CSS文件：1个js和1个CSS文件，就是之前下载的那个js和CSS文件
基本的HTML结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Qunit单元测试</title>
<link rel="stylesheet" href="qunit-1.23.1.css">
<script src="qunit-1.23.1.js"></script> </head>
<body>
/*以下这3个是必写的，是将来输出测试结果的区域，id不要改*/
<h1 id="qunit-header">QUnit 单元测试</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol><!--输出测试结果的区域-->
</body>
</html>
二（2）测试一个简单的功能
在之前创建的html文件的基础上，加入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Qunit单元测试</title>
<link rel="stylesheet" href="qunit-1.23.1.css">
<script src="qunit-1.23.1.js"></script> /*新增代码 开始*/
<script>
test("test fn",function(){
ok(true, "this is a QUnit unit test");
});
</script>
/*新增代码 结束*/ </head>
<body>
<h1 id="qunit-header">QUnit 单元测试</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol><!--输出测试结果的区域-->
</body>
</html>
然后页面上会显示本次断言测试的结果：this is a QUnit unit test，具体如图（这是单元测试通过的图，单元测试不通过的图，接下来会放上）：
解释： test()方法：
QUnit.test( name, callback ) 描述：增加一个测试案例。
- 参数name:string，给这个测试自定义起个名字。
- 参数callback:function，要被测试的主体，比如这里是一个ok()方法
ok()
Categories: Assert
简介与用法：
ok( state [, message ] )
Description: A boolean check, equivalent to CommonJS's assert.ok() and JUnit's assertTrue(). Passes if the first argument is truthy.
- 参数state:Expression :要被测试的表达式，比如true,false,0,NaN,null,undefined,"","sdfs"，
- 参数message ：String，本断言的描述信息
这是QUnit中最基本的断言，ok()的第一个参数如果值为true,这个断言便算通过了，若否，则不通过。如果有第二个参数，则会在结果信息里显示第二个参数的内容。
本例中，因为我们指定了第一个参数为true。所以不论如何，这个断言都会通过； 同理，如果这里写为false,那么不论如何，都不会通过。
现在，来多写几个ok断言测试：
<script>
test("test fn",function(){
ok(true, "this is a QUnit unit test");
/*新增的几个ok断言测试*/
ok( "non-empty", "non-empty string succeeds" );
ok( false, "false fails" );
ok( 0, "0 fails" );
ok( NaN, "NaN fails" );
ok( "", "empty string fails" );
ok( null, "null fails" );
ok( undefined, "undefined fails" );
});
</script>
浏览器里跑一下的结果： 除了第一个通过了，后面的都没有通过
三、一个真正的测试
三（1）、新增一个test2.js文件
/*这是我们要测试的函数*/
function showHello(sName){
return "hello!"+sName;
}
/*依旧用test()来增加一个测试案例*/
test("test Fn",function(){
/*定义一个变量——这没什么可说的*/
var myName = "小明";
/*这里用equal()而非ok()*/
equal(showHello(myName),"sss","不通过" );
equal(showHello(myName),"hello!小明","通过" );
});
三（2）、index.html中引入这个js文件，并且删掉之前测试的方法的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Qunit单元测试</title>
<link rel="stylesheet" href="qunit-1.23.1.css">
<script src="qunit-1.23.1.js"></script>
<script src="test2.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit 单元测试</h1>
<h2 id="qunit-banner"></h2>
<ol id="qunit-tests"></ol><!--输出测试结果的区域-->
</body>
</html>
QUnit 学习笔记 使用说明（一）的更多相关文章
- 学习笔记：安装swig+用SWIG封装C++为Python模块+SWIG使用说明
这段时间一直在摸索swing,用它来封装C++代码来生成python脚步语言.并总结了swing从安装到配置再到代码封装编译生成动态库的整个过程,下面这篇文章都是我在实际的运用中的一些经验总结,分享给 ...
- Git学习笔记与IntelliJ IDEA整合
Git学习笔记与IntelliJ IDEA整合 一.Git学习笔记(基于Github) 1.安装和配置Git 下载地址:http://git-scm.com/downloads Git简要使用说明:h ...
- 转:openwrt中luci学习笔记
原文地址:openwrt中luci学习笔记 最近在学习OpenWrt,需要在OpenWrt的WEB界面增加内容,本文将讲述修改OpenWrt的过程和其中遇到的问题. 一.WEB界面开发 ...
- EPROCESS 进程/线程优先级 句柄表 GDT LDT 页表 《寒江独钓》内核学习笔记（2）
在学习笔记(1)中,我们学习了IRP的数据结构的相关知识,接下来我们继续来学习内核中很重要的另一批数据结构: EPROCESS/KPROCESS/PEB.把它们放到一起是因为这三个数据结构及其外延和w ...
- 学习笔记：暴力破解WIFI小软件
小弟 自己的学习笔记,做练习的 ,缺陷还很多,做到无法解决速度问题就不想做下去了,如果要看的话 主要是思路问题,获取句柄,控制句柄而已,代码比较简单.大神勿喷啊 破解DEMO源码:http://dow ...
- cJSON学习笔记 续集
0.前言 本文试图说明怎样使用CJSON构造各种各样的JSON数据包.在前段时间已经写过一篇cJSON的文章,所以本文成为"续集". [相关博文] [前端学 ...
- Dubbo -- 系统学习 笔记 -- 配置
Dubbo -- 系统学习 笔记 -- 目录 配置 Xml配置 属性配置 注解配置 API配置 配置 Xml配置 配置项说明 :详细配置项,请参见:配置参考手册 API使用说明 : 如果不想使用Spr ...
- Apache Ignite 学习笔记(一): Ignite介绍、部署安装和REST/SQL客户端使用
Apache Ignite 介绍 Ignite是什么呢?先引用一段官网关于Ignite的描述: Ignite is memory-centric distributed database, cachi ...
- [Golang学习笔记] 02 命令源码文件
源码文件的三种类型: 命令源文件:可以直接运行的程序,可以不编译而使用命令“go run”启动.执行. 库源码文件 测试源码文件 面试题:命令源码文件的用途是什么,怎样编写它? 典型回答: 命令源码文 ...
随机推荐
- kdump+crash
参考:http://www.360doc.com/content/19/0205/08/36367108_813163495.shtml https://blog.csdn.net/u01436103 ...
- 创建squashfs
SquashFS 通常的livecd都有一个这个文件,是核心的文件系统 SquashFS 也是一个只读的文件系统,它可以将整个文件系统压缩在一起,存放在某个设备,某个分区或者普通的文件中.如果您将其压 ...
- zsh + oh-my-zsh 主题预览
The Themes robbyrussell the (default) that Robby uses The rest of the themes, in alphabetical order: ...
- Spring IOC 源码解析（持续）
如何查看源码 Spring源码下载https://github.com/spring-projects/spring-framework/tags?after=v3.1.0.RC1 eclipse关联 ...
- Python学习札记(一) 初始python
参考: 廖雪峰教程:Python简介 笔记 1.C语言是可以用来编写操作系统的贴近硬件的语言,所以,C语言适合开发那些追求运行速度.充分发挥硬件性能的程序.而Python是用来编写应用程序的高级编程语 ...
- pyspider—爬取下载图片
以第一ppt网站为例:http://www.1ppt.com/ from pyspider.libs.base_handler import * import urllib2,HTMLParser,r ...
- 一款简单易用的.Net 断言测试框架 ： Shouldly
GitHub地址:https://github.com/shouldly/shouldly Shouldly的官方文档:http://docs.shouldly-lib.net/ Nuget安装: 在 ...
- Interleaving String，交叉字符串，动态规划
问题描述: Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Give ...
- flutter自定义View(CustomPainter) 之 canvas的方法总结
画布canvas 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容 canvas 拥有多种绘制点.线.路径.矩形.圆形.以及添加图像的方法,结合这些方法我们可以绘制出千变万化的画面. 虽 ...
- 又是新动作！微信小程序专属二维码出炉
又到了晚上,微信又给我们带来了惊喜,并这次不是新的能力,而是把大家再熟悉不过的二维码换了新的造型. 正式揭晓:微信特制的小程序码.扫一扫新二维码 只要你的微信升级到了 6.5.7 版本,就可以扫码或者 ...