文档库 最新最全的文档下载
当前位置:文档库 › 如何用Qunit测试你的javascript代码

如何用Qunit测试你的javascript代码

如何用Qunit测试你的javascript代码
如何用Qunit测试你的javascript代码

QUnit是一套由jQuery团队开发的,非常强大的用于对JavaScript进行单元测试的框架。本文将介绍什么是QUnit,以及为何要关心代码测试。

什么是QUnit

Qunit是一款强大的用于帮助调试代码的,JavaScript单元测试框架。QUnit由jQuery团队成员编写,是jQuery的官方测试套件,不仅如此,QUnit还可以测试任何常规JavaScript 代码,甚至可以通过一些像Rhino或者V8这样的JavaScript引擎,测试服务端JavaScript 代码。

如果不熟悉“单元测试”的概念,不要担心。并不难理解:

"在计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类、或者派生类(子类)中的方法。"——引自维基百科。

简单来说,你为代码的每一个功能编写测试用例,如果所有的测试都通过了,就可以确保代码没有bug了(通常,还是由测试有多彻底而定)。

为什么要测试代码

如果你以前从未写过任何单元测试,你可能直接将你的代码应用到网站上,点击一会看看是否有什么问题出现,并且尝试去解决你所发现的问题,采用这种方法会有很多的问题。

首先,这是非常乏味的。点击其实并不是一项简单的工作,因为需要保证每一个东西都被点击到而且极有可能漏掉一两个。其次,为测试做的每一件事情都是不可重用的,这就意味着

它很难回归。什么是回归?想像一下,你写了一些代码并测试他们,修复了所有你发现的缺陷,然后发布。这时,一个用户发过来一些关于新的bug的反馈,并且有一些新的需求。你又回到代码中,处理这些新的bug,并增加新的功能。接下来可能会发生的就是一些旧的缺陷又重现了,这就叫“回归”。这样,你就不得不重新点击一遍,而且有可能你还找不到这些旧的缺陷;即使你这么做,这还需要一段时间才能弄清楚你的问题是由回归引起的。使用单元测试,你写测试用例去发现缺陷,一旦代码被修改,您通过测试再筛选一次。一旦出现回归,一些测试用例一定会失败,你可以很容易地认出他们,知道哪部分代码包含了错误。既然你知道你刚才修改了什么,就可以很容易地解决问题。

单元测试的另外一个尤其是对于Web开发的优点:让跨浏览器兼容性测试变得更容易。仅仅在不同浏览器中运行你的测试用例,一旦某个浏览器出现问题,修复它并重新运行这些测试用例,确保不会在别的浏览器引起回归,一旦全部通过测试,就可以肯定的说,所有的目标浏览器都支持。

我喜欢提及一个John Resig的项目:TestSwarm。TestSwarm通过分发,将JavaScript 单元测试带到了一个新的层次。这是一个包含很多测试用例的网站,任何人都可以去那运行一些测试用例,然后返回结果会返回到服务器。通过这种方式,代码会非常迅速的在不同的浏览器进行测试,甚至不同的平台运行。

怎么用QUnit编写测试用例

如何正确地用QUnit写单元测试呢?首先,您需要搭建一个测试环境:

正如你所见,在这里使用了一个被托管的QUnit框架版本。

将要被测试的代码需要添加到myProject.js中,并且你的测试用例应该插入到myTest.js。要运行这些测试,只需在一个浏览器中打开这个html文件。现在需要写一些测试用例了。单元测试的基石是断言。

“断言是一个命题,预测你的代码的返回结果。如果预测是假的,断言失败,你就知道出了问题。”

运行断言,需要把它们放入测试用例中:

这里,我们定义一个函数:isEven,用来检测一个数字是否为奇数,并且我们希望测试这个函数来确认它不会返回错误答案。

我们首先调用test(),它构建了一个测试用例;第一个参数是一个将被显示在结果中的字符串,第二个参数是包括我们断主的一个回调函数。

我们写了5个断言,所有的都是布尔型的。一个布尔型的断言,期望它的第一个参数为true。第二个参数依然是要显示在结果中的消息。

下面是你想要得到的,只要你运行测试用例:

由于所有的断言都已成功通过,我们可以高兴的认为isEven()工作正常。让我们看看如果一个断言失败了会发生什么。

下面是结果:

该断言失败因为我们故意把它写错,但是在你的项目中,如果测试未通过,并且所有的断言都是正确的,你将发现一个bug。

更多断言

ok()不仅是QUnit提供的唯一断言,当在测试你的项目时,还会有一些非常有用的其他类型的断言:

比较断言

比较断言,equals(),期望它的第一个参数(是实际值)等于它的第二个参数(期望值)。它很类似于ok(),但均会输入实现和期望值,使得高度更加简单,像ok()一样,它可带一个可选的第三个参数作为显示的消息。

所以可以代替:

你可以这样写:

注意最后一个“1”,这是比较值如果两个值不相等:

提供更多些信息,让生活更简单些。

比较断言使用“==”来比较它的参数,所以它不能处理数组或对象的比较:

为了测试这种相等,QUnit提供了另外一种断言:恒等断言。

恒等断言

恒等断言,same(),期望相同的参数相等,但是它较深的采用递归比较断言,不仅作用于原始类型,而且包括数组和对象。断言,在前面的例子中,如果你把他们改成恒等断言将全部通过。

注意same()使用”===”去比较,如有必要的话,所以它在比较特殊值的时候就派上用场了。

结构化你的断言

把所有的断言放在一个单独的测试案例中是相当不好的想法,因为这很难去维护,并且不能返回一个纯净的结果。你需要做的就是结构化他们,把他们放在不同的测试案例,每个目标为一个单独功能。

甚至可以通过调用模块函数来把测试案例组织到不同的模块:

异步测试

在前面的示例中,所有的断言都是同步调用的,这意味着他们是一个接着一个运行的。在这个真实的世界,同样存在着很多异步的函数,例如Ajax请求或通过setTimeout()或sestInterval()调用的方法。我们如何去测试这些种类的方法呢?QUnit提供了一个特殊的叫做和“异步测试”的测试案例,提供给异步的测试:

让我们首先尝试用常规的方法写:

看到了?这就好像我们没有写任何断言一样。这是因为断言是被异步执行的,到它被调用的时候,此次测试已经执行完成。

这是正确的版本:

在这,我们使用了stop()去暂停此次测试案例,并且在断言被调用以后,我们使用start()继续。

在调用完test()后立即调用stop()是很平常的;所以QUnit提供了一个捷径:asyncTest()。你可以像这样重写之前的示例:

还有一点要注意:setTimeout()通常会调用它自己的回调函数,但如果它是一个自定义的函数(例如:一个Ajax调用)。你如何确认回调函数被调用了呢?并且如果回调函数没有被调用,start()将不会被执行,整个单元测试将被挂起:

所以这就是你需要做的:

你可以通过延时去stop(),它告知QUnit,“如果start()在延时后没有被调用,你应未通过测试”。你可以确认的是整个测试没有挂起而且如果哪里出了问题你可以注意到。

那么多个异步函数呢?你在哪里放置start()?可把它放在setTimeout()里:

延时应该适当的长足够来允许二者的回调函数在测试继续执行前被调用。但是如果其中一个回调函数没有被调用怎么办?你怎样去知道?这就是expect()加入的原因:

你给expect()传一个数字告知QUnit你期望X个断言去执行,如果一个断言未被执行,这个数字将不会匹配,而且你瘵会注意到有些东西出错了。

这仍有一个expect()的捷径:你只需给test()或asyncTest()的第二个参数传递一个数字:

javascript期末考试模拟题

、单项选择题(本题共15小题,每小题2分,共30分) 在每小题列出的四个备选项中只有一个是符合题目要求的 ,请将其正确答案涂写在答题卡 上。 1. 以“s”为文件扩展名的文件是 _________ (A) html 文件 (B)网页文件 (C) Java 文件 (D) Javascript 文件 2. 以下合法的变量名是 ______ (A) new (B) _123 3. 以下正确的字符串是___ (A) xyz (B) xyz"' 4. 设有语句: var st1= test st1=st1+ 25; 贝U st1的值是 _____ 。 (A) test25 ' (B) 25 5. 123+ ”789 ”的值是 _____ _ (A) 123789 ' (B) 912 6. 表达式(a=2,b=5,a>b?a:b (A) 2 (B) 5 的值为 _______ 8. 设 var a=2,b=3; 则 a++==b?(a-1):b _ 的结果是 。_ A) 0 B) 1 C) 2 D) 3 9. 下面while 循环执行的次数为 __________ var i=5; while (i==0) i--; A)无限 B) 1 C) 5 D) 0 (C) null o (C) xyz ' (D) 2abc (D) xyz ' (C) test ' (D)语法错误 (C) 789 ” (D)语法错误 )的值是 。 (C) 1 (D) 0 7. 设有语句 var a=3,b=5,c=3,d=8,m=3,n=2; 则逻辑表达式(m=a>b)&&(n=c>d) 运算后,n (A) 0 (B) 1 (C) 2 (D) 3

javascript实验

长江职业学院Javascript语言程序设计实验指导书 专业: 学号: 姓名: 班级: 指导老师: 软件教研室编

实验一 JavaScript基本操作 一、实验目的 熟练掌握在HTML文件中编写JavaScript程序的基本操作,及在Microsoft Internet Explorer浏览器和Netscape的Nevigator浏览器中调试JavaScript的基本操作。 二、实验内容 1、用NotePad创建一个简单的.htm文件,在Microsoft Internet Explorer浏览器中浏览效果。 2、编写第1章中的实例源文件,并在Microsoft Internet Explorer浏览器中进行测试。 3、调试一段JavaScript程序,找出其中的错误。 三、实验步骤 1、通过windows的文件管理器,在c盘下新建一个文件夹jsp_ex,用于保 存实验中的文件,如图1-1所示。 2、在windows中打开“记事本”,(也可以用其他编辑html文件的工具软 件,如Microsoft frontpage,Macromedia Dreamweaver等,编写例1-1的程序,然后将文件保存在C:\jsp_ex文件夹中。 3、用下述任意一种方法,在浏览器中显示,如图1-2。

A.在图1-1中双击“”文件名。 B.在图1-1中用鼠标右键单击“”,在打开的菜单列表中,如果有所需浏览器名就可以直接点击浏览器名。 C.现在windows中打开所需浏览器,然后按【ctrl】+【o】,在打开的对话框中找到文件。 4、再次编辑文件,将第21行中的“”改写为“”然后按第3步的操作, 得到如图1-3的效果,不能显示“上一次网页更新日期”,这时,通过浏览器的调试工具查找出出错的位置,修改后再次测试。 5、按1-2的步骤,将例1-1改写为“”和“”两个文件即通过外部javascript 文件和html文件一起完成网页的制作。 四、思考练习 1.为什么“上一次网页更新日期”在每一次打开都是同一个时间 2.请写出你在程序编写中出现的错误和改正方法,并分析。

Javascript弹窗代码大全(收集)

弹窗代码大全(收集) 以下包括强制弹窗 24小时IP弹窗延时弹窗退弹等 我们使用cookie来控制一下就可以了。 首先,将如下代码加入主页面html的区: 然后,用(注意不是openwin而是loadpop啊!)替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的pop-only-once! 写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。 需要注意的是,js脚本中的的大小写最好前后保持一致。 3.一个强制弹窗代码 一个强制弹窗代码 /**

javascript期末考试模拟题

一、单项选择题(本题共15小题,每小题2分,共30分) 在每小题列出的四个备选项中只有一个是符合题目要求的,请将其正确答案涂写在答题卡上。 1. 以“.js”为文件扩展名的文件是______。 (A) html文件(B) 网页文件(C) Java文件(D) Javascript文件 2.以下合法的变量名是______。 (A) new (B) _123 (C) null (D) 2abc 3.以下正确的字符串是______。 (A) xyz (B) ‘xyz” (C) “xyz’ (D) ‘xyz’ 4.设有语句: var st1=’test’; st1=st1+ 25; 则st1的值是______。 (A) ‘test25’ (B) 25 (C) ‘test’(D) 语法错误 5.123+”789”的值是______。 (A) ‘123789’ (B) 912 (C) “789”(D) 语法错误 6.表达式(a=2,b=5,a>b?a:b)的值是______。 (A) 2 (B) 5 (C) 1 (D) 0 7.设有语句var a=3,b=5,c=3,d=8,m=3,n=2; 则逻辑表达式(m=a>b)&&(n=c>d)运算后,n的值为_______。 (A) 0 (B) 1 (C) 2 (D) 3 8.设var a=2,b=3; 则a++==b?(a-1):b的结果是___________。 A) 0 B) 1 C) 2 D) 3 9. 下面while循环执行的次数为________。 var i=5; while (i==0) i--; A)无限B) 1 C) 5 D) 0 10. 以下数组的定义中____________是错误的。 A) var a=new Array(); B) var a=new Array(10); C) var a[10]={ 1,2,3}; D) var a=["1",2,"3"]; 11.设var x=3,y=4; 下列表达式中y的值为9的是________。 A)y*=x-3 B)y/=x*9 C)y-=x+10 D)y+=x+2 12. 在程序中有多个相关联的选项,若要默认选择某一项,应在该项中增加_________属性。 A) checked B) default C) selected D) defaultValue 13.结果为NaN的表达式是______。 (A) "80"+"19" (B) "十九"+"八十" (C) "八十"*"十九" (D) "80"*"19" 14.执行下面语句后c的值是_______。 var a=2,b=1,c=3; if(a

Javascript期中测试卷

Javascript程序设计期中考试试卷班级:姓名:总分: 一、选择题(本大题60分,每小题2分) 1.以下哪个选项是Javascript技术特征( D ) A.解释型脚本语言 B.跨平台 C.基于对象和事件驱动 D.具有以上各种功能 2.JavaScript是(B )。 A. 一种Java 编程语言,不同的是它可以用于网页开发 B. 一种解释性的、用于客户端的、基于对象的程序开发语言 C. 一种用于Firefox浏览器和Internet Explorer浏览器的网页开发语言 D. 一种用于制作网页动画效果的程序开发语言 3.以下哪个单词不属于javascript保留字:( B ) A. var B. parent C. function D. for 4.编辑Javascript程序时(C ) A.只能使用记事本 B.只能使用FrontPage编辑软件 C.可以使用任何一种文本编辑器 D.只能使用Dreamweaver编辑工具 5.在程序开发过程中,用户输入内容的校验常分为功能性校验和(A ) A.格式性校验 B..内容性校验 C.事件性校验 D.方法性校验 6.使用外部JavaScript程序文件的正确格式是(A ) A. //返回模式对话框的值 function okbtn_onclick() { var commstr=''; window.returnValue=commstr; window.close() ; } okbtn_onclick() //全屏幕打开IE 窗口 var winWidth=screen.availWidth ; var winHeight=screen.availHeight-20; window.open("main.aspx","surveyWindow","toolbar=no,wid th="+ winWidth +",height="+ winHeight +",top=0,left=0,scrollbars=yes,resizable=yes,center:yes,statu sbars=yes"); //脚本中中使用xml function initialize() { var xmlDoc var xslDoc xmlDoc = new ActiveXObject('Microsoft.XMLDOM') xmlDoc.async = false; xslDoc = new ActiveXObject('Microsoft.XMLDOM') xslDoc.async = false; xmlDoc.load("tree.xml") xslDoc.load("tree.xsl") folderTree.innerHTML = xmlDoc.documentElement.transformNode(xslDoc) } 一、验证类 1、数字验证内 1.1 整数 1.2 大于0的整数(用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin 2、时间类 2.1 短时间,形如(13:04:06) 2.2 短日期,形如(2003-12-05) 2.3 长时间,形如(2003-12-05 13:04:06) 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03) 3、表单类 3.1 所有的表单的值都不能为空 3.2 多行文本框的值不能为空。 3.3 多行文本框的值不能超过sMaxStrleng 3.4 多行文本框的值不能少于sMixStrleng 3.5 判断单选框是否选择。 3.6 判断复选框是否选择. 3.7 复选框的全选,多选,全不选,反选 3.8 文件上传过程中判断文件类型 4、字符类 4.1 判断字符全部由a-Z或者是A-Z的字字母组成 4.2 判断字符由字母和数字组成。 4.3 判断字符由字母和数字,下划线,点号组成.且开头的只能是下划线和字母 4.4 字符串替换函数.Replace(); 5、浏览器类 5.1 判断浏览器的类型 5.2 判断ie的版本 5.3 判断客户端的分辨率 6、结合类 6.1 email的判断。 6.2 手机号码的验证 6.3 身份证的验证 二、功能类 1、时间与相关控件类 1.1 日历 1.2 时间控件 1.3 万年历 1.4 显示动态显示时钟效果(文本,如OA中时间) 1.5 显示动态显示时钟效果(图像,像手表) 2、表单类 2.1 自动生成表单 2.2 动态添加,修改,删除下拉框中的元素 2.3 可以输入内容的下拉框 2.4 多行文本框中只能输入iMax文字。如果多输入了,自动减少到iMax个文字(多用于短信发送) 3、打印类 3.1 打印控件 4、事件类 4.1 屏蔽右键 4.2 屏蔽所有功能键 4.3 --> 和<-- F5 F11,F9,F1 4.4 屏蔽组合键ctrl+N 5、网页设计类 5.1 连续滚动的文字,图片

JavaScript练习题

JavaScript练习题 一.函数部分 (1)编写一个函数,在页面上输出1~1000之间所有能同时被3,5,7整除的整数,并要求每行显示6个这样的数。 ex050303.htm

 
(2)利用全局变量和函数,设计模拟幸运数字机游戏。设幸运数字为8,每次由计算机

随机生成3个1~9之间的随机数,当这3个随机数中有一个数字为8时,就算赢了一次。 Ex050309.html

 
二.事件与对象 1.设计一个表单,放入两个按钮,单击它们时将显示不同问候语。 S07_02.HTM 处理事件-HTML标记方式

三.内置对象 1.在页面中显示当天日期。

w3school Javascript测验

1.我们可以在下列哪个HTML 元素中放置Javascript 代码?您的回答: 正确答案: 上面的代码会在HTML 页面中产生这样的输出: Hello World! 实例解释: 如果需要把一段JavaScript 插入HTML 页面,我们需要使用 就可以告诉浏览器JavaScript 从何处开始,到何处结束。 document.write 字段是标准的JavaScript 命令,用来向页面写入输出。 把document.write 命令输入到之间后,浏览器就会把它当作一条JavaScript 命令来执行。这样浏览器就会向页面写入"Hello World!"。 TIY 注意:如果我们不使用

2019年信息技术模拟测试二

2019年信息技术模拟测试二 1、下列属于ZigBee技术特点的是( ) A、近距离、低功耗 B、远距离、低功耗 C、近距离、高功耗 D、远距离、高功耗 2、下列不属于物联网关键技术的是( ) A、传感网技术 B、虚拟现实技术 C、RFID技术 D、M2M技术 3、物联网中的RFID主要用于( ) A、感知识别 B、信息传输 C、智能计算 D、数据存储 4、某Access数据表打开后如下图所示, 下列叙述中,错误的是( ) A、数据表名称是books B、数据表中共有61条记录 C、数据表中共有3个字段 D、author字段的数据类型应为文本 5、下列不属于操作系统软件的是() A、WinRAR B、Linux C、iOS D、Android 6、下列不能用于完成多媒体信息集成的软件是( ) A、Authorware B、Powerpoint C、Photoshop D、Flash 7、我们可以通过调制解调器、路由器、电话线、网线等设备或设施实现家庭多台电脑同时上网。下列连接图中正确的是( )

8、下列对动态网页技术--ASP的理解,错误的是( ) A、ASP是指Active Server Pages,即动态服务器页面技术 B、采用ASP可以设计出论坛、留言板等交互性网页 C、ASP与JavaScript都可以实现客户端交互技术 D、ASP是一个网络服务器端的开发环境 9、下列选项中,不属于表格相关HTML标签的是( ) A、
B、

C、 D、 10、JavaScript程序文件的扩展名一般是( ) A、php B、js C、app D、asp 11、关于IIS的配置,下列说法错误的是( ) A、IIS要求默认文档的主文件名必须为default或index B、IIS可以同时管理多个网站 C、IIS可以通过添加Windows组件安装 D、IIS不仅能够管理Web站点,也可以管理FTP站点 12、FlashFXP、CuteFTP等都属于( ) A、通信协议 B、操作系统 C、应用软件 D、媒体播放器 13、用计算机程序解决问题,正确的顺序是( ) A、分析问题→编写代码→设计算法→调试运行 B、分析问题→设计算法→编写代码→调试运行 C、设计算法→分析问题→编写代码→调试运行 D、调试运行→设计算法→编写代码→分析问题 14、2012年6月6日,发生了金星凌日天文现象,当时世界各地天文爱好者拍摄影像资料进行

前端模拟试题(javascript)

JavaScript模拟试题 一、单选题 1.我们可以在下列哪个HTML 元素中放置Javascript 代码? A. 9. 防止被人frame 10. 网页将不能被另存为 11. 12.删除时确认 删 除 13. 取得控件的绝对位置 //javascript //VBScript