Rails4系に組み込む形でBackbone.jsのテストを自動化してみたい(SinonJS+Chai+Mocha+Karma)
javascriptのテストを一度きちんと自動化してみたいなと思っていたのですが、
Railsを組み合わせる場合はjavascript単体でテストしてます。というものがなくて、
サーバサイドからテストを書いてある場合が多いです。
結局は統合テストも書いた方がいいんですが、それが少し面倒くさい気がしたので、Railsの邪魔にならないようにJavaScript(Backbone.js)単体のテストが行えないか、いじってみました。
参考にしたのは、
http://backbonetutorials.com/organizing-backbone-using-modules/
http://inet-lab.naist.jp/tdd-ci-for-javascript/
http://www.sitepoint.com/unit-testing-backbone-js-applications/
内容
テストツールについて
http://inet-lab.naist.jp/tdd-ci-for-javascript/に載っていた
http://inet-lab.naist.jp/wp-content/uploads/2013/06/test-tools.png
の図にしたがってわけてメモ。
モックライブラリ：SinonJS
http://www.htmlhifive.com/conts/web/view/library/sinonjs#HSinon.JS3068306F
今回入れているのは、sinon.stub(サーバ側の応答のstub用)を使いたかったからでモックはまだ使い方がよく分かってないです。
バージョンは、1.12.2です。
(実は、あとで使おうと思っているだけで今回の記事の範囲では使ってないです。すみません)
アサーションライブラリ：Chai
http://chaijs.com/
Chaiにはアサーションのスタイルがいくつかあって、その中で、assertの書き方が分かりやすかったのと、Mochaと合わせて使っている記事が多かったから選びました。楽をしたかったのです。
バージョンは、1.10.0です。
テスティングフレームワーク：Mocha
https://github.com/mochajs/mocha
Jasmine, Chai, Mochaと聞いて、お茶会でも開けばいいんじゃないかな、と思いました。
アサーションの無いテスト用フレームワークと聞いて何をやっているのかよくわからなかったのですが、ファイルを探したり、テスト環境下でjavascriptを動かしたりしているみたいです。
利用するためには、node.jsとブラウザが必要。
MochaはKarmaのついでに入れてます。たぶん。
テスティングランナー：Karma
Karma - Spectacular Test Runner for Javascript
で、テストを自動で走らせるありがたい存在。
バージョンは0.12.31です。
実行環境：PhantomJS
http://phantomjs.org/
Rails界隈の統合テストでしばしば見かけるので一度は使ってみたかったです。
はじめはサーバ側のテスティングフレームワークと連携させて統合テストでjsを……みたいなことを考えていたのですが、
Backboneの勉強もかねてぐりぐり単体テストを書きたくなったので、結局連携させずjs側だけで自動化しています。
ヘッドレスでない=面倒くさい気配がしていましたが、karmaが動いていれば、動作自体は自動なので別にChromeやFirefoxで指定していても面倒くさくないと思います。
Chaiのプラグインによってはブラウザしか対応していなかったりするので注意してください。
バージョンは1.9.8です。
追記：
処理速度はヘッドレスの方がやっぱり全然速いです。
アプリケーション側のJSのフレームワークについて
アプリケーション側は生身のBackbone(バージョンは1.1.2)です。
理由は触ってみたかったからです。この記事書いた後が本番です。
とにかくコードが少なくやらなくちゃいけない処理が隠蔽されているような印象があるAngularJSと比較して、ごつごつしたフレームワークだとどうなのかな、と思って選んだので、
あえて、Malionetteも使いません()。
基本的にコーディングのときにModel => Collection => Viewの順に読み込んでおけばいいように気をつけておいて、
テスト環境ではkarmaの起動時の読みこみ、本番環境ではRailsのアセットパイプラインの機能を利用すれば、
まあ、なんとかなるかな、という感じだったのでrequireJSも使ってないです。
というより、一応
http://yutapon.hatenablog.com/entry/2014/02/16/003052
http://qiita.com/setzz/items/5420d589e3977bdf13e5
他を見ながらやってはみたのですが、
ファイルの読み込みに付いて、Railsのアセットパイプラインの相対パス指定、requireJSの相対パス指定、karmaの相対パス指定が喧嘩している感じが解決できなかったため、
AngularJSのDI注入と書き方が似ていて、
たぶんやっていることも似ているのかな、程度で今回はいいかなと切り上げました。
ディレクトリ構成
手順と書いたコード
まずはじめにPhantomJSとkarma(とMocha。Mochaはkarmaに含まれる)以外の使用するツール・ライブラリを各公式ページからダウンロードして、
/vendor/assets/javascripts以下におきます。
PhantomJSをインストールします。
karmaをインストールします。
参考は、http://inet-lab.naist.jp/tdd-ci-for-javascript/
karma.conf.jsを使いたいディレクトリに移動して、設定ファイル作成用のコマンド
を走らせます。すると、簡単にkarma.conf.jsを作成することが出来ます。
作成してからディレクトリをがちゃがちゃいじってしまったので、最終的に出来上がったものをさらします。
テストを走らせるための試しにBackbone.jsのコードをテストのコードを少し書きます。
ここまで出来たら、
を打ち込んでテストを走らせると、
とエラーが出ます。
'テストです'の部分を'テスト'に直して変更を保存すると自動的に再びテストが走り、
に表記が変わったらOKです。
