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;
 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 )

时间: 2024-10-12 07:35:12

Qunit 和 jsCoverage使用方法(js单元测试)的相关文章

Qunit 和 jsCoverage使用方法

Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的人来说,很难明白其中的意思,特此整理这篇文章,希望能够减少大家学习Qunit 和 jsCoverage使用方法的时间. Qunit:js单元测试工具 jsCoverage: 显示单元测试覆盖率 参考资料:http://siliconforks.com/jscoverage/manual.html 和

JS 单元测试

现如今比较流行的JS测试工具:Qunit 和 Jasmine: 比较如下: http://www.cnblogs.com/frostbelt/archive/2012/08/03/2622302.html 期望值与结果不符,测试不通过. JS 单元测试,布布扣,bubuko.com

常用的兼容IE和火狐FF等浏览器的js方法(js中ie和火狐的一些差别)

介绍了网页上常用的IE/火狐兼容性该页的做法,并给出了代码,相当实用了.为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox .以下进入正题: //window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMove(event) 解决方法:var event = event || window.

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

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

JS单元测试框架:QUnit

QUnit:jQuery的单元测试框架,但不仅限于jQuery(从这个工具不需要引用jquery.js可以看出) index.html <!-- 官网 http://qunitjs.com/ --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="st

使用QUnit结合MVC3来做JavaScript单元测试

关于QUnit 几乎所有的网站都在使用JavaScript,而所有的Javascript开发人员也都想做单元测试,但是一直都为付诸行动,大叔告诫大家,该做了,不然要被别人鄙视了,因为现在是个上网的人都应该用到了JavaScript,而且HTML5来临以后,越来越多的JavaScript代码要去开发. 本文所用到的QUnit是由jQuery team开发的,原本是用于jQuery框架的测试,后来独立发展出来,可以测试任意JavaScript代码,而且提供了非常简单的API让你非常简单的来创建你的T

60秒验证码倒计时js代码 js样式代码 方块上下左右随机移动(定时器) js中获取元素的方法 js中表单提交

60秒验证码倒计时js代码 <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { //removeAttribute() 方法删除指定的属性. disabled属性规定应该禁用 input 元素. val.removeAttribute("disabled"); val.value="免费获取验证码"

Web设计中打开新页面或页面跳转的方法 js跳转页面

Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打开本地网页或互联网:Respose.Write("<script language=&apos;javascript&apos;>window.open(&apos;"+ url+"&apos;)

下载文件的一种简单方法js

我在做的一个项目有一部分要下载附件,可是我们公司用了一个包和网上的用response的解决方法冲突,而网上的js解决方法又用到了ActiveXObj我们经理不让用这个.还好我一个同事很利害用了一个很简单的方法,简单到我都吃惊了. window.open(url) /  window.open(url,'_parent'); 这个url是相对路径.比如说你在你的页面work/upload/prea里存储了xx.txt文件 那么下载的这个路径就是url="upload/prea里存储了xx.txt