031302620

应课程要求写一篇单元测试工具的博客,但是暂时没用到java,所以不想使用junit(对各种类都不熟悉的也不好谈什么测试),原计划是要用phpunit,但是安装经历了三个小时,查阅各种博客贴吧,乃至使用了翻译工具翻译了好几个国外的社区,安装成功pear,却卡在这个迷之问题上,考虑到明天还有linux实践、图形学实践的作业要交,并且暂时php使用单元测试工具的机会也相对较少(一般用在比较大的项目中),所以换个切入口,找相对容易上手又比较实用(在软工作业马上就可以用到的)Javascript单元测试工具Qunit来上手。

下面进入正文:


一、Qunit的功能介绍

  Qunit是Javascript语言的单元0测试框架,由?Jquery团队成员开发,而且是JQuery的官方测试套件。在Javascript的开发后期检测代码是一件很艰难的事情(尤其是使用浏览器自带的调试器,不能自动话测试),所以单元测试的重要性就体现出来了,而且Qunit还具有以下优点:

  1.界面美观  

  2.上手简单

   只要有web前端相关基础的应该都可以很轻松的使用,而且API的数量很少

  3.测试方便

  • 可以测试Jquery代码,也可以测试原生的Javascript代码;  
  • 不需要依赖其它任何软件包或框架,只要能运行JS的地方就可以,QUnit本身只有一个JS文件和CSS文件,如果需要可以和jQuery等其它框架集成;
  • 不仅支持在浏览器中测试,还支持在Rhino和node.js等后端测试;

二、开始使用Qunit做开发测试

  1.基本测试

    首先做一个最简单的函数测试来了解一下用法:

      

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="jquint1.20.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="jqunit1.20.0.js"></script> </body>
<script type="text/javascript">
//在这里填写需要测试的函数模块
</script>
</html>

    准备一个函数模板,在这里写入第一个要测试的函数a+b;

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="jquint1.20.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="jqunit1.20.0.js"></script> </body>
<script type="text/javascript">
//在这里填写需要测试的函数模块
function add(a, b) {
return a + b;
}
test("Test Method 1", function () {
ok(add(1, 2) == 3, "Test Method 1 Pass");
});
</script>
</html>

然后界面上输出如下结果:

现在可以回头看看函数的内容,add就是一个简单的两个数相加,test函数的两个参数分别表示测试的模块名称和要测试的函数对象,ok是一个断言,当第一个参数为true时表示通过,且显示第二个参数即message。

然后可以修改一下代码,看看无法通过时的输出

     <script type="text/javascript">
//在这里填写需要测试的函数模块
function add(a, b) {
return a + b+100;
}
test("Test Method 1", function () {
ok(add(1, 2) == 3, "Test Method 1 Pass");
});
</script>

这时候会返回一个false,这里可以看到期望值和实际结果。

  2.异步测试

   异步测试的主要应用背景时,当出现类似于定时的测试时,为了方便我们可以让其他的模块先运行处结果:

     <script type="text/javascript">
//在这里填写需要测试的函数模块
function add(a, b) {
return a + b;
}
asyncTest("Test Method 1", function () { setTimeout(function(){
ok(add(1, 2) == 3, "Test Method 1 Pass");
start();
},1500); }); </script>
</html>

3.多块测试

  当测试的模块不止一个时,可以用module这个函数来便于对应:

  <script type="text/javascript">
//在这里填写需要测试的函数模块 module("Test Module 1");
test("Test Part1", function () {
ok(true, "Part1 pass");
}); test("Test Part2", function () {
ok(true, "Part2 pass");
}); module("Test Module 2");
test("Test Part1", function () {
ok(true, "Part1 pass");
}); test("Test Part2", function () {
ok(true, "Part2 pass");
});
</script>

  以上就是使用Quint测试Javascript代码的一般过程(目前主要就是测试函数是否有效)


  暂时写到这里,之后在使用过程继续补充,我要去做linux了

测试工具使用-Qunit单元测试使用过程的更多相关文章

  1. 关于JavaScript测试工具:QUnit, Jasmine, MoCha

    在进行前端开发过程中,在某些场景下,需要通过编写单元测试来提高代码质量.而JavaScript常用的单元测试框架有这几个:QUnit, Jasmine, MoCha.下面就基于这三个工具,简单做一比较 ...

  2. Android软件测试Monkey测试工具

    前言: 最近开始研究Android自动化测试方法,对其中的一些工具.方法和框架做了一些简单的整理,其中包括android测试框架.CTS.Monkey.Monkeyrunner.benchmark.其 ...

  3. WEB前端常用的测试工具

    一.QUnit 前端测试工具 QUnit是一个强大的JavaScript单元测试框架,该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.Qunit是Jquery的单元测试框架, ...

  4. Test complete测试工具介绍

    Test complete 是一款性价比比较高的测试工具,能够满足大多数用户的自动化测试的需求. Test complete 是近几年流行和发展起来的一款自动化测试工具,早期版本由Automated ...

  5. REST client 基于浏览器的测试工具

    以前在开发webservice服务,都是自己基于HTTP协议,自己写一个测试程序来进行测试,最近在研究RestFul,对以前webservice服务进行了重构,总结了不少经验,今天就给大家介绍下几款R ...

  6. Nunit测试工具使用实例

    前言: 本文主要是介绍了Nunit的基本使用,其中参详了很多已有的文章,由于最近要使用其进行测试,所以对网上的文章做了下整理,同时加入了一些自己的实践. NUnit的属性 TestFixture 它标 ...

  7. PHP 行为测试工具 Codeception (介绍)

    原文地址:https://phphub.org/topics/25 Codeception 简介 Codeception 简单来说, 分为以下几种测试 Acceptance Tests 验收测试 Fu ...

  8. web测试工具总结

     纯粹的手工测试早已不满足如今的项目需求,各种测试工具的应用早已成为普遍趋势.如何选取合适的工具来完成对应的测试工作?本文将针对Web测试,列举 一些推荐的测试工具,并加以简单介绍. (每个工具的实际 ...

  9. 2014 非常好用的开源 Android 测试工具

    http://www.php100.com/html/it/mobile/2014/1015/7495.html 当前有很大的趋势是转向移动应用平台,Android 是最广泛使用的移动操作系统,201 ...

随机推荐

  1. Mac上Homebrew的安装

    Mac系统版本: 10.14.2 下载brew_install 访问:https://raw.githubusercontent.com/Homebrew/install/master/install ...

  2. Nginx 图片服务器

    文件服务器:后台如果是集群,每次请求都会到不同的服务器,所以每台服务器的图片文件等都要做同步处理,才能保证每次用户不管访问到哪台服务器都能获取一样的资源.这种做法开销会很大,专门使用 nginx 作为 ...

  3. vue-cil和webpack中本地静态图片的路径问题解决方案

    1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是 ...

  4. react-fetch数据发送请求

    在一个项目中,数据的请求发送数据是最为重要的,不可能我们的数据都是自己进行编写的 在react中官方推荐使用的方法是fetch.当然它里面也可以使用vue中的axios请求数据,jQuery的$.aj ...

  5. 深圳共创力“研发管理&知识管理”高端研讨交流会在深圳举办!

    2017/4/8,由深圳市共创力企业管理咨询公司举办的“研发管理&知识管理”高端研讨会在深圳市南山区圣淘沙国际酒店(翡翠店)隆重召开.此次研讨会由共创力总经理.首席顾问杨学明先生主持.研讨会先 ...

  6. MyBatis笔记----报错:Error creating bean with name 'sqlSessionFactory' defined in class path resource [com/ij34/mybatis/applicationContext.xml]: Invocation of init method failed; nested exception is org.sp

    四月 05, 2017 4:51:02 下午 org.springframework.context.support.ClassPathXmlApplicationContext prepareRef ...

  7. 语句调优基础知识-set statistics io on

    set statistics io on --清空缓存数据 dbcc dropcleanbuffers go --清空缓存计划 dbcc freeproccache go set statistics ...

  8. Linux核心调度器之周期性调度器scheduler_tick--Linux进程的管理与调度(十八)

    我们前面提到linux有两种方法激活调度器:核心调度器和 周期调度器 一种是直接的, 比如进程打算睡眠或出于其他原因放弃CPU 另一种是通过周期性的机制, 以固定的频率运行, 不时的检测是否有必要 因 ...

  9. PHP中判断变量是否存在的方式

    isset()函数判断变量是否设置. thinkPHP中判断select查询时返回值是否为空  $object->isEmpty() empty():当变量存在,并且是一个非空非零的值时,返回 ...

  10. td 元素属性 noWrap 防止折行、撑开及文字换行

    最近调试程序,遇到如下问题: 也就是这个表格里面的文字被换行了,究其原因,主要是td中的width之和超过了100%导致的.谷歌了好久,终于发现,可以用noWrap="noWrap" ...