2013年5月25日土曜日

JavaScript+QUnitでTDDしてみた。

TDD Boot Camp 行ったので復習を兼ねて JavaScript で TDD してみました
なんで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 以外にも各ブラウザでテスト実行できるのは良さそうなので、もうちょっと調べてみたいです。

最後に

やっぱ、TDDいいです。楽しい。TDD Boot Campバンザイw

2013年5月19日日曜日

TDD Boot Camp 長岡 1.0に参加してきました! #tddbc

TDD Boot Camp 長岡 1.0に参加してきました!
ずっと参加してみたかったTDDBCが長岡で!、ということで飛びつきました。
長岡での開催にアクションして頂いた @masaru_b_cl さん、講師の @t_wada、TAのみなさま、協賛のNDSのみなさま、本当にありがとうございました。

時系列で心に留まったところをメモをみながらピックアップします。

自己紹介

  • みなさんの自己紹介。県外から参加されている方もいました。
  • 学生さんから普段はPMをされている方まで、幅広い人が集まっている印象でした。

Keynote

  • @t_wada さんのキーノートからスタート。
  • 「現代ソフトウェア開発の三本柱」として、VCS、テスティング、自動化のお話。関連して頭に浮かんだのが、VCS、ITS、CIという三種の神器でした。ITSの位置づけも重要だけど、3脚椅子のメタファーを4脚椅子にすると足を一つ削っても結構安定するから駄目だな、って思いましたw
  • 「テスト」という言葉の捉え方について。Developer Testing, Customer Testing, QA Testingという分類で説明され、TDDの文脈ではDeveloper Testingが該当。テストに関する用語の標準化という意味ではISTQBの用語集もあります、ってツイートしました。
  • TDDのこころもち、というお話。なるほどなあ、という感じ。サイクルが1分 -> 1分 -> 2分というのは衝撃的でした。
  • TDDの真の目的は健康。健康なコードと健康なチーム。健康第一ですよね!

    ペアプログラミングによるTDDデモ&写経タイム

    • 写経タイムだ!と思ったのに、CppUTestでやろうと思ったらEclipseではまってついていけずorz
    • ペアとは終始話をしながらやっているなという印象。沈黙がない感じでした。
    • アサートファースト。テストケースの後ろから書いていくことで、テストも見やすくなるとのこと。
    • 仮実装、三角測量といった方法。なるほどなあ、という感じ。


    ペアプログラミングによるTDDハンズオン

    • @bei_kan さんとC言語+CppUTestでハンズオンしました。ありがとうございました!>べいかんさん
    • ペアプロではキー配列とかショートカットとかが普段と違うと大変だと痛感。私のPC(MBA)でやらせてもらったので、私はよかったですが、ペアのべいかんさんには不自由をおかけしちゃいました。
    • そして、久々すぎるC言語ですっかり忘れている・・・・からのでしたorz
    • 初のペアプロでしたが、いわゆるペアプロの効用といわれていることを実感できた感じがしました。そして、とても楽しいけど疲れる(^^;
    • リファクタリングするとコードが本当にきれいになっていくし、振る舞いがかわればきっちりRedになるし、もうなんていうか、楽しい! 大々的にリファクタリングする場面があったのですが、あのときテストが通ったのはキターーーー!でしたw
    • TODOリスト大切ですね。道しるべになって達成感が生まれました。

    レビュータイム

    • 各言語のペアからLT形式で感想とコードの発表。
    • テストケースの粒度がやはり言語、ペアによって差があるなと思いました。クロージングでもでたテスト技法のあたりだったり、テスト設計だったりをこころにとめておくと、変更に強いテストコードになるんじゃないかな、と思いました。

    クロージングセッション

    • 最後に @t_wada さんのクロージング
    • TDDの効果に関する数字的なところの紹介。
    • TDDによる欠陥密度の低下と実装時間の増加、開発時間が短くなっているというアンケート結果、デバッグの仮説検証プロセスを短くすることで工数が見込みにくい部分を少なくできる、などなど、なるほどなるほどでした。
    • 「こんなとき」の足がかりになる本の紹介。技法ドリルの本が出てきたときには、よし!と思いましたw
    • グリーンバンドの話。そう、プロフェッショナルですもん!


    その他

    • 懇親会には残念ながら参加できず。。。
    • グリーンバンドゲット!
    • やっぱり、コード書くって楽しい!

    という感じで、時間をみてお題をもう一度TDDで書いてみたいなあ・・・と思ってます。

    2013年5月18日土曜日

    Redmine XLS Export Plugin で Iconv::InvalidEncoding

    掲題のエラーになる、とのチケットが発行されました。
    BitNami Redmine Stack使われてますねえ。
    https://github.com/two-pack/redmine_xls_export/issues/23

    エクスポート時にspreadsheet内でIconvを呼び出しているところが該当箇所でした。
    UTF-8 から UTF-16LE の変換で失敗しています。
    Iconv::InvalidEncoding (invalid encoding ("UTF-16LE//TRANSLIT//IGNORE", "UTF-8")):
    spreadsheet (0.8.5) lib/spreadsheet/encodings.rb:38:in initialize'
    

    spreadsheetを調べてみるとruby 1.8と1.9で処理が分かれていました。
    1.9.x以上はString#encodeメソッドなどで変換してます。
    1.8.x以下は、Iconvを使って変換しています。
    今回問題が起きている環境はRuby 1.8.7でした。

    そもそもUTF-8でないデータが渡ってきてるのでは??と思いBitNami Redmineでの文字化け情報がないかなあ、、、と調べたら以下がありました。
    これによると、データベースはずいぶん前からUTF-8になっているようなので、大丈夫そうです。。。
    ■[redmine]bitnami::redmine で文字化けしなくなった!

    他を調べると以下のようなものもありました。環境問題っぽいのでそれで終わりにしました、、、なのか?w
    http://stackoverflow.com/questions/4965796/convert-utf-8-to-unicode-in-ruby