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

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

Qunit：js单元测试工具

jsCoverage：显示单元测试覆盖率

参考资料：http://siliconforks.com/jscoverage/manual.html 和 http://www.oschina.net/p/jscoverage

【说明】以下演示使用HBuilder编辑器进行演示

一、准备材料

https://github.com/chaishi/QunitAndJSCoverage 所需材料，此处均有。也可从网上自行下载。

Qunit 下载地址之一: http://qunitjs.com/，如图

jsCoverage下载地址: http://siliconforks.com/jscoverage/download.html

二、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;elsereturn false;
}function reduc(a,b){if(a - b > 0)return true;elsereturn 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 ）

转载于:https://www.cnblogs.com/SZLLQ2000/p/5368700.html

Qunit 和 jsCoverage使用方法（js单元测试）相关推荐

Node.js 单元测试：我要写测试 - Mocha - Nodejs开源项目里怎么样写测试、CI和代码测试覆盖率
-------------------------------------- 单元测试Express/NodeJs 个人理解, 1,如果不是测试http请求的单元测试,用Mocha, Chai等基本够 ...
使用Sinon和Rewire对JavaScript中的私有方法进行单元测试
我们曾经试图遵循良好的编程习惯,在创建和定义方法时尽可能按照"职责单一"和"开放-封闭"原则将那些没有必要暴露出来的方法定义为私有方法,但是在编写测试用例时又往 ...
java私有方法单元测试_如何通过java反射的方式对java私有方法进行单元测试
待测试的私有方法: import org.testng.Assert; import org.testng.annotations.BeforeClass; import org.testng.ann ...
啥时候js单元测试变的重要起来？
作为一个菜鸟,开这个专栏其实不合适,但又突然发现这个比以往任何时候都重要,所以还是写写我的感受首先,在传统的pc上也有大量的web站点和各种项目都有复杂的js,但是基本不做单元测试,为啥呢?因为传统p ...
四舍六入五成双方法-js版
四舍六入五成双方法-js版 // 规则: // 四舍六入五考虑,五后非零就进一,五后皆零看奇偶, 五前为偶应舍去, // 五前为奇要进一. function round_sslr(num, decim ...
党旗飘飘平台正确打开方法 | JS定时点击按钮
党旗飘飘平台正确打开方法 | JS定时点击按钮背景:最近学校发展对象需要在"党旗飘飘"平台上观看党课视频.而这个平台不支持视频调速,而且时不时跳出来一个按钮,点击后视频才会播放, ...
php 删除确认,js确认删除方法 js删除确认提示框
摘要腾兴网为您分享:js确认删除方法 js删除确认提示框,篆刻字典,智慧农业,星球联盟,小番茄等软件知识,以及金山网盾3.6,手机tgp,省钱王,qq隐身,战锤全面战争,qq群签到,格力空调新派工系 ...
字符串对象转数组对象_js对象转数组的方法 js怎么将数组对象转变成字符串
只需要一句,arr.__proto__=[];但是要注意浏览器支持__proto__才行,最新的浏览器应该都支持. 以下两种都可以解决此问题: function transform(obj){ var ...
Vue.js 单元测试
单元测试配置和工具任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用 Karma 进行自动化测试.它有很多社区版的插件,包括对 Webpack 和 Browserify ...

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

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

Qunit 和 jsCoverage使用方法（js单元测试）相关推荐

最新文章

热门文章