Qunit 和 jsCoverage使用方法（js单元测试）

近日在网上浏览过很多有关js单元测试相关的文档，工具，但是，针对Qunit 和 jsCoverage使用方法，缺少详细说明，对于初入前端的人来说，很难明白其中的意思，特此整理这篇文章，希望能够减少大家学习Qunit 和 jsCoverage使用方法的时间。
 
 
Qunit：js单元测试工具
jsCoverage： 显示单元测试覆盖率
【说明】以下演示使用HBuilder编辑器进行演示
 
一、准备材料
 https://github.com/chaishi/QunitAndJSCoverage 所需材料，此处均有。也可从网上自行下载。
 
Qunit 下载地址之一: http://qunitjs.com/， 如图
 
 
 
 
 
 
二、Qunit使用方法
 
第一步：新建工程jsUnit，目录内容，如下图所示，
 
目录说明：
"code":
        code -> js ：存放工程待测试的js文件。需要自己写。
        code -> qunit： 存放单元测试需要的qunit.css和qunit.js。从网上直接下载；
        code - >testJs：存放单元测试代码。自己写。
        qunitTest.html：执行testJs中的单元测试代码。使用模板。
"jsCoverage"：空文件夹，后面用来存放生成的jscoverage.html等文件。
 
第二步： 在compute.js文件里面写入以下代码;
function add(a,b){

 if(a + b > 0)

  return true;

 else

  return false;

}

function reduc(a,b){

 if(a - b > 0)

  return true;

 else

  return false;

}
 
第三步：在compute.test.js里面写入测试代码，如下
test("add()测试",function(){

 equal(add(1,2),true,"add(1,2)");

});

test("reduc()测试",function(){

 equal(reduc(1,2),false,"reduc(1,2)");

 equal(reduc(2,1),true,"reduc(1,2)");

});
 
第四步：在qunitTest.html写入如下代码
<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>单元测试</title>

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

  <script type="text/javascript" src="qunit/qunit.js" ></script>

  <script type="text/javascript" src="js/compute.js" ></script>

  <script type="text/javascript" src="testjs/compute.test.js" ></script>

 </head>

 <body>

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

  <div id="qunit-fixture">test markup</div>

 </body>

</html>
第五步：用浏览器打开 qunitTest.html， 如： http://192.168.1.115:8020/qunitExample/code/qunitTest.html。 至此，单元测试已经演示完成。
 
 
三、jsCoverage使用方法
 
第一步：打开已下载的 jsCoverage,如图，
【说明】原文件中还有"doc"文件夹，此处已删除。
 
第二步：将 jscoverage.exe 拷贝到 C:\Windows\System32（此处很重要）
 
第三步：打开命令行，输入 
jscoverage SOURCE-DIRECTORY DESTINATION-DIRECTORY

其中

SOURCE-DIRECTORY：表示包含Javascrīpt脚本的Web文件（qunitTest.html）所在的目录， 
                                     如： E:\HBulider_InstallPath\qunitExample\code
DESTINATION-DIRECTORY：表示测试目录，JSCoverage会把包含Javascrīpt脚本的Web文件所在的目录的所有文件拷贝到测试目录中
                                    如：E:\HBulider_InstallPath\qunitExample\jsCoverage
 
示例命令输入：jscoverage E:\HBulider_InstallPath\qunitExample\code E:\HBulider_InstallPath\qunitExample\jsCoverage
 
该命令执行后，jsCoverage 目录下出现 下图所示文件，
 
 
第四步：用浏览器打开jscoverage.html，
 
输入地址：file:///E:/HBulider_InstallPath/qunitExample/jsCoverage/jscoverage.html，出现以下问题
 
 
 
输入地址：http://192.168.1.115:8020/qunitExample/jsCoverage/jscoverage.html， 显示正常（启动服务器）
 
 
由此可知，应该使用第二种方式访问页面。
 
 
第五步（最后一步）：
在URL中输入 qunitTest.html地址。（访问方式同 jscoverage.html ）
 
 
 
 
 
 
 

Qunit 和 jsCoverage使用方法的更多相关文章

  1. 【JS单元测试】Qunit 和 jsCoverage使用方法

          近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的人来说,很难明白其中的意思,特此整理这篇文章,希望 ...

  2. Qunit 和 jsCoverage使用方法（js单元测试）

    Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的 ...

  3. QUnit使用笔记-1判断方法

    QUnit是一个前端测试工具. 判断效果: html基本结构: <h1 id="qunit-header">QUnit</h1> <h2 id=&qu ...

  4. FW qunit introduction

    自动化测试软件对于开发来说是一个很重要的工具,而单元测试对于自动化测试来说是基本组成部分:软件的每一个组件或者单元可以在非人工介入的情况下,使用测试工具一遍遍的重复执行.换句话说,就是你可以写一次测试 ...

  5. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  6. Cookbook of QUnit

    本篇文章是QUnit的简介,可以作为很好的入门教程.文章原址 介绍 自动化测试时软件开发过程中必不可少的一部分,而单元测试则是自动化测试的最为基本的一块,软件的每一个组件, 每一个功能单元都需要经过不 ...

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

    前言 前阵子由于项目需求接触了java的单元测试JUnit,就顺带着学习了前端的单元测试:Qunit. 既然跟测试有关,不妨介绍一下测试中的黑盒测试.白盒测试以及单元测试. 1.黑盒测试:所谓的黑盒, ...

  8. QUnit使用笔记-5简化编写

    在测试中,如果用到了大量相同的方法返回判断结果,可以将他们简化; 使用push(): push( result/*boolean,result of assert*/, actual, /*objec ...

  9. QUnit使用笔记-4保持原子性与分组

    原子性: 当将许多测试用例放到一起测试的时候,可能会因为相互的副作用而出错:这个时候应该尽可能将他们分别放到test()中测试: 对应测试到Dom,应该尽可能地使用#qunit-fixture,因为它 ...

随机推荐

  1. 如何js编译的文件dll对于网页电话

    1. 加入一个项目的解决方案:JSControl 2. 在这个项目中加入js文件(JScript1.js) 脚本的内容: function showAlert(){ alert('Today is a ...

  2. 【C语言探索之旅】 第一部分第八课：第一个C语言小游戏

    ​ 内容简介 1.课程大纲 2.第一部分第八课:第一个C语言小游戏 3.第一部分第九课预告: 函数 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写 ...

  3. iOS发展- backBarButtonItem 颜色/文字修改

    iOS7之后. 默认返回button字体颜色为蓝色, 在父母的陈列柜VC(老界面)的title 假设做出改变, 通过下面的方法可以: 1. 更改字体颜色 (1) 在plist里面, 加View con ...

  4. Visual Studio 2013中c#语言规范5.0

    文件位置 vs安装路径 "C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC#\Specifications\2052\CSharp ...

  5. 一个用于每一天JavaScript示例-使用缓存计算（memoization）为了提高应用程序性能

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 1号店Interview小结

    三大范式: 为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满足一定的范 ...

  7. Linux查看命令终止进程

    Linux查看命令终止进程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ps PID TTY TIME CMD 2576 pts/0 00:00:00 ba ...

  8. Bash多个配置文件通常用于

    Login shells阅读下面的启动文件: 文件 内容 /etc/profile 对全部用户开放的全局配置文件 ~/.bash_profile 某个用户个人的启动文件,能用作个人的全局设置 ~/.b ...

  9. web 环境项目（intellj部署的tomcat） 重启时报 Exception in thread "HouseKeeper" java.lang.NullPointerException （转）

    Exception in thread "HouseKeeper" java.lang.NullPointerException at org.logicalcobwebs.pro ...

  10. WPF学习（3）布局

    今天我们来说说WPF的布局.我们知道WinForm的布局主要是采用基于坐标的方式,当窗口内容发生变化时,里面的控件不会随之动态调整,这就造成了一个很不好的用户体验.而WPF为了避免这个缺点,采用了基于 ...