« そば改善要望 | メイン | Text Wrangler2.0 »
2005年02月02日
JavaScript のテストのコツ
を尋ねられたので一つ。最近は JavaScript の開発はそばでやっている。リアルタイムに結果がわかるので便利。
ただ、ブラウザ間の互換性をテストするのに、「スクリプトのコピー->ブラウザの切り替え->ペースト->何か操作」では面倒なのでちょっと工夫をしている。
実際のコードはこんな感じ。JavaScriptUnitね。assertEquals に何かの実行結果と、期待値を渡す。
・足し算関数 add と 1 加えた値を返す inc関数のテスト
----
<html>
<head>
<Script>
function add(var1,var2){
return var1+var2;
}
function inc(var1){
//return var1+1;
return var1-1;
}
function test(){
initTest();
assertEquals(2,add(1,1));
assertEquals(3,add(2,1));
assertEquals(3,inc(2));
showResult();
}
var testResult,successCount,errorCount,errorMessage;
function initTest(){
testResult = "";
successCount = 0;
errorCount = 0;
errorMessage = "";
}
function assertEquals(var1,var2){
if(var1 == var2){
successCount++;
testResult+=".";
}else{
errorCount++;
testResult+="F";
errorMessage += (successCount+errorCount)+") expected:<"+var1+"> but was:<"+var2+"><br>";
}
}
function showResult(){
if(errorCount == 0){
testResult+="<br>OK ("+successCount+" tests)"
}else{
if(errorCount >1){
testResult+="<br>There were "+errorCount+" failures:<br>";
}else{
testResult +="<br>There was "+errorCount+" failure:<br>";
}
testResult+=errorMessage;
testResult+="<br>FAILURES!!!<br> Tests run: "+(successCount+errorCount)+", Failures: "+errorCount;
}
document.getElementById("resultArea").innerHTML = testResult;
}
</Script>
</head>
<body onload="test()">
<div id="resultArea"></div>
</body>
</html>
--------
この例では inc()関数では１足さずに１引いているのでテスト3は失敗することになる
実行結果↓(実際にスクリプトが埋め込まれてる)
2005/2/6追記
オレンジニュースからリンクを頂いたので今使ってる最新版をダウンロード出来るように。
テストの最初、最後に initTest()/showResult() を呼び出す以外は JUnit っぽい assert メソッドを呼び出すだけ。
テスト開始 : initTest()
テスト終了、結果表示 : showResult()
等しいかどうかのテスト : assertEquals(テスト名,値1,値2)
Trueを返すかどうかのテスト : assertTrue(テスト名,値)
Falseを返すかどうかのテスト : assertFalse(テスト名,値)
テスト失敗する : fail(テスト名)
デバッグメッセージを記録(テスト失敗時のみ赤字で表示される) : debug(メッセージ)
展開すると common.js にクッキー、XMLHttpRequest、ブラウザ判定関連の関数が入ってます。commontest.html がテスト用コード。JavaScriptUnit.js がJavaScriptUnit の本体。
javascriptunit.zip
ライセンス:好きに使ってください/改変再配布可/商用非商用問わず無償利用可
投稿者 yusuke : 2005年02月02日 15:31
トラックバック
このエントリーのトラックバックURL:
http://yusuke.homeip.net/diary/mt/mt-tb.cgi/175
このリストは、次のエントリーを参照しています: JavaScript のテストのコツ:
» 複数ブラウザに対応するJavascriptの書き方 from 希望と知識と戯言と
そばの作者さんに質問したら、丁寧に解説してもらえた。 http://yusuke.homeip.net/diary/archives/000175.html 基... [続きを読む]
トラックバック時刻: 2005年02月04日 06:28
» sobaの活用 from Drift Diary2
なるほど [続きを読む]
トラックバック時刻: 2005年02月10日 20:07
» はてなブックマーク例 from PukiWiki/TrackBack 0.2
Counter: 1, today: 1, yesterday: 0 はてなブックマークを開く 2005-02-24 stroll::blo... [続きを読む]
トラックバック時刻: 2005年02月24日 04:17
» JavaScriptUnit UnitTestingフレームワーク from 開発系(?)日記
JavaScript のテストのコツ
便利。
昔TestファーストでJavaを書いていたことがあったのだが、JavaScriptは慣れないだけにありがたかった... [続きを読む]
トラックバック時刻: 2005年08月14日 23:46
コメント
こういうネタはコメントに困る。
投稿者 Danny : 2005年02月04日 00:47
なんかここ一週間そば開発日誌みたいですね。
投稿者 裕介 : 2005年02月04日 14:36
ちょっと探してみたら本家（？）を発見。
触ってみようかな。
http://sourceforge.net/projects/jsunit/
投稿者 裕介 : 2005年02月07日 00:15