第38回HTML5とか勉強会「Webアプリ×テスト最新事情」

HTML5 JavaScript

2012/4/26に行われた第38回HTML5とか勉強会「Webアプリ×テスト最新事情」に参加してきました。
JavaScriptのテストフレームワークについていろいろな話を聞くことができました。

遅れて参加したうえに、ノートパソコンの電源入れたとたんに電池切れ orz
途中の休憩時間にコンセントのある席へ移動したのですが、前半はメモれてないですｗ

メモとるのが全然追いつけなかったので、コードとか省略してたり間違ってたりすると思いますが、雰囲気だけでも感じて頂ければと。

Sinon.jS

外村和仁さん

テストしにくいもののダミーを作成する。

spy

メソッドの代わりにダミーを作成できる。

// オブジェクト作成。spyはメソッドオブジェクト
// これをテストしたいメソッドを上書きする感じで。
var spy = sinon.spy();

// 試しにメソッド読んでみる
spy('foo', 'bar');
spy('foo');

// 結果をチェック
spy.callCount;   // メソッドが何回呼ばれたか(この場合2)
spy.args[0][1];  // 引数に指定された値を取得(この場合'bar')

stub

spyができることは全部できる。
window.confirmとかを上書きできる。

途中で確認ダイアログがあるような処理だと自動テストできないので、

// 確認ダイアログを上書き
sinon.stub(window, 'confirm');

// ダイアログで"いいえ"が押されたことにする
stub.returns(true);

// 最後に開放しないと上書きされっぱなしに
stub.restore();

mock

spy,stubの機能をすべて持っている
あらかじめメソッドがどう振る舞う決めて実行する

mock.expects('validate')
  .once()
  .withArgs('')
  .returns('hogehoge');

mockで出来ることはstubでもできるので、どちらを使うかは好みの問題。

Fake Timer

曜日チェック処理で

// 日曜日だったらtrue
if (new Date().getDay() === 0) { return true; }

みたいな処理があると、日曜しかテスト成功しないｗ
そこで、JavaScriptで取得する当日日付を変更できる。
(コードはメモれませんでした orz)

他にもsetTimeoutで10分待つような処理がある場合、テストも10分かかってしまうｗ
でもこれをつかうと指定した分だけ時間を進められる。
⇒setTimeout や setInterval で使われる時間にだけ有効

Fake XHR

ajax のテストとか。
stubでもがんばればできるかもしれないけと、もっと低レベルのところをダミー化する

var xhr = sinon.useFakeXMLHttpRequest();

リクエストのオブジェクトをチェック
任意のレスポンスやHTTPコードを返す

JSテストフレームワークの比較

佐伯さん(TIS)
@ITでJavaScript入門記事や他にもいくつか連載

QUnit

  • もとはjQuery用のテストフレームワークだったが、今は汎用的になっている。
  • 同期/非同期サポート
  • APIで外部ツールと連携可能
  • Pluginいっぱいある

Mocha

  • Expressの作者が作成
  • 非同期サポート
  • assertion libraryを選択して利用
  • TDD、BDD、Qunit等のスタイルが選択可能
  • レポートの形式が豊富
    • Dot Matrix
    • Spec
    • TAP
    • Landing Strip
    • List
    • Progress
    • nyan(猫が出てくる？)

JsTestDriver

  • Googleが作成
  • Javaが必要

Karma

  • Angular.jsチームが作成
  • TestRunnerなのでJasmine等のフレームワークは選択できる
  • 主要なCIツールとの統合が容易

Capybara-webkit + Cucumber

  • Cucumber
    • ユーザ受け入れテスト向けに作られたツール
    • ユーザ操作をfeatureとして日本語で書ける

どうやってえらぶか

以下を考慮して選択する。

  • 何を作るか
  • 何を使ってつくるか
  • どうやって作るか
    • TDD？BDD？
    • メンバーは？
    • 自動化は？
  • プロダクト事態や開発の持続性・継続性を支える物のいう意識を持つ

でも結局は、書いていて楽しいのでｗ

講演者による座談会

テスト未経験者に取り入れてもらうには

  • トップダウンで強制
  • ゲーム感覚で、レッド→グリーンになるのが楽しくなってきた。
  • 経験者がテストのスケルトンを生成するスクリプトを作って少しでも簡単に作れるように。
  • いきなり全部じゃなくて、ライブラリとかにだけ作ってみるとか。

テスト書いてよかったエピソード

  • テストがあるとリファクタリングが安心してできる。
  • コードを書くとき、最初の滑り出しがよくなる。
  • 1年前の自分のコードをメンテナンスしたときに俺ナイス的なｗ

システムの規模は？

  • 今のプロジェクトがJSで17万行で、テストコードが2万行くらいあった。
    去年はもっと少なかった。結合テストもやっている。

カバレッジは？

  • 3割くらいを目指してる

UIのテストどこまでやってるか

  • Seleniumは膨大な量になるので、受け入れ条件を満たすためのものだけ。
    内部の細かいのはUTでカバー
  • Modelのみのテストしか出来ていない

TDD vs BDD

  • 正直あまり変わらないんじゃないか
  • 書き方はBDDの方が好き