Qunit前端单元测试(二)

来源:luqidong 发布时间:2013-10-31 20:18:48 点击数:

3 前端单元测试

前端的单元测试本质与后端的单元测试没有区别,由于各个浏览器对ESMAScript标准的实现不同,保证浏览器的兼容性是前端单元测试的重点内容。

3.1哪些部分要做单元测试

由于前端代码与页面紧密相关,甚至与交互相关,对哪些部分做单元测试是一个很重要的问题。一般情况下,单元测试用来验证一下相对较小组件的功能,这个组件可以是一个JavaScript对象,或者是jQuery UI控件,每个测试做一个独立的验证,例如一个运算是否正确发生,DOM的修改是否满足条件。

在对UI控件做单元测试测试时,哪些应该进行测试会变得复杂些,比较好的做法是测试设计师不会改变的东西。驱动UI控件逻辑是单元测试点,比如说,导航是否正确的发生了,元素类名的改变(增加、删除、替换)是否正确,事件是否被正确触发。但是,样式是否被正确设置不做测试,不会测试元素的字体是什么或者背景色是什么。

3.2 前端测试框架

现在流行的前端测试框架有JasmineQunitJsTestDriverJSUnitMocha,这里选用的是QUnithttp://qunitjs.com/)。

QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!

-- http://qunitjs.com

QUnit是一个功能强大的、容易使用的JavaScript单元测试框架。用于jQueryjQuery UIjQuery Mobile项目中,可以测试任何JavaScript代码,包括它本身。

Jörn ZaeffererQUnit作者):QUnit是一个JavaScript单元测试框架,主要用于在浏览器中运行单元测试。虽然这个项目从属于jQuery,但却不依赖于jQuery,也不依赖于浏览器DOM。因此你也可以在node.jsRhino上使用。QUnit很容易学习,你只需在html页面中包含两个文件,不需要安装或者构建任何其他东西。最短的测试集只需要一个11行的html文件。

3.2.1 一个简单的测试

这个简单的测试是用来测试javascript0false相等,但是不全等。运行测试的页面源码如下:

78OA办公系统

这是一个非常简单的页面结构,引入了qunit的样式文件(qunit-1.12.0.css,这里使用的是1.12.0版本),页面中包含两个id分别为qunitqunit-fixture<div>标签,qunit在这两个div的基础上实现展示测试结构以及相关的内容,当然还需要引入qunitjs文件(qunit-1.12.0.js),最后移入的就是单元测试jsfirstTest.js),源码如下:

78OA办公系统

它整个就是test函数的调用,传递了两个参数,第一个是测试的名字,类型是字符串,第二个是要执行的测试函数,即函数体是要执行的测试,通常会执行一个或多个断言,这里执行了两个ok断言,打开测试页面在Firefox下打开的效果如下:

78OA办公系统

结果页面一开始是页面的标题,也就是<title>元素的内容,接着是一个绿条,表示着所有的测试都通过了,但是只要有一个测试没有通过,这个条就是红色,然后是三个选择框:

第一个选择框“Hide passed tests”的意思很明显,就是隐藏通过的测试,一般是有测试没有通过的时候会用到,通过隐藏通过的测试可很直接地看到失败的测试。

第二个选择框“Check for Globals”,当选中时,QUnit会列出全局对象window下的所有属性,在每个测试的前后比较他们的不同,如果有属性被增加或删除,这个测试就会失败,并且列出不同。这可以保证测试代码和测试中的代码不会对全局变量进行更改。

第二个选择框“No try-catch”是用来告诉QUnittry-catch块之外执行测试,这样只有测试抛出一个异常,测试就会终止,不会进行执行,带来的好处是可以获得原本的异常,这有益于在对调试支持不是很好的老版浏览器(例如IE6)进行测试。

接下来是显示的是浏览器用户代理字符串(navigator.userAgent);

后面是测试执行花费多少时间,总共有多少个断言,多少个通过和多少个失败了。

接下来就是每个测试,有测试名,括号中的数字代表失败的断言数,通过的断言数,总断言数,单击测试名会在关闭和打开断言列表间切换,后面return链接用来在当前窗口执行这个测试。

 

未完待续 www.78oa.com 免费oa系统提供