<p>3前端单元测试前端的单元测试本质与后端的单元测试没有区别，由于各个浏览器对ESMAscript标准的实现不同，保证浏览器的兼容性是前端单元测试的重点内容。3.1哪些部分要做单元测试由于前端代码与页面紧密相关，甚至与交互相关，对哪些部分做单元测试是一个很重要的问题。一般情况下，单元测试用来验证一下相对较小组件的功能，这个组件可以是一个Javascript对象，或者是jQueryUI控件，每个测试做一个独立的验证，例如一个运算是否正确发生，DOM的修改是否满足条件。在对UI控件做单元测试测试时，哪些应该进行测试会变得复杂些，比较好的做法是测试设计师不会改变的东西。驱动UI控件逻辑是单元测试点，比如说，导航是否正确的发生了，元素类名的改变（增加、删除、替换）是否正确，事件是否被正确触发。但是，样式是否被正确设置不做测试，不会测试元素的字体是什么或者背景色是什么。3.2前端测试框架现在流行的前端测试框架有Jasmine，Qunit，JsTestDriver，JSUnit，Mocha，这里选用的是QUnit（http://qunitjs.com/）。QUnitisapowerful,easy-to-useJavascriptunittestingframework.It'susedbythejQuery,jQueryUIandjQueryMobileprojectsandiscapableoftestinganygenericJavascriptcode,includingitself!--http://qunitjs.comQUnit是一个功能强大的、容易使用的Javascript单元测试框架。用于jQuery、jQueryUI和jQueryMobile项目中，可以测试任何Javascript代码，包括它本身。JrnZaefferer（QUnit作者）：QUnit是一个Javascript单元测试框架，主要用于在浏览器中运行单元测试。虽然这个项目从属于jQuery，但却不依赖于jQuery，也不依赖于浏览器DOM。因此你也可以在node.js或Rhino上使用。QUnit很容易学习，你只需在html页面中包含两个文件，不需要安装或者构建任何其他东西。最短的测试集只需要一个11行的html文件。3.2.1一个简单的测试这个简单的测试是用来测试javascript中0和false相等，但是不全等。运行测试的页面源码如下：这是一个非常简单的页面结构，引入了qunit的样式文件（qunit-1.12.0.css，这里使用的是1.12.0版本），页面中包含两个id分别为qunit和qunit-fixture的<div>标签，qunit在这两个div的基础上实现展示测试结构以及相关的内容，当然还需要引入qunit的js文件（qunit-1.12.0.js），最后移入的就是单元测试js（firstTest.js），源码如下：它整个就是test函数的调用，传递了两个参数，第一个是测试的名字，类型是字符串，第二个是要执行的测试函数，即函数体是要执行的测试，通常会执行一个或多个断言，这里执行了两个ok断言，打开测试页面在Firefox下打开的效果如下：结果页面一开始是页面的标题，也就是<title>元素的内容，接着是一个绿条，表示着所有的测试都通过了，但是只要有一个测试没有通过，这个条就是红色，然后是三个选择框：第一个选择框“Hidepassedtests”的意思很明显，就是隐藏通过的测试，一般是有测试没有通过的时候会用到，通过隐藏通过的测试可很直接地看到失败的测试。第二个选择框“CheckforGlobals”，当选中时，QUnit会列出全局对象window下的所有属性，在每个测试的前后比较他们的不同，如果有属性被增加或删除，这个测试就会失败，并且列出不同。这可以保证测试代码和测试中的代码不会对全局变量进行更改。第二个选择框“Notry-catch”是用来告诉QUnit在try-catch块之外执行测试，这样只有测试抛出一个异常，测试就会终止，不会进行执行，带来的好处是可以获得原本的异常，这有益于在对调试支持不是很好的老版浏览器（例如IE6）进行测试。接下来是显示的是浏览器用户代理字符串（navigator.userAgent）；后面是测试执行花费多少时间，总共有多少个断言，多少个通过和多少个失败了。接下来就是每个测试，有测试名，括号中的数字代表失败的断言数，通过的断言数，总断言数，单击测试名会在关闭和打开断言列表间切换，后面return链接用来在当前窗口执行这个测试。未完待续www.起航劳务派遣系统.com免费劳务派遣系统软件系统提供</p>
