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>
最新文章
- 安装wampserver遇到,无法启动此程序,丢失MSVCR110.dll
- postgres中的视图和物化视图
- discuzX3后台管理插件开发示例一 用户表查询
- SQLServer系统监控
- JavaEE基础(十四) /正则
- 虚拟局域网VLAN
- CString, QString, char*之间的转换(包括VC编译开关)
- 测试中的几个case
- 为什么手机连接wifi会显示已停用?
- SSH—Struts(三)—跑步者(Action)
- 在客户端缓存Servlet的输出
- javascript 中this的使用场景全
- Runtime.addShutdownHook的用法
- OSGi类加载流程
- spring security 学习
- linux下.bashrc文件 /PATH环境变量修改 /提示符修改
- Jenkins三.1 配置maven
- dfs(通过控制点的编号来得出每个点的坐标)
- JS实现对数器
- 用delphi实现完美屏幕截图
热门文章
- sift算法特征点如何匹配?
- java.lang.NoSuchMethodError: net.sf.cglib.core.Signature
- Python3.x:pytesseract识别率提高(样本训练)
- 异常: error MSB8008: 指定的平台工具集(V120)未安装或无效
- ubuntu环境下nginx的编译安装以及相关设置
- tomcat优化方案(转)
- SQLite-C#-帮助类
- Matlab 日期频次统计
- 24,25-request对象
- CDN方式使用iview