なんでC言語でやら（ry
お題
JQueryを使ってFizzBuzz、にしました。ちなみに、JavaScriptはわかりません。Google先生に誰が知ってるか聞きました。
JQueryもわかりません。Google先生に誰が知ってるか聞きました。
いろいろ調べ過ぎてどこみたかも不明ですが、ツイート参照ということで、先人に感謝。
準備
環境は QUnit + Eclipse + JSDT Plugin という感じでやりました。jsTestDriver を使おうとしたのですが、うまく行かず、テストの実行自体はブラウザです。
JQueryはダウンロードしてきて、main/js/external/ というフォルダを作っていれました。
QUnitの準備
QUnit は npm で入れました。package.jsonを作ったので、PJルートで以下のコマンドでインストールされます。/node_modules にインストールされるので、そこのパスをみるように実装しています。
$ npm install
テスト実装のHTMLは /test/html/runner.html です。
基本的にはオフィシャルをみれば分かる感じでしたが、 #qunit-fixture のdivタグの中に、評価条件のHTMLを入れるというのがポイントでした。
テストコードの setup() でタグを置き換えても良さそうでしたが、今回は複雑ではないので固定にして、プロダクトコードの body と一緒にしています。
ちなみに、 #qunit-fixture の divタグ内は、テストケースごとに初期化されます。
この状態でブラウザで runner.html を開いておいて随時テストを実行します。
TDDをやった経過
TODOリストも随時コミットすれば良かった・・・と思ったのは後の祭り。でも、最終的なものをコミットしています。
Red -> Green -> Refactoring の流れのうち、Red -> Green でコミット、 Refactoring でコミットを基本にして、 Red -> Green -> Refactoring でコミット、大きなリファクタリングでのコミットと、ログで経過が追えるようにしました。
仮実装、三角測量といった TDD Boot Camp で体験した事を意識してやりました。
気になるポイント
- ”Refactors that Expected exchanges Result.” のコミットで修正したのですが、 QUnit では (期待値, 実測値) ではなく (実測値, 期待値) なんですね。
ちゃんと調べてやらないから（ry - そもそも大きくないコード量なのですが、”Refactors selecting colors.”のコミットは、if文がちょっと・・・でリファクタリングしたのですが、なんかもっといい方法がありそうな？
- HTMLからのイベント（onClick）、表示を扱うViewModel（fizzbuzz_vm.js）と、fizzbuzzのロジックを扱うModel（fizzbuzz.js）に分けて作りはじめました（最後までそうなのですが）。MVVMって言葉に憧れてwこういう名前にしただけですが、イメージ合ってるのかしら？
- モックを使う必要は今回なかったですが、ModelとVM分けたのでテストを書きやすくなった、というかテストすべき範囲がはっきりした感じはしました。
Modelの振る舞いという視点と、操作とそれをきっかけにした表示更新という視点で分けやすくなりました。 ＃当たり前？
残課題
- 折角の JavaScript なんで BitBucket 上で動かしてみれるようにしてみたい、、、、と index.html を入れてみたんだけども動かず。
- jsTestDriver がイマイチうまく動かず。Phantom.js での CI 以外にも各ブラウザでテスト実行できるのは良さそうなので、もうちょっと調べてみたいです。
