QUnit JS单元测试框架.docxVIP

QUnit JS 单元测试框架 QUnitJS 单元测试框架 目录 为什么要进行 JS 单元测试 1 QUnit 简介 2. QUnit 的优点 3. QUnit 的缺点 3. QUnit 使用方法 3 Setup 4. Assertions 5 Asynchronous CallBack 10 Synchronous CallBack 11 与浏览器自动化测试工具集成的接口 12 为什么要进行 JS 单元测试 要自动测试应用程序和框架，甚至受益于测试驱动设计。这需要编写一系列的测试代码， 它涉及到了很多内容以涵盖所有的细节，并需要在各种浏览器测试js 代码的特殊性。 由于存在浏览器解析环境、用户操作习惯等等差异，前端程序的许多问题是无法捕捉或重现，现在前端程序的测试多是黑盒测试，即靠点击、点击、再点击来寻找程序bug。这种方式既费时费力，又无法保证测试的覆盖面。 同时，前端逻辑和交互越来越复杂，和其他编程语言一样，一个函数，一个模块，在修改 bug 或添加新功能的过程中，很容易就产生新的 bug，或使老的 bug 复活。这种情况下， 反复进行黑盒测试，其工作量和测试质量是可想而知的。 此外，浏览器兼容性测试是前端程序测试的重要一环，在多个浏览器之间测试前端程序， 上面说的工作量就会成集合倍的增加。 Js 单元测试组件也比较多，由于公司决定采用 JQuery 作为 Web 开发的核心框架，且QUnit 属于 jQuery 的单元测试的原生组件，显然更符合我们的要求，这里也只针对Qunit 进行介绍。 QUnit 简介 QUnit 是一个功能强大，易于使用的JavaScript 单元测试组件。它使用了 jQuery、jQuery UI 和 jQuery 移动项目来测试任何普通的 JavaScript 代码，也包括其自身。 QUnit 最初是由 John Resig 作为 jQuery 的一部分而开发的，在 2008 年才进行独立，并提供了 API 文档，允许其他人使用 Qunit 进行自己项目的单元测试。当时它仍然依赖 jQuery。 在 2009 年重写时取消了依赖的耦合，现在QUnit 完全可独立运行。 使用 QUnit，你只需要在你的 HTML 页面包括两 QUnit 文件： qunit.js：测试运行和测试框架； !DOCTYPE htmlhtmlhead !DOCTYPE html html head meta charset=GBK titleQUnit 最基本的测试/title link rel=stylesheet href=../qunit/qunit.css /head body div id=qunit/div div id=qunit-fixture/div script src=../qunit/qunit.js/script script test( 最简单的 hello 测试, function() { var value = hello; equal( value, hello, 测试结果为 hello ); }); /script /body /html 当所有测试均已都通过，测试组件的标题显示页标题、绿色的条（当失败时会显示红色条）、navigator.userAgent 字符串（显示内容为不同的浏览器中测试结果），带有灰色栏和带有几个复选框来筛选测试结果的栏。 当大量的测试运行，且仅有少数失败时，隐藏通过测试很有用。该选项将会隐藏通过的测试，易于检查失败的测试。 该页面的实际内容是测试的结果。在测试的名称编号的列表开头的每个条目之后，在括号内，数量的失败、传递、和总的断言。单击该条目将显示每个断言，通常是预期与实际的对比结果显示。点击运行该则重新测试。 QUnit 的优点 使用起来非常方便，有漂亮的外观和完整的测试功能（包括异步测试 使用起来非常方便，有漂亮的外观和完整的测试功能（包括异步测试），这是见过最漂亮最详细的测试界面了。 非常简单，容易上手，目前公开的APi 只有 16 个。 不需要依赖其它任何软件包或框架，只要能运行JS 的地方就可以，QUnit 本身只有一个 JS 文件和CSS 文件，当然如果需要可以和JQuery 等其它框架集成。 不仅支持在浏览器中测试，还支持在Rhino 和 node.js 等后端测试。 QUnit 的缺点 对自动化支持不好，很难和 对自动化支持不好，很难和Ant/Maven 或自动构建等工具集成，主要用在浏览器中进 行测试。 QUnit 使用方法 QUnit 的用法比较简单，API 不是很多，所有的API 也就 16 个左右。所有的API 可以 分为三类：Setup，Assertions，Asynchronous Tes