近日在网上浏览过很多有关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
 
【SOURCE-DIRECTORY目录 和 DESTINATION-DIRECTORY目录 不能存在包含关系 ！！否则，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 ）
 
 
 
 
 
 

【JS单元测试】Qunit 和 jsCoverage使用方法的更多相关文章

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

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

  2. Qunit 和 jsCoverage使用方法

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

  3. 前端测试框架对比(js单元测试框架对比)

    前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...

  4. js单元测试框架

    js单元测试框架 前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试 ...

  5. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  6. JS清除IE浏览器缓存的方法

    js中自动清除ie缓存方法 — 常用 对于动态文件,比如 index.asp?id=... 或者 index.aspx?id=... 相信有经验的程序员都知道怎样禁止浏览器缓存数据了.但是对于静态文件 ...

  7. 啥时候js单元测试变的重要起来？

    作为一个菜鸟,开这个专栏其实不合适,但又突然发现这个比以往任何时候都重要,所以还是写写我的感受 首先,在传统的pc上也有大量的web站点和各种项目都有复杂的js,但是基本不做单元测试,为啥呢?因为传统 ...

  8. JS按回车键实现登录的方法

    本文实例讲述了JS按回车键实现登录的方法,该功能有着非常广泛的实用价值.分享给大家供大家参考之用.具体方法如下: 方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 < ...

  9. 编写高质量JS代码的68个有效方法（八）

    [20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

随机推荐

  1. 惊艳，Dubbo域名已改，也不再局限于Java！

    今天作者想去 Dubbo 官网查下相关资料,发现官方域名由 dubbo.io 直接跳转至 dubbo.apache.org 下了,然后突然回想起 Dubbo 已经在 2 月份正式进入了 Apache ...

  2. 课程四(Convolutional Neural Networks)，第二 周（Deep convolutional models: case studies） —— 2.Programming assignments : Keras Tutorial - The Happy House (not graded)

    Keras tutorial - the Happy House Welcome to the first assignment of week 2. In this assignment, you ...

  3. 课程四(Convolutional Neural Networks)，第一周（Foundations of Convolutional Neural Networks） —— 1.Practice questions：The basics of ConvNets

    [解释] 100*(300*300*3)+ 100=27000100 [解释] (5*5*3+1)*100=7600 [中文翻译] 您有一个输入是 63x63x16, 并 将他与32个滤波器卷积, 每 ...

  4. Redis主从同步原理-SYNC【转】

    和MySQL主从复制的原因一样,Redis虽然读取写入的速度都特别快,但是也会产生读压力特别大的情况.为了分担读压力,Redis支持主从复制,Redis的主从结构可以采用一主多从或者级联结构,下图为级 ...

  5. php实现聊天室功能

    原理:长连接 一.长连接与短连接 短连接:客户端与服务端每进行一次报文收发交易时才进行通讯连接.交易完毕后立即断开连接. 长连接:客户端与服务端先建立连接, 连接建立后不断开,然后在进行报文发送和接收 ...

  6. 用RIPv2实现网络区域的互通

    1.动态路由的分类: DV协议:距离矢量协议 距离矢量:路由器只能够知道邻居路由的信息 LS协议:链路状态协议 链路状态:路由器能够知道所在协议内的所有信息 RIP协议的全程是:路由信息协议(DV协议 ...

  7. MongoDB 备份与还原 mongodump、mongorestore

    目录 MongoDB 备份与还原 一. MongoDB 备份 1.mongodump 2 .cp 或者rsync 3.单节点意外关闭后,如何恢复数据 4.查看备份数据 二.MongoDB 还原 1.m ...

  8. 3张表实现RBAC

    管理员表 CREATE TABLE cqh_admin ( id smallint unsigned not null auto_increment comment 'id', username va ...

  9. 给mysql添加一个只有某个数据库查询权限的用户

    添加用户: insert into mysql.user(Host,User,Password,ssl_cipher,x509_issuer,x509_subject) values ("1 ...

  10. Algolia使用教程 ， 超详细傻子看都会

    框架描述 发现网上Algolia这块的资料较少,就花了点时间从官网上整理了下,总结了几项常用的功能用法. 现在比较有名的Algolia提供了云搜索的服务.具体办法是我们将数据库的信息以JSON的格式上 ...