blog.waterlow.work

Ruby, Rails, js, etc...

【JS】テストコードを書き書き

JavaScript本格入門に少し飽きてきたので違う本を読んでます。

テスト駆動JavaScript

テスト駆動JavaScript

まだ本全体の趣旨があまり見えていないのですが… *** 第一章 第一章では自分でブラウザベースのテスト関数を作るところから始まって、出力をわかりやすくしたりテストケースをまとめて関数にしたりしながらテスティングフレームワークはこうあるべきだ!みたいなところを学んでいきます。JSはまとめるとすれば何らかの関数を作るしかないので、この辺を勉強するのにはいいかもしれません。

|javascript| // テスト関数 function assert(message, expr) { // exprがfalseならエラー if (!expr) { throw new Error(message); } assert.count++; return true; } assert.count = 0;

// 結果を彩色してブラウザに渡す関数 function output (text, color) { var p = document.createElement("p"); p.innerHTML = text; p.style.color = color; document.body.appendChild(p); }

// テストケース関数 function testCase (name, tests) { assert.count = 0; var successful = 0; var testCount = 0; // setUp関数があるかどうかチェック var hasSetup = typeof tests.setUp == "function"; // tearDown関数があるかどうかチェック var hasTeardown = typeof tests.tearDown == "function"; for (var test in tests){ // テストケースのフォーマットチェック // 'test'で始まらなければ実施しない if (!/^test/.test(test)) { continue; }

testCount++;

// テスト実施
try{
  tests[test]();
  // エラー無く終了したら緑色でテストケース名を表示
  output(test, "#0c0");
  successful++;
} catch(e){
  // 値が違っていた場合はテストケース名とエラーメッセージを赤字で表示
  output(test + "failed: " + e.message, "#c00");
}

}

// トータル結果は、総テスト数と成功テスト数が同じなら緑、違えば赤で表示 var color = successful == testCount ? "#0c0" : "#c00"; output("" + testCount + " tests, " + (testCount - successful) + " failures", color); } ||<

結局は何らかのフレームワークを使うのですが笑

第二部はテストを書きながらJavaScriptの仕様を勉強していきます。 QUnitを使っていく予定です!