QUnit 入门

最新推荐文章于 2024-10-28 13:13:24 发布

单向街的夏天

最新推荐文章于 2024-10-28 13:13:24 发布

阅读量1k

点赞数

分类专栏： JS-Jquery-Ajax 文章标签：测试 javascript function jquery equals

本文链接：https://blog.csdn.net/wenbingoon/article/details/7899722

版权

JS-Jquery-Ajax 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在庆祝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 引用，用来显示测试的结果。

下面是一个简单的示例：

[xhtml:nogutter]view plaincopy 
    
 <!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"><!--  
     $(document).ready(function(){  
       
         test("a basic test example", function() {  
             ok( true, "this test is fine" );  
             var value = "hello";  
             equals( "hello", value, "We expect value to be hello" );  
         });  
   
         module("Module A");  
   
         test("first test within module", function() {  
             ok( true, "all pass" );  
         });  
   
         test("second test within module", function() {  
             ok( true, "all pass" );  
         });  
   
         module("Module B");  
   
         test("some other test", function() {  
             expect(2);  
             equals( true, false, "failing test" );  
             equals( true, true, "passing test" );  
         });  
   
     });  
 // --></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