yeoman+AngularJS+testacularでEnd to endテストする

javascript, angularjs, yeoman
テスト実行の組み合わせ

AngularJSを利用してます。
ドキュメントが豊富で覚えやすく、テストシナリオも実行できるというのがとても気に入っています。
また、開発ツールyeomanというツールも気にいっていて、便利に使っています。
今日はyeomanを利用してテストをしてみるとこまでのログを残しておこうと思います。

yeomanのインストール

以下のコマンドでインストールできます。
がいろいろ足りないといわれるのでがんばります。
主にbrew使えば入ります。
またNodeJSが0.6とかだと動かないので注意が必要です。
（0.8とかあれば大丈夫です）

$ curl -L get.yeoman.io | bash
ひな形作成

yeomanでAngularJSのひな形を作ってみます。

$ mkdir angulartest
$ cd angulartest
$ yeoman init angular

これでずらずらっと中身ができたらオッケーです。

Angular JSシナリオテストの用意

testacularでは単体テストEnd to endテストは分けないと実行できないようです。
今回はtest/e2eディレクトリを作成してその中でEnd to endテストを実行するようにします。

testacular.conf.jsの設定ファイルをコピーしてtestacular-e2e.conf.jsのようなファイルを作ります。
そしてfilesを以下のようにします。

files = [
  ANGULAR_SCENARIO,
  ANGULAR_SCENARIO_ADAPTER,
  'app/scripts/vendor/angular.js',
  'test/lib/angular-mocks.js',
  'app/scripts/*.js',
  'app/scripts/**/*.js',
  'test/e2e/*.js'
];

こうすることでtestacularはプラグインであるAngularJSのテストファイルを読み込み、DSLが利用できるようになります。AngularJSのテストランナーAPIは"こちら"にあります。

実際のViewを検証するWebServerの設定

正しいかはわかりませんEnd to endのテストを行う場合、クライアントに表示するViewを返却するサーバを起動する必要があるようです。
yeomanで作ったひな形にはそのWebサーバがないため、それ用のスクリプトを用意する必要があります。
angular-phonecatのもの(scripts/web-server.js)をそっくりそのままもってくると利用できるのでそれをangulartestにも持ってきます。

以下のコマンドで起動して http://localhost:8080/ にファイル一覧画面のようなものが開くか確認します。

$ node scripts/web-server.js
End to endの設定ファイルに立ち上げたWebServerの設定をする

End to endのテストは自分でサーバを立ち上げてテストを行いますがアプリケーションを立ち上げるという感覚ではなくテスト用サーバをたてるイメージだと認識してます。
ここでテスト用サーバが実際のアプリケーションを呼び出せるように、先ほどの立ち上げたWebServerを見に行くような設定を行います。
testacular-e2e.conf.jsに以下のような設定を加えます。

proxies = {
	'/': 'http://localhost:8000'
};

これでAngularのシナリオAPIで利用するbrowser().navigateTo()などは与えられたURLを参照する際にこのプロキシを参照します。
ここで初めてテストしたいアプリケーションが見れます。（はずです）

テストを書く

ここまできてやっとテストがかけます。
yeomanのデフォルトはPhontomJSでテストするようになっていますがChromeに変更しておこうと思います。

testacular-e2e.conf.jsのbrowsersを以下のように変更します。

browsers = ['Chrome'];

テストの内容ですがyeomanをinitで生成した際のhtmlのh1タグに'Cheerio!'という文字が表示されるのでそれが正常に表示されることを確認してみます。
test/e2e/scenarios.js に以下のような内容を書いてみます。

'use strict';

describe('Initial Url', function() {

	it('should contain "Cherrio"', function(){
                // 相対パスでプロキシめがけて表示したいhtmlを指定
		browser().navigateTo('../../app/index.html');
		expect(element('').text()).toContain('Cheerio!');
	});

});

これを以下の手順で起動して、テストします。

//先ほどもらってきたプロキシサーバを起動
$ node scripts/web-server.js
// テストサーバを起動
$ testacular start testacular-e2e.conf.js
// テスト実行
$ testacular run testacular-e2e.conf.js 
Chrome 23.0: Executed 1 of 1 SUCCESS (0.335 secs / 0.21 secs)

これでテストが通りました。
まだまだJSおよびNodeに関する能力が低くて困りますががんばって勉強します。
今回作ったアプリはここにあります。