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()関数では１足さずに１引いているのでテスト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
ライセンス:好きに使ってください/改変再配布可/商用非商用問わず無償利用可
最近は 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()関数では１足さずに１引いているのでテスト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
ライセンス:好きに使ってください/改変再配布可/商用非商用問わず無償利用可
Tweet |