jQuery的TDD框架-qunit.docVIP

jQuery的TDD框架 - QUnit /tonyqus/archive/2010/10/31/jquery_tdd_qunit.html 作者：Tony Qu ? 我今天只讨论基于JavaScript的TDD，可能有些公司是用C#做js单元测试的，但我不认为这是个好主意，很多js运行时的东西让js来返回会更直观，且易于维护。 ? 在讨论jQuery TDD之前，我们先来了解下什么才是一个标准的TDD框架。作为标准的TDD框架，必须满足这么几个要求： 1. 即使测试脚本出错了也要能继续运行接下来的脚本 2. 能够不依赖被测试代码写测试用例，即使代码没有实现也可以先写测试用例 3. 能够显示详细的错误信息和位置 4. 能够统计通过和未通过的用例的数量 5. 有专门的可视化界面用于统计和跟踪测试用例 6. 易于上手，通过一些简单的指导就可以马上开始写测试代码。 ? 以上这些要求QUnit都做到了， 这也是我推荐QUnit的原因。 ? QUnit目前已经可以脱离jQuery独立运行，这也是它成功的另外一个原因，即兼容性好，其实严格意义上它已经不是一个jQuery的测试框架了，而是JavaScript测试框架。有意思的是你会发现QUnit的注释曾经发生过微小的变化，如下 这也说明QUnit的代码是做过专门的调整，使之能脱离JQuery运行。 ? 下载Qunit 下载qunit的代码可以去/jquery/qunit，那里的代码是必威体育精装版的。 ? 如何使用QUnit 使用QUnit很简单，只需要下面这些html代码，初始的设置就完成了。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head titleMy Foo Tests/title link href=qunit.css type=text/css rel=stylesheet/ script language=javascript src=jquery-1.4.2.js type=text/javascript / script language=javascript src=qunit.js type=text/javascript/ /head body h1 id=qunit-headerQUnit Test Suite/h1 h2 id=qunit-banner/h2 div id=qunit-testrunner-toolbar/div h2 id=qunit-userAgent/h2 ol id=qunit-tests/ol /body /html QUnit不仅仅为你提供了测试脚本函数，还为你的单元测试提供了一个标准化的测试界面，如下图所示，红色的表示这个测试用例没有通过，绿色的表示通过。每一个框比表示一个测试函数，里面可能有多个断言语句的结果，标题中（x,y,z）表示总共有z个断言，y个是正确的，x个是错误的。 刚才只是初步看了下界面，现在我们来学习如何使用，我从/jquery/jquery/raw/master/test/unit/core.js下载了一个core.js的范例测试代码，这个是jQuery用来测试它的核心模块的代码。 在head/head中加入script language=javascript src=core.js type=text/javascript/script，注意一定要在qunit.js声明后面，因为core.js中用到了qunit.js定义的函数。 这时你再运行刚才我们创建的html文件，你就会看到类似上图的结果，这就是core.js的测试结果，是不是一清二楚？如果是测试你自己的函数，你就可以根据红色的错误提示跟踪问题所在，直到把所有的测试结果都变成绿色。 测试脚本怎么写 测试脚本的写法，我建议你参考/Qunit#Reference_Test_Suites，这里面有提到一些测试用例的文件，你可以通过它们来研究怎么写测试用例，尽管有些测试用例已经跑不通了。 比较常用的函数有： expect(amount) - 指定某个函数中会有多少个断言，通常写在测试函数开头。 module(name) - 模块是测试函数的集合，使用该函数可以在UI中将测试函数按模块归类。 ok(state, message) – 布尔型断言，message是专门显示在QUnit界面上，用来区分不同的断言的 equals(actual, expected,