Qunit是javascript的unit test之一,這套工具由jquery team撰寫的,使用的方式比起Jsunit,更有javascript風格。
首先要先配置html:
<html>
<head>
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="../qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="../qunit/qunit.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup</div>
</body>
</html>
在html配置部分,id名稱必須依照官方的命名,簡單來說只需要將測試的程式,加入到head裡面即可。
Qunit所提供的幾個function:
/**
* @param {String} name 單元測試的名稱
* @param {Number} expected 要比對的數量(可選)
* @param {function} test 要測試的function
* asyncTest需要在測試完後,多呼叫一個start()
* 否則將不會向下測試
*/
test(name,expected,test)
asyncTest(name,expected,test)
/**
* @param {Number} amount 要比對的數量
*/
expect(amount)
/**
* @param {String} name module的名稱
* @param {Object} lifecycle 用來配置初始化和結束執行的function(可選)
* 分別為setup和teardown
*/
module(name,lifecycle)
/**
* @param {boolean} state
* @param {String} message
*/
ok(state,message)
/**
* @param {*} actual 比對值
* @param {*} expected 期望值
* @param {String} message (可選)
* equal:actual == expected
* deepEqual:actual === expected(深度比對,會一層一層比對)
* strictEqual:actual === expected
*/
equal(actual,expected,message)
notEqual(actual,expected,message)
deepEqual(actual,expected,message)
notDeepEqual(actual,expected,message)
strictEqual(actual,expected,message)
notStrictEqual(actual,expected,message)
/**
* 繼續往下執行測試
*/
start()
/**
* @param {Number} timeout 延遲向下執行的時間(可選)
* 若無輸入參數會等待呼叫start才會向下執行測試
*/
stop(timeout)
幾個簡單範例:
/*
* 一個簡單範例
*/
test("module without setup/teardown (default)", function() {
expect(1);
ok(true);
});
/*
* setup將會先執行,而teardown會最後執行
*/
var state;
module("setup/teardown test", {
setup: function() {
state = true;
ok(true);
},
teardown: function() {
ok(true);
}
});
test("module with setup/teardown", function() {
expect(3);
ok(true);
});
/**
* stop和start運用
*/
module("asyncTest");
// stop呼叫2次,start也必須呼叫兩次
// 才會向下執行下個test
test("sync", 2, function() {
stop();
setTimeout(function() {
ok(true);
start();
}, 13);
stop();
setTimeout(function() {
ok(true);
start();
}, 125);
});
// 必須呼叫start才會執行下個test
asyncTest("asyncTest", 2, function() {
ok(true);
setTimeout(function() {
state = "done";
ok(true);
start();
}, 13);
});