使用firebug + fireunit做javascript的單元測試

Tue, 10 Feb 2009 15:00:51 +0800

在John Resig的blog上看到的，簡單好用的單元測試工具。作者就是......他自己。

FireUnit: JavaScript Unit Testing Extension
另一個blog的介紹文章，更詳細：Fireunit, testing in the Firebug world.
官網：http://fireunit.org/

條列一下幾個簡單的用法說明：

fireunit.ok(Boolean, '測試說明')
（簡單測試，第一個參數是true時測試結果成功，false時測試失敗。第二個參數是測試的說明。）
fireunit.compare(預期結果, 實際結果, '測試說明')
（比較預期結果與實際結果是否相同，第三個參數是測試的說明。）
fireunit.reCompare(預期結果, 實際結果, '測試說明')
（與compare差不多，但是預期結果是用Regular Expression來表示，所以結果用RE比較是符合的就可通過測試）
fireunit.testDone()
（測試完畢，產生測試結果）

不過fireunit是一個還在開發中的工具，還有許多功能未完善，例如不能比較陣列物件等等，另外TestSuite的功能還未完善（利用網站上的原始碼把程式更新到最新的版本，還是有問題，目前在localhost上測試是ok，但是file://還有問題）。與Firebug結合是不錯的想法，我在Resig文章的comment上有看到Zakas試著移植到YUI上，另外也有人提議把他整合成JsUnit的前端。

接下來看一下安裝方法：

安裝好1.2以上版本的FireBug
上fireunit.org，點選Download Latest Extension連結來安裝
安裝完後，點選下面的Source Code連結
依序進入chrome/content/fireunit/fireunit.js，然後點選程式碼右上角的[raw]，選取全部內容，拷貝後，用這個內容取代安裝好的fireunit內的fireunit.js內容
接著進入chrome/skin/classic/fireunit.css，同樣點選程式碼右上角的[raw]，選取全部內容，拷貝之後，用這個內容取代胺裝好的fireunit內的fireunit.css內容
（其實架構跟程式都有一些更動，如果要用testsuite功能，更新過會比較好用。東西安裝在哪裡，就請自己找一找了。）

接下來寫一個testsuite做測試(test415.html)：

<html>
<body>
<script type="text/javascript">
if(fireunit.forceHttp()) {
  fireunit.runTests(
    "test414.html",
    "test414a.html"
  );
}
</script>
</body>
</html>

接下來做簡單的測試檔：（test414.html）

<html>
<body>
<script type="text/javascript">
function trim(str) {
  str = str.replace(/^s+/g, '');
  str = str.replace(/s+$/g, '');
  return str;
}
fireunit.compare('hello there.', trim('  hello there.'), 'trim left side. for test only. for test only for test only. for test only. for test only. trim left side. for test only. for test only for test only. for test only. for test only. trim left side. for test only. for test only for test only. for test only. for test only. trim left side. for test only. for test only for test only. for test only. for test only. trim left side. for test only. for test only for test only. for test only. for test only.');
fireunit.compare('hello there.', trim('hello there. '), 'trim right side.');
fireunit.compare('hello there.', trim(' hello there. '), 'trim both side.');
window.setTimeout(function(){fireunit.testDone();},1000);
</script>
</body>
</html>

另一個測試檔：（test414a.html）

<html>
<body>
<script type="text/javascript">
function trim(str) {
  str = str.replace(/^s+/g, '');
  str = str.replace(/s+$/g, '');
  return str;
}
fireunit.compare('hello there.', trim('  hello there.'), 'trim left side.');
fireunit.compare('hello there.', trim('hello there. '), 'trim right side.');
fireunit.compare('hello there.', trim(' hello there. '), 'trim both side.');
window.setTimeout(function(){fireunit.testDone();},1000);
</script>
</body>
</html>

把檔案放到locahost的apache伺服器的同一個目錄中，透過瀏覽器執行http://localhost/test415.html，打開FireBug，點選Test頁籤，就可以看到測試結果：

稍微補充說明，原始碼的網站內，其實還有wiki，裡面的說明才夠完整。使用上有問題的話，建議到這個wiki看看。另外commit的說明也可以看看，新增了什麼功能。

總之，雖然功能簡單，而且還不夠完整，但是使用起來還蠻方便的。可以期待他未來的發展。

2008-2-12 15:42 補充：

其實fireunit還提供了幾個DOM事件的測試函數，在上面的文章沒提到，包括：

fireunit.click(node)
（模擬在node上的onclick事件來測試node上attach的事件處理程式）
fireunit.mouseDown(node)
（模擬在node上的onmousedown事件來測試node上attach的事件處理程式）
fireunit.focus(node)
（模擬在node上的onfocus事件來測試node上attach的事件處理程式）
fireunit.key(node,letter)
（模擬在node上的onkeypress事件來測試node上attach的事件處理程式）

不過要配合單元測試的進行，這些事件處理程式要根據適當的條件回傳一些處理結果（例如true/false等），才能配合fireunit.ok()或fireunit.compare()來做測試。以下是一個簡單的例子：

<html>
<body>
<div id="target" onclick="this.style.background='gray';return true;">test</div>
</body>
</html>
<script>
fireunit.compare(true, fireunit.click(document.getElementById("target")), "click test");
fireunit.testDone();
</script>