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使用方法（js单元测试）的更多相关文章

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

          近日在网上浏览过很多有关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单元测试变的重要起来？

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

  6. ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证

    ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...

  7. 获取网页URL地址及参数等的两种方法(js和C#)

    转:获取网页URL地址及参数等的两种方法(js和C#) 一 js 先看一个示例 用javascript获取url网址信息 <script type="text/javascript&q ...

  8. JS 单元测试

    JS单元测试,我工作时主要以mocha + chai 下面时具体的文档: mocha: https://mochajs.org/#asynchronous-code Chai: http://chai ...

  9. 对无返回值、使用Action或Func作为参数、多重载的方法进行单元测试

    VS2012 Unit Test(Void, Action, Func) —— 对无返回值.使用Action或Func作为参数.多重载的方法进行单元测试 [提示] 1. 阅读文本前希望您具备如下知识: ...

随机推荐

  1. 使用PHP创建一个REST API(Create a REST API with PHP)

    译者前言: 首先这是一篇国外的英文文章,非常系统.详尽的介绍了如何使用PHP创建REST API,国内这方面的资料非常非常的有限,而且基本没有可操作性.这篇文章写的非常好,只要对PHP稍有了解的程序员 ...

  2. oracle TABLE ACCESS BY INDEX ROWID 你不知道的索引回表-开发系列（三）

    1 引言 近期系统常常提示一个sql查询时间过长的问题,看了一下就是一个每天依照时间戳统计前一天量的sql. 表总的数据量为53483065. 语句例如以下: select count(x.seria ...

  3. QT .pro文件 LIBS用法详解

    在程序中需要使用到团队其它成员开发的静态库和动态库,起初是知道使用LIBS变量在在.pro文件中指定需要包含的库,但是实际使用的时候却遇到很大麻烦,但其实确实是因为自己看官方文档不太用心造成的. 下面 ...

  4. struts-tiles学习笔记

    网上搜了一些,稀里糊涂的,要么是代码不全,要么是版本不对,还是去struts官网大概学习了一下 http://struts.apache.org/development/1.x/struts-tile ...

  5. ListView嵌套GridView使用详解及注意事项

    ListView嵌套GridView即ListView的每个Item中都包含一个GridView:需要注意的是由于ListView和GridView都是可滑动的控件. 所以需要自定义GridView, ...

  6. quick-cocos2d-x 创建自定义lua绑定c++类

    内容主要参考 “在quick-cocos2d-x中添加自定义的类给lua使用” ( http://www.codeo4.cn/archives/746) 1. quick-coco2d-x 使用 to ...

  7. 8237dma的四种传送方式简介

    8237A有四种工作方式:单字节传送.数据块传送.请求传送和多片级联. (1)单字节传送(single mode) 单字节传送方式是每次DMA传送时,仅传送一个字节.传送一个字节之后,当前字节计数器减 ...

  8. JDK7 Garbage Frist

    JDK7 G1新型垃圾回收器. http://www.infoq.com/cn/articles/jdk7-garbage-first-collector

  9. BootStrap带样式打印

    在新窗口打印时bootstrap表格的样式出不来,因为打印时没有加载CSS样式. 我在jquery.PrintArea.js的基础上改造了下打印的方法: (function ($) { var pri ...

  10. PHP urlencode

    url get传参时,对参数值需要用urlencode()处理,防止参数中含有特殊字符&等 例如: 一产品名称为A&T Plastic,在产品列表中就产生了这样的一个联接<a h ...