TDD & CI for JavaScript [Karma][Mocha][Travis CI]TDD & CI for JavaScript [Karma][Mocha][Travis CI]

諸事情により研究で使うシミュレータを変更せざるを得なくなってしまった森です.心が折れたので,気分転換に昨夏某所で少しだけ弄ったNode.jsを勉強がてら一年ぶりに触っています.一年も経つと様々な新しいモジュールも公開されており,やはりこの界隈は発展が目覚ましいなと感じています.なかでもテスト環境はかなり整えやすくなっているのではと個人的に思いました.そこで今回はJavaScriptでの簡単なテストやその自動化の方法について紹介したいと思います.

test-tools

テストツールの紹介

test-tools

見て分かるように,主要なものだけでも色々な選択肢があります.ここで挙げられているJasmineやMocha, BusterJSなどがいわゆるxUnitとよばれるようなテスティングフレームワークになります.もちろん全て紹介するわけにはいかないので,今回は MochaやChaiなどを使ってテストを行いたいと思います.

Mocha

  • node.js, ブラウザ用のテストフレームワーク
  • BDD / TDD / QUnitなどスタイルを選べる
  • Mocha自体はアサーション機能をもっていないので,expect.js, chai.js等のアサーションライブラリを併用する

Chai

  • Mochaで使えるアサーションライブラリ
  • expect / assert / should形式が選べる

テスティングランナーはKarmaを使います.Karmaを用いることで,テストを行うための環境構築などを自動で行い簡単にテストを行えます.

Karma

  • Google製の比較的新しいテストランナー (元Testacular)
  • ファイルの更新を検知して,自動でテストを走らせる
  • 事前処理,事後処理を記述できる
  • Require.jsを用いたテストに対応

またテスト環境として,実ブラウザに加えてヘッドレスブラウザであるPhantomJSを利用します.

PhantomJS

  • ヘッドレスなWebkitをJavaScriptAPIで操作できる
  • CUIオンリーな環境でもGUIテストが可能

テストしてみる

それでは実際にJavaScriptのテストをしてみましょう.ソースはGithubのレポジトリにあげてあります.

今回のディレクトリ構成は以下のようになります

今回はアサーションにChaiを使いたいのでとってきます.

またkarmaコマンドを使えるようにします.Karmaはnpmコマンドで簡単に導入することができます.npmはNode Package Managerの略で,Nodeで作られたパッケージモジュールを管理するためのツールです.Node.jsに付属しているので,Homebrewや apt-getでNode.jsをインストールすれば使えます.

テスト用に適当なJavaScriptのコードを書きます.

テスト用のコードは以下のようにします.ここではわざと引数なしでの呼び出しは通らない用にしてあります.

次にテストランナーであるKarmaの設定ファイルを書きます.Karmaには設定ファイル作成用のコマンドがあるので簡単に作成することができます.

それでは実際にテストを走らせてみましょう.

以上のように簡単にテストを行うことができました.またautowatchをtrueにしてKarmaを実行したままにしておけば,srcファイルなどを変更すると自動的にテストを再実行してくれるので大変便利です.

Coverageの測定

それでは次にCoverageの測定を行えるようにしてみます.ここではcoverageディレクトリに結果を吐くようにしています.karma.conf.jsに以下のような設定を加えます.

テストを実行するとcoverageディレクトリ下に以下の様なファイルが吐き出されます.

index.htmlをブラウザで開くとcoverageが確認できます.

703cd43fa85a4ad1211f2945c67fefac