「フロントエンドJavaScript開発におけるテスト駆動開発のススメと自動テストフレームワーク利用の勘所」という勉強会に行ってきた。

フロントエンドJavaScript開発におけるテスト駆動開発のススメと自動テストフレームワーク利用の勘所 on Zusaarという勉強会に行ってきたので、メモ。

※スライドが公開されているので、内容全体に関してはこちらをご覧ください。
JS開発におけるTDDと自動テストツール利用の勘所

QUnit vs Jasmine

QUnitはボキャブラリーが絞られるのでシンプル。表現力が劣る
Jasmineは構造化しやすいのでネストが深くなりがち。記述量多め

TDDやりづらい

host object（ブラウザだとwindow, locationなど）に強依存

解決策

DOMに強依存

  • DOM要素が存在しないと実行できない
  • DOM操作に対する副作用の検証が難しい
  • 変更されやすいHTML構造に依存
解決策
  • DOMに依存しない部分を分離
  • DOM操作の振る舞いのみをテスト
  • idセレクタだけにしてHTML構造には依存しないようにする

TAP形式

  • Test Anything Protocol
  • メリット：既存の対応しているツールが多い

jsdom

  • W3CのDOMをjavascriptで実装したライブラリ（npmモジュール）
  • HTMLの文字列をパースしてDOMオブジェクトを生成
  • webスクレイピングが簡単にできる
  • PhantomJSの方がおすすめ

jasmine-gem

  • ブラウザ実行を楽にするヘルパースクリプト
  • 仕組みはweb-driver
  • rake jasmineでブラウザ立ち上がる
  • rake jasmine:ci もある。環境変数でブラウザを指定する

ブラウザキャプチャ

  • テスト実行と結果サマリーを複数ブラウザで一気に行う
  • 正式名称は不明

Testacular

  • ブラウザキャプチャのツール
  • まだ粗いけどかなり使えるらしい
  • サーバたちあげてスマホのブラウザからアクセスしてテストを自動実行とか

BusterJS

  • 今日紹介したことなんでもできる

今後特にウォッチしたい

  • BusterJS
  • Testacular

感想

  • やっぱり設計が肝ですね。
  • 会場がやたらきれいでしゃれおつで、室内で野菜が栽培されたりしててすごかった。