« そば改善要望 | メイン | Text Wrangler2.0 »

2005年02月02日

JavaScript のテストのコツ

を尋ねられたので一つ。
最近は JavaScript の開発はそばでやっている。リアルタイムに結果がわかるので便利。
ただ、ブラウザ間の互換性をテストするのに、「スクリプトのコピー->ブラウザの切り替え->ペースト->何か操作」では面倒なのでちょっと工夫をしている。
今のとこ、ページをロードしたら自動的にテストさせるように作って、起動してあるブラウザで再ロードだけすれば良いようにしている。将来的にはそばで編集中の html を各ブラウザで自動ロードさせるような仕組みを作る予定。
実際のコードはこんな感じ。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()関数では1足さずに1引いているのでテスト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