標(biāo)簽： 前端開發(fā)
1. QUnit是什么？
一個(gè)js進(jìn)行單元測(cè)試的庫
單元測(cè)試就是檢驗(yàn)代碼是否按預(yù)期運(yùn)作启泣。
代碼寫的測(cè)試比人手測(cè)試好得多涣脚，因此單元測(cè)試是必須的。
官網(wǎng)
2. 如何使用
1）hello world：準(zhǔn)備兩個(gè)文件寥茫，一個(gè)顯示測(cè)試結(jié)果的頁面（有模板）遣蚀，一個(gè)測(cè)試用例
<!-- test.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" >
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture" style="border: 1px solid red"></div>
<script src="http://code.jquery.com/qunit/qunit-1.17.1.js"></script>
<script src="test.js"></script>
</body>
</html>
測(cè)試用例的一個(gè)簡(jiǎn)單demo
//數(shù)字表示共有多少個(gè)斷言，可有可無
QUnit.test("hello test", 1, function (assert) {
assert.ok("hello" == "hello", "hello world successfully");
});
斷言還有equal(), deepEqual()等等，詳細(xì)可參考官網(wǎng)
在瀏覽器上看test.html結(jié)果如下：
- 同步回調(diào)
QUnit.test("sync callback", function (assert) {
var body = $('body');
body.click(function(){
assert.ok(true, "body was clicked");
body.unbind("click");
});
body.trigger("click"); //注意這里是jQuery的寫法芭梯，原生是element.click();
assert.ok(true, "test");
});
- 異步回調(diào)
有兩種方法:一是使用var done = assert.async(), 再在異步斷言處調(diào)用done()险耀；另一種是使用QUnit.asnycTest()
//第一種方法
QUnit.test("async callback", 2, function (assert) {
var body = $('body');
var done = assert.async(); //表示存在異步，先暫停測(cè)試
body.click(function(){
assert.ok(true, "body was clicked");
done(); //表示異步結(jié)束玖喘，開始測(cè)試
body.unbind("click");
});
setTimeout(function(){
body.trigger("click");
}, 1000)
assert.ok(true, "test");
});
//第二種方法
QUnit.asyncTest("async callback", 2, function (assert) {
var body = $('body');
body.click(function(){
assert.ok(true, "body was clicked");
QUnit.start(); //表示異步完成甩牺，開始測(cè)試
body.unbind("click");
});
setTimeout(function(){
body.trigger("click");
}, 1000)
assert.ok(true, "test");
});
- AJAX測(cè)試的一種寫法
對(duì)于有多個(gè)異步讀取的頁面蟹演，可以這樣寫測(cè)試用例
//當(dāng)完成所以的ajax時(shí)調(diào)用start開始測(cè)試
function createAsyncCounter(count){
count = count || 1;
return function(){ --count || QUnit.start()};
//count為零時(shí)開始測(cè)試
}
QUnit.asyncTest("ajax test", 2, function(assert){
//這里只展示1個(gè)ajax檬果，根據(jù)自己情況而定
var count = createAsyncCounter(1);
var x = $.ajax("https://api.github.com/users/octocat/gists");
x.done(function(data, status, xhr){
assert.ok(data,"get data");
assert.equal(data[0]["id"],"6cad326836d38bd3a7ae","id correct");
}).always(count); //無論ajax成功與否都執(zhí)行計(jì)數(shù)
});
- DOM測(cè)試
可以測(cè)試dom操作是否達(dá)到預(yù)期，需要用到測(cè)試頁面的#qunit-fixture
QUnit.test("dom test", 1, function (assert) {
var fixture = $('#qunit-fixture');
fixture.append('<span>hello!</span>');
assert.equal($('span', fixture).length, 1, "div append one span");
});
#qunit-fixture每次測(cè)試都會(huì)自動(dòng)清除自身內(nèi)容宣旱，因此可復(fù)用费尽。
6)分組
使用在測(cè)試的方法上面加一句QUnit.module("module_name"); 即可分組
另外分組也可以設(shè)置測(cè)試前后需要做的事情
QUnit.module("module_name", {setup:function(){//..}, teardown:function(){//...}});
- 自定義斷言
//定義
QUnit.assert.mod2 = function(value, expect, message){
var actual = value % 2;
this.push(actual === expect, actual, expect, message);
}
//使用
QUnit.test( "test", function( assert ) {
assert.expect( 2 );
assert.mod2( 2, 0, "2 % 2 == 0" );
assert.mod2( 3, 1, "3 % 2 == 1" );
});
- 測(cè)試頁面上的工具
三個(gè)checkbox
Hide passed tests
很好理解赠群，就是隱藏通過的測(cè)試，勾選之后旱幼，通過的測(cè)試就不顯示出來了查描，在測(cè)試用例多的時(shí)候非常有用。而且使用了HTML5的sessionStorage技術(shù)柏卤，會(huì)記住之前沒通過的測(cè)試冬三，然后頁面重新載入的時(shí)候只測(cè)試之前那部分沒有通過的case。
Check for Globals
“全局檢查“缘缚，如果勾選了這項(xiàng)勾笆，在進(jìn)行測(cè)試之前，QUnit會(huì)檢查測(cè)試之前和測(cè)試之后window對(duì)象中的屬性桥滨，如果前后不一樣窝爪，就會(huì)顯示不通過。
No try-catch
選中則意味著QUnit會(huì)在try-catch語句之外運(yùn)行回調(diào)齐媒，此時(shí)蒲每，如果測(cè)試拋出異常，測(cè)試就會(huì)停止喻括。主要是因?yàn)橛行g覽器的調(diào)試工具是相當(dāng)弱的邀杏，尤其IE6，一個(gè)未處理的異常要比捕獲的異郴Ｑ可以提供更多的信息望蜡。即使再次拋出，由于JavaScript不擅長(zhǎng)異常處理刁品，原來的堆棧跟蹤在大多數(shù)瀏覽器里都丟失了泣特。如果遇到一個(gè)異常，無法追溯錯(cuò)誤代碼的時(shí)候挑随，就可以使用這個(gè)選項(xiàng)了状您。
測(cè)試用例旁邊還有一個(gè)rerun可以重新測(cè)試
- 使用grunt實(shí)現(xiàn)自動(dòng)測(cè)試
很簡(jiǎn)單勒叠，首先安裝qunit插件:
npm install grunt-contrib-qunit --save-dev
然后在grunt.initConfig里配置qunit: { files:[test/*.html] }
添加任務(wù)到watch
watch:{
files:['<%= jshint.files %>', '<%= qunit.files %>'],
tasks:['jshint', 'qunit']
}
加載庫 grunt.loadNpmTasks('grunt-contrib-qunit');
也可以加入到常規(guī)任務(wù)中 grunt.registerTask('test', ['jshint', 'qunit', 'watch']);
之后每次更新插件都會(huì)自動(dòng)運(yùn)行測(cè)試文件。
