【AngularJS, Jasmine】テストの書き方まとめ。

簡単なプロジェクトで練習してみたので自分用にまとめ直し。

  • まずはテスト用の簡単なプロジェクトを準備。ディレクトリ構成は下記の通り。

jasmineフォルダ以下はjasmine Standalone Distributionのファイル群。
testディレクトリ以下にテスト用のファイルを配置している。runner.htmlにアクセスすることでテストが実行される。
今回作成したAngularアプリケーションは、app.jsindex.htmlindexController.jsindexService.jsの4ファイルで構成。
それぞれのファイル内容は下記の通り。

app.js

index.html

indexController.js

indexService.js

index.htmlにアクセスすると画面にhello world.が表示される。見た目はそれでおしまいだが、テスト用に用意したサービスを実行しまくっているので、コンソールには色々と吐かれる。 これらをテストするためにトリガーファイルとなるrunner.htmlを用意する。

runner.html

index.htmlとの違いとして、angular.min.js本体を読み込んだ直後にangular-mocks.jsを読み込んでいる。8行目から14行目はjasmine本体のセットアップ処理なのでこれは必ず必要となる。

ここまでの設定が完了したら、実際にテストを記述していく。 今回はテスト本体をtest\controllers\indexControllerSpec.jsに配置した。

describe()メソッドでテストのセットを作成するようなイメージ。この中にある複数のit()メソッドがそれぞれのテスト内容となる。雰囲気はソースコード内のコメントアウトを参照。

indexControllerSpec.js

で実際runner.htmlにアクセスすると下記画像の通りテストが実行されて、結果を知らせてくれる。

意外と簡単にテストを作成することが出来た。リソースが絡んだテストなんかはまた次回。