QUnit 入门

最新推荐文章于 2024-11-17 15:40:23 发布

spring21st

最新推荐文章于 2024-11-17 15:40:23 发布

阅读量4k

点赞数

分类专栏： DHTML jQuery 文章标签：测试 javascript module equals function jquery

DHTML 同时被 2 个专栏收录

132 篇文章 0 订阅

订阅专栏

jQuery

56 篇文章 0 订阅

订阅专栏

本文介绍QUnit，一个强大且易于使用的JavaScript测试工具，适用于jQuery项目及普通JavaScript代码的测试。文章提供了使用QUnit的基本步骤及示例代码，并概述了其主要功能，包括设置测试、模块分组和异步测试等。

摘要由CSDN通过智能技术生成

在庆祝jQuery的4周年纪念上，Qunit 作为jQuery Project的一个组成部分，以前只是做JavaScript编码，从来没做过JavaScript测试，优秀的代码是经得过测试的。学习ing~

关于：

QUnit 是一个强大的、易用的JavaScript测试工具，它可以在jQuery项目中测试其代码和插件，同样可以测试普通的JavaScript 代码。
QUint 在回归测试中尤其有用，每当有bug被报告，就可以使用断点去进行跟踪变量。

联系：

QUnit 是由 Jörn Zaefferer 和 John Resig 进行维护的。有任何问题，可以反馈到 Developing jQuery Core forum

使用 QUnit

使用QUnit 进行JavaScript ，只需在HTML页面添加 qunit.js and qunit.css 引用，用来显示测试的结果。

下面是一个简单的示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" mce_href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" /> <mce:script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js" mce_src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <h1 id="qunit-header">QUnit example</h1> <h2 id="qunit-banner"></h2> <h2 id="qunit-userAgent"></h2> <ol id="qunit-tests"></ol> </body> </html>

测试结果如下：

P.S 在测试结果中，module后的括号内数字含义分别为：测试失败个数、测试通过个数、测试的总个数

如：1. a basic test example(0,2,2)

意思是，测试该函数一共用了两条用例，失败0个，通过2个，总数2个。

API 文档：

setup：

test( name, expected, test ) 添加一个测试。
asyncTest( name, expected, test ) 添加一个异步测试，这个测试必须回调start()。
expect( amount ) 特别指出在一个测试中预期的多个断点。

module( name, lifecycle )：是用于对测试模块进行分组，[lifecycle] 用于初始化测试和清理测试。

init( ) 初始化测试。

Assertions:

ok( state, message ) 布尔型断点，相当于JUnit中的assertTrue, 如果第一个参数的值是true则通过。
equals( actual, expected, message ) 比较断点，相当于JUnit中的assertEquals。
same( actual, expected, message ) 回归比较断点，可以应用于对原始类型、数组和对象。

异步测试：

start( ) 当测试停止的时候，启动测试。
stop( timeout ) 停止测试，等待异步测试的开始。

原文参见：http://docs.jquery.com/Qunit

入门参考：http://www.oncoding.cn/2010/javascript-unit-testing-qunit/comment-page-1

http://www.cnblogs.com/tonyqus/archive/2010/10/31/jquery_tdd_qunit.html

关于前端单元测试，欢迎讨论：如何推广前端单元测试 http://www.javaeye.com/topic/227065