yeoman + angular + coffee で end-to-end なテストをやる的なメモ

主にend-to-end testを動かす所でハマったので、とりあえず動かすまでのメモ

## 動作確認環境

mac osx 10.7
homebrewでnode入れている(node v0.10.5)

ruby 周りがこんなの(rbenvでテキトーに管理してる)

```
ruby -v
ruby 1.9.3p392 (2013-02-22 revision 39386) [x86_64-darwin11.4.2]

gem list

*** LOCAL GEMS ***

chunky_png (1.2.7)
compass (0.12.2)
fssm (0.2.10)
sass (3.2.6)
```

## このメモ書いている人のスペック

grunt? bower? node? ジャヴァスクリプト?
みたいな人なので、間違っている部分は指摘ください

## yeomanって何？

[MODERN WORKFLOWS FOR MODERN WEBAPPS らしいです](http://yeoman.io/)

[この辺りも参考になります](http://qiita.com/items/4d8c2994580c274fd3fa)

## install

```
cd /path/to/work
# -g で入れろとか言われるけど気にしない
npm install yo grunt-cli bower generator-angular generator-karma
```

## アプリの作成

`yo angular appname (--coffee)` でひな形を作ってくれます

```
cd /path/to/work
./node_modules/.bin/yo angular appname --coffee
# なんか色々と聞かれるから適当に答えるとか

# bowerも-gで入れていないので、自分で実行する必要あり
./node_modules/.bin/bower install

# その他の人との共有とかするのならこのへんで npm init とか叩いておくと良いのかな？
```

## ちゃんとBuild(dist)出来るようにする

何を言っているのかわからないと思うが、まず動かない。
修正投げたいんだけど、俺が低スペック過ぎてどこにpullreq投げればいいのかわかんないｗ

```
cd /path/to/work
./node_modules/.bin/grunt
```

で本来はdistというディレクトリ内にファイルが出来るはずだが、
dist/scripts とか dist/styles 以下のファイルの中身が空ｗ

### 原因

実行されるタスクの順序が不味そうなのでGruntfile.jsを修正する

[差分](https://github.com/daneko/helloyeoman/commit/172594aa63972ac4d5f6a54062f6f9ca0593432a)

## Unitテストをちゃんと動かす

何を言って（ｒｙ

`./node_modules/.bin/grunt test` で Unitテストが実行されるはずだけどされない

こんなかんじで出力されます

```
Running "karma:unit" (karma) task
INFO [karma]: Karma server started at http://localhost:8080/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/daneko/project/yo/app/scripts/*.js" does not match any file.
WARN [watcher]: Pattern "/Users/daneko/project/yo/test/mock/**/*.js" does not match any file.
WARN [watcher]: Pattern "/Users/daneko/project/yo/app/scripts/**/*.js" does not match any file.
WARN [watcher]: Pattern "/Users/daneko/project/yo/test/spec/**/*.js" does not match any file.
INFO [Chrome 26.0 (Mac)]: Connected on socket id adU-SAEY68z-rCL-ZFPY
Chrome 26.0 (Mac): Executed 0 of 0 SUCCESS (0.094 secs / 0 secs)
```

### 原因

coffee→jsビルド時の出力先が 「.tmp」ディレクトリになっていること
それ自体は別にいいんだけど、unitテストを行なう際に参照するkarma.conf.js がそこを見るようになっていない

なので修正

[差分](https://github.com/daneko/helloyeoman/commit/ca60dcda7558d2c84ca303865fa0c3b0b06679fe)

---
2013/05/04 19:11追加

[coffeeもkarmaは読めるようなので、現在はこういう形にした](https://github.com/daneko/helloyeoman/commit/1663bf611370a0c332badd3482ca5b870b0202d2#diff-1)

---


## end-to-end test を動かすように色々修正する

angularjsのチュートリアルをやっていると[step3でend-to-end test](http://docs.angularjs.org/tutorial/step_03) が出てくる
出てくるんだけど最初に作成されているGruntのタスクではe2eテストは動かせない

### e2e用にGruntfile.jsを修正する

e2e用にとりあえずタスクを足してみる

[差分](https://github.com/daneko/helloyeoman/commit/52aff2f2349eb30026217a84a4547fe569c7843e#L0R26)

e2eテストを行う際には実際にViewが動いてないとダメなので、[connect:livereload を入れてます](https://github.com/daneko/helloyeoman/commit/52aff2f2349eb30026217a84a4547fe569c7843e#L0R300)

これを使うことの(個人的な)メリットはe2eテストを書く際の

```
browser().navigateTo(...)
```

で開くパスがtutorialみたいにファイル位置での相対パスでなく、普通に書けることかな
次項でいじるconfファイルのproxiesにもよるんですけどね…

あとweb-server.jsとか用意しなくていいとかそんなの

### e2e用のconfigファイルを修正する

karma-e2e.conf.jsを修正します

[差分](https://github.com/daneko/helloyeoman/commit/52aff2f2349eb30026217a84a4547fe569c7843e#L1R7)

先ほどのconnect:livereloadを利用したくないとか、distした結果に対して実行したいときは
[tutorialにあるweb-server.js](https://github.com/angular/angular-phonecat/tree/master/scripts)を使うかと思いますが、そのときはproxiesを書き換えると楽だと思います

```
cd /path/to/work
./node_modules/.bin/grunt
node scripts/web-server.js
```

でdistした結果を使って動作させるのなら

```js
proxies = {
  '/': 'http://localhost:8000/dist/'
};

```

とか

### 問題点

karmaの設定で autoWatch = true でないとe2eテストは動作しないっぽい
(これがずっとfalseになっててはまってた…)

* はずなのにfalseにしても動いた… え、俺は一体何にはまってたの… *

<del datetime="2013-05-04T18:30:00+09:00">結果、実行終了が手動という悲しい事態に…</del>
→ singleRun=true で終了した…

```
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
```
って書いてあったし…

---
2013/05/04 17:03 追記

[autoWatch = true を活かすような形に設定ファイルを修正した](https://github.com/daneko/helloyeoman/commit/1a74eb651ca1158b3da40fdfac5c430d2ae6a007)

これでe2e動作中にtest修正すると即時反映する

ただし、本体側の修正は追従できない…

となると、server動作させてからe2e単体で動作させるほうがいいのかなぁ…

---

connect:livereload のタスクみたいに、karma start ... も実行してくれればいいのだけど、
そもそも現状で
* karma start
* karma run
の分離とかバックグラウンド実行的なやつをGruntのタスクでどうやればいいのかわかんない

それが出来れば、testタスクに混ぜ込めるんだけどなぁ…

この辺りこうやれば出来るよ！みたいなのを誰か教えてください

## angularjs tutorial step_03 を実際に動かしてみる

```
git clone git://github.com/daneko/helloyeoman.git
cd helloyeoman
npm install
./node_modules/.bin/bower install
./node_modules/.bin/grunt e2e
```

で動くはず

結果

```
Running "karma:e2e" (karma) task
INFO [karma]: Karma server started at http://localhost:8080/__karma/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 26.0 (Mac)]: Connected on socket id 09PWfFEp77nvG_76rCVz
Chrome 26.0 (Mac): Executed 1 of 1 SUCCESS (0.601 secs / 0.355 secs)
```

ちなみにcontrollerのPhoneListCtrlは

```
./node_modules/.bin/yo angular:controller PhoneListCtrl --coffee
```

で追加してから修正した
(ただし生成されたファイル名は「Ctrl」って部分は消えていたけど…)

[yo angular:hoge に関してはこちら](https://github.com/yeoman/generator-angular)


## 色々と触った感想

* 世の中便利になったなぁ…

# 結局こうなった

`grunt server --force` 実行で[大体自分が望むような形](https://github.com/daneko/helloyeoman/tree/1663bf611370a0c332badd3482ca5b870b0202d2)にした
具体的には
* Scriptを修正するとテストが毎回実行される
みたいな。
--forceをつけておかないとテストが落ちた時に終了します

ちょっとウザったい状況な気もするけど個人的にはこれくらいのほうが色々とありがたい
アプリが大きくなって毎回全実行は重いわ…
みたいな状況になってからtaskの割り振りを考えればいいしね

が、別の問題が

testが実行されるとこういう表示が…

```
Running "karma:e2e" (karma) task
WARN [karma]: Port 8080 in use
WARN [karma]: Port 9100 in use
WARN [karma]: Port 8081 in use
WARN [karma]: Port 9101 in use
WARN [karma]: Port 8082 in use
WARN [karma]: Port 9102 in use
WARN [karma]: Port 8083 in use
WARN [karma]: Port 9103 in use
INFO [karma]: Karma server started at http://localhost:8084/__karma/
INFO [launcher]: Starting browser Chrome
INFO [karma]: To run via this server, use "karma run --runner-port 9104"
INFO [Chrome 26.0 (Mac)]: Connected on socket id ZJRbNuQ43vcEFKvUDhR2
Chrome 26.0 (Mac) PhoneCat App Phone list view should filter the phone list as user types into the search box FAILED
        expect repeater '.phones li' count toBe 10
        http://localhost:8084/base/test/e2e/PhoneListScenario.coffee-compiled.js?1367662793000:9:7: expected 10 but was 1
Chrome 26.0 (Mac): Executed 1 of 1 (1 FAILED) (0.506 secs / 0.288 secs)
Warning: Task "karma:e2e" failed. Used --force, continuing.
```

えーっと、Port保有し続けるんすか…