May 7 2011

Qunit

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);
});