Home > Web Front-end > JS Tutorial > body text

TDD framework for QUnit jQuery_jquery

WBOY
Release: 2016-05-16 18:17:14
Original
1264 people have browsed it

在讨论jQuery TDD之前,我们先来了解下什么才是一个标准的TDD框架。作为标准的TDD框架,必须满足这么几个要求:

1. 即使测试脚本出错了也要能继续运行接下来的脚本

2. 能够不依赖被测试代码写测试用例,即使代码没有实现也可以先写测试用例

3. 能够显示详细的错误信息和位置

4. 能够统计通过和未通过的用例的数量

5. 有专门的可视化界面用于统计和跟踪测试用例

6. 易于上手,通过一些简单的指导就可以马上开始写测试代码。

 

以上这些要求QUnit都做到了, 这也是我推荐QUnit的原因。

 

QUnit目前已经可以脱离jQuery独立运行,这也是它成功的另外一个原因,即兼容性好,其实严格意义上它已经不是一个jQuery的测试框架了,而是JavaScript测试框架。有意思的是你会发现QUnit的注释曾经发生过微小的变化,如下

QUnit

这也说明QUnit的代码是做过专门的调整,使之能脱离JQuery运行。

下载Qunit

下载qunit的代码可以去http://github.com/jquery/qunit,那里的代码是最新的。

 

如何使用QUnit

使用QUnit很简单,只需要下面这些html代码,初始的设置就完成了。

<span style="COLOR: #0000ff"><!</SPAN><SPAN style="COLOR: #800000">DOCTYPE</SPAN> <SPAN style="COLOR: #ff0000">html</SPAN> <SPAN style="COLOR: #ff0000">PUBLIC</SPAN> <SPAN style="COLOR: #0000ff">"-//W3C//DTD XHTML 1.0 Transitional//EN"</SPAN> <SPAN style="COLOR: #0000ff">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</SPAN><SPAN style="COLOR: #0000ff">></span>
<span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">html</SPAN> <SPAN style="COLOR: #ff0000">xmlns</SPAN><SPAN style="COLOR: #0000ff">="http://www.w3.org/1999/xhtml"</SPAN> <SPAN style="COLOR: #0000ff">></span>
<span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">head</SPAN><SPAN style="COLOR: #0000ff">></span>
  <span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">title</SPAN><SPAN style="COLOR: #0000ff">></span>My Foo Tests<span style="COLOR: #0000ff"></</SPAN><SPAN style="COLOR: #800000">title</SPAN><SPAN style="COLOR: #0000ff">></span>  
  <span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">link</SPAN> <SPAN style="COLOR: #ff0000">href</SPAN><SPAN style="COLOR: #0000ff">="qunit.css"</SPAN> <SPAN style="COLOR: #ff0000">type</SPAN><SPAN style="COLOR: #0000ff">="text/css"</SPAN> <SPAN style="COLOR: #ff0000">rel</SPAN><SPAN style="COLOR: #0000ff">="stylesheet"</SPAN><SPAN style="COLOR: #0000ff">/></span>  
  <span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">script</SPAN> <SPAN style="COLOR: #ff0000">language</SPAN><SPAN style="COLOR: #0000ff">="javascript"</SPAN> <SPAN style="COLOR: #ff0000">src</SPAN><SPAN style="COLOR: #0000ff">="jquery-1.4.2.js"</SPAN> <SPAN style="COLOR: #ff0000">type</SPAN><SPAN style="COLOR: #0000ff">="text/javascript"</SPAN> <SPAN style="COLOR: #0000ff">/></span>
  <span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">script</SPAN> <SPAN style="COLOR: #ff0000">language</SPAN><SPAN style="COLOR: #0000ff">="javascript"</SPAN> <SPAN style="COLOR: #ff0000">src</SPAN><SPAN style="COLOR: #0000ff">="qunit.js"</SPAN> <SPAN style="COLOR: #ff0000">type</SPAN><SPAN style="COLOR: #0000ff">="text/javascript"</SPAN><SPAN style="COLOR: #0000ff">/></span>
<span style="COLOR: #0000ff"></</SPAN><SPAN style="COLOR: #800000">head</SPAN><SPAN style="COLOR: #0000ff">></span>
<span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">body</SPAN><SPAN style="COLOR: #0000ff">></span>
   <span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">h1</SPAN> <SPAN style="COLOR: #ff0000">id</SPAN><SPAN style="COLOR: #0000ff">="qunit-header"</SPAN><SPAN style="COLOR: #0000ff">></span>QUnit Test Suite<span style="COLOR: #0000ff"></</SPAN><SPAN style="COLOR: #800000">h1</SPAN><SPAN style="COLOR: #0000ff">></span> 
  <span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">h2</SPAN> <SPAN style="COLOR: #ff0000">id</SPAN><SPAN style="COLOR: #0000ff">="qunit-banner"</SPAN><SPAN style="COLOR: #0000ff">></</SPAN><SPAN style="COLOR: #800000">h2</SPAN><SPAN style="COLOR: #0000ff">></span> 
  <span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">div</SPAN> <SPAN style="COLOR: #ff0000">id</SPAN><SPAN style="COLOR: #0000ff">="qunit-testrunner-toolbar"</SPAN><SPAN style="COLOR: #0000ff">></</SPAN><SPAN style="COLOR: #800000">div</SPAN><SPAN style="COLOR: #0000ff">></span> 
  <span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">h2</SPAN> <SPAN style="COLOR: #ff0000">id</SPAN><SPAN style="COLOR: #0000ff">="qunit-userAgent"</SPAN><SPAN style="COLOR: #0000ff">></</SPAN><SPAN style="COLOR: #800000">h2</SPAN><SPAN style="COLOR: #0000ff">></span> 
  <span style="COLOR: #0000ff"><</SPAN><SPAN style="COLOR: #800000">ol</SPAN> <SPAN style="COLOR: #ff0000">id</SPAN><SPAN style="COLOR: #0000ff">="qunit-tests"</SPAN><SPAN style="COLOR: #0000ff">></</SPAN><SPAN style="COLOR: #800000">ol</SPAN><SPAN style="COLOR: #0000ff">></span> 
<span style="COLOR: #0000ff"></</SPAN><SPAN style="COLOR: #800000">body</SPAN><SPAN style="COLOR: #0000ff">></span>
<span style="COLOR: #0000ff"></</SPAN><SPAN style="COLOR: #800000">html</SPAN><SPAN style="COLOR: #0000ff">></span>
Copy after login

QUnit不仅仅为你提供了测试脚本函数,还为你的单元测试提供了一个标准化的测试界面,如下图所示,红色的表示这个测试用例没有通过,绿色的表示通过。每一个框比表示一个测试函数,里面可能有多个断言语句的结果,标题中(x,y,z)表示总共有z个断言,y个是正确的,x个是错误的。

image

刚才只是初步看了下界面,现在我们来学习如何使用,我从http://github.com/jquery/jquery/raw/master/test/unit/core.js下载了一个core.js的范例测试代码,这个是jQuery用来测试它的核心模块的代码。

在中加入,注意一定要在qunit.js声明后面,因为core.js中用到了qunit.js定义的函数。

这时你再运行刚才我们创建的html文件,你就会看到类似上图的结果,这就是core.js的测试结果,是不是一清二楚?如果是测试你自己的函数,你就可以根据红色的错误提示跟踪问题所在,直到把所有的测试结果都变成绿色。

测试脚本怎么写

测试脚本的写法,我建议你参考http://docs.jquery.com/Qunit#Reference_Test_Suites,这里面有提到一些测试用例的文件,你可以通过它们来研究怎么写测试用例,尽管有些测试用例已经跑不通了。

比较常用的函数有:

expect(amount) - 指定某个函数中会有多少个断言,通常写在测试函数开头。

module(name) - 模块是测试函数的集合,使用该函数可以在UI中将测试函数按模块归类。

ok(state, message) – 布尔型断言,message是专门显示在QUnit界面上,用来区分不同的断言的

equals(actual, expected, message) - 相等断言,actual和expected的值相等时才能通过。

same(actual, expected, message) - 完全相等断言,和equals的区别在于它会比较子元素,对于数组和一些自定义对象的比较十分有用。

这些是最常用的,其他的大家可以自己参考Qunit官方文档。

 

第一个QUnit测试用例

假设我们写个这样的函数,计算a+b的结果,如下

<span style="COLOR: #0000ff">function</span> CalculateAPlusB(a,b)
{
  <span style="COLOR: #0000ff">return</span> a+b;
}
Copy after login

在页面中加入一个单独的js引用专门用来写单元测试的function,比如叫test.js

<script language=<SPAN style="COLOR: #006080">"javascript"</SPAN> src=<SPAN style="COLOR: #006080">"test.js"</SPAN> type=<SPAN style="COLOR: #006080">"text/javascript"</SPAN>/>
Copy after login

具体的测试代码如下

test(<span style="COLOR: #006080">"basic calculation"</span>, <span style="COLOR: #0000ff">function</span>() {
    equals(CalculateAPlusB(1,5),6,<span style="COLOR: #006080">"1+5=6"</span>);
    equals(CalculateAPlusB(1.2,5.5),6.7,<span style="COLOR: #006080">"1.2+5.5=6.7"</span>);
    equals(CalculateAPlusB(-1,10),9,<span style="COLOR: #006080">"-1+10=9"</span>);
  });

test(<span style="COLOR: #006080">"pass null test"</span>, <span style="COLOR: #0000ff">function</span>() {
    ok(isNaN(CalculateAPlusB(<span style="COLOR: #0000ff">null</span>,5)),<span style="COLOR: #006080">"pass null as the first argument"</span>);
    ok(isNaN(CalculateAPlusB(5,<span style="COLOR: #0000ff">null</span>)),<span style="COLOR: #006080">"pass null as the second argument"</span>);
    ok(isNaN(CalculateAPlusB(<span style="COLOR: #0000ff">null</span>,<span style="COLOR: #0000ff">null</span>)),<span style="COLOR: #006080">"no argument pass in"</span>);
  });
Copy after login

테스트 메소드는 테스트 메소드를 정의하기 위해 qunit에서 사용하는 명령문입니다. 첫 번째 매개변수는 테스트 케이스의 이름을 나타내고 두 번째 매개변수는 특정 구현을 나타냅니다. 기대값이 실제값과 일치하는지 비교하는 데는 같음(equals)이 사용되고, 결과가 참인지 확인하는 데에는 ok(ok)가 사용됩니다.

잘 진행되면 아래와 비슷한 결과가 나타납니다.

qunit1

이제 축하해 주세요. 모든 테스트 결과가 녹색으로 표시되어 있어 테스트가 통과되었음을 의미합니다. 물론 여기에는 테스트 값이 오버플로되는 경우와 같이 이 메서드를 테스트하기 위해 더 많은 테스트 사례를 작성할 수 있습니다.

참고자료

http://www.lostechies.com/blogs/chad_myers/archive/2008/08/28/getting-started-with-jquery-qunit-for-client-side-javascript-testing.aspx

http://docs.jquery.com/Qunit

http://www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit/

http://www.agiledata.org/essays/tdd.html

http://www.oncoding.cn/2010/javascript-unit-testing-qunit/

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template