30分钟QUnit入门教程

30分钟Qunit入门教程

15分钟让你了解Javascript单元测试框架QUnit,并能在程序中使用。

QUnit是什么

QUnit是一个强大,易用的JavaScript单元测试框架,由jQuery团队的成员所开发,并且用在jQuery,jQuery UI,jQuery Mobile等项目。

Hello World

学习QUnit还是从例子开始最好,首先我们需要一个跑单元测试的页面,这里命名为index-test.html:

> >QUnit Example=>===> ></body></html>

这里主要引入了两个文件,一个是QUnit的CSS文件,一个是提供断言等功能的JS文件。

这里另外引入了一个tests.js文件,我们的测试用例就写在这个文件里面。 tests.js:

QUnit.test( “hello test”, function( assert ) { assert.ok( “hello world” == “hello world”, “Test hello wordl” );});

页面载入完毕,QUnit就会自动运行test()方法,第一个参数是被测试的单元的标题,第二个参数,就是实际的而是代码,这里的参数assert为QUnit的断言对象,其中提供了不少断言方法,这里使用了ok()方法,ok()方法接受两个参数,第一个是表明测试是否通过的bool值,第二个则是需要输出的信息。

我们在浏览器中运行index-test.html,就会看到测试结果:

从上到下,可以看到有三个checkbox,这几个的作用,我们后面再说。然后看到浏览器的User-Agent信息。之后是总的测试信息,跑了几个断言,通过了几个,失败了几个。最后是详细信息。

假如我们稍微修改一下刚才的断言条件,改成!=

assert.ok( “hello world” != “hello world”, “Test hello wordl” );

则会得到测试失败的信息:

详细信息中有错误的行号,以及diff信息等。

更多断言

上面介绍了assert.ok()方法,QUnit还提供了一些别的断言方法,这里再介绍几个常用的。

equal(actual, expected [,message]) equal()断言用的是简单的==来比较实际值和期望值,相同则通过,否则失败。 修改一下tests.js:

QUnit.test( assert.equal( 0, 0, “Zero, Zero; equal succeeds” ); assert.equal( “”, 0, “Empty, Zero; equal succeeds” ); assert.equal( “”, “”, “Empty, Empty; equal succeeds” ); assert.equal( 0, false, “Zero, false; equal succeeds” ); assert.equal( “three”, 3, “Three, 3; equal fails” ); assert.equal( null, false, “null, false; equal fails” );});

浏览器中运行:

如果你需要严格的比较,需要用strictEqual()方法。

deepEqual(actual, expected, [,message]) deepEqual()断言的用法和equal()差不多,它除了使用===操作符进行比较之外,还可以通过比较{key : value}是否相等,来比较两个对象是否相等。

QUnit.test( obj = { foo: “bar” }; assert.deepEqual( obj, { foo: “bar” }, “Two objects can be the same in value” );});

如果要显式的比较两个值,equal()也可以适用。一般来说,deepEqual()是个更好的选择。

同步回调 有时候,我们的测试用例包含回调函数,要在回调函数中进行断言。这里可以用到assert.expect()函数,它接受一个表示断言数量的int值,表示这个test里面,预计要跑多少个断言。这里为了方便,,引入了jQuery库,在index-test.html中加入<script src=”http://code.jquery.com/qunit/qunit-1.17.1.js”></script>

QUnit.test( “a test”, function( assert ) { assert.expect( 1 ); var $body = $( “body” ); $body.on( “click”, function() {assert.ok( true, “body was clicked!” ); }); $body.trigger( “click” );});

异步回调 assert.expect()对同步的回调非常有用,但是对异步回调却不是那么适用。 稍微修改一下上面的例子:

QUnit.test( done = assert.async(); var $body = $( “body” ); $body.on( “click”, function() {assert.ok( true, “body was clicked!” );done();$body.unbind(‘click’); }); setTimeout(function(){console.log(“To click body”)$body.trigger( “click” ); }, 1000)});

使用assert.async()返回一个”done”函数,当操作结束的时候,调用这个函数。另外我在”done”函数调用结束之后,把body的click事件给移除了,这个是为了方便我在点击结果网页的时候,不要出发多次done函数。 结果:

这里我们也可以使用QUnit.start()与QUnit.stop()来控制异步回调中断言的判断。

QUnit.test( “a test 1”, function( assert ) { QUnit.stop() var $body = $( “body” ); $body.on( “click”, function() {assert.ok( true, “body was clicked!” );QUnit.start();$body.unbind(‘click’); }); setTimeout(function(){console.log(“To click body”)$body.trigger( “click” ); }, 1000)});我们一直在旅行,一直在等待某个人可以成为我们旅途的伴侣,

30分钟QUnit入门教程

相关文章:

你感兴趣的文章:

标签云: