主に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 らしいです

この辺りも参考になります

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を修正する

差分

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 がそこを見るようになっていない

なので修正

差分

2013/05/04 19:11追加

coffeeもkarmaは読めるようなので、現在はこういう形にした

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

angularjsのチュートリアルをやっているとstep3でend-to-end test が出てくる
出てくるんだけど最初に作成されているGruntのタスクではe2eテストは動かせない

e2e用にGruntfile.jsを修正する

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

差分

e2eテストを行う際には実際にViewが動いてないとダメなので、connect:livereload を入れてます

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

browser().navigateTo(...)

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

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

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

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

差分

先ほどのconnect:livereloadを利用したくないとか、distした結果に対して実行したいときは
tutorialにあるweb-server.jsを使うかと思いますが、そのときはproxiesを書き換えると楽だと思います

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

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

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

とか

問題点

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

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

~~結果、実行終了が手動という悲しい事態に…~~

→ singleRun=true で終了した…

// Continuous Integration mode
// if true, it capture browsers, run tests and exit

って書いてあったし…

2013/05/04 17:03 追記

autoWatch = true を活かすような形に設定ファイルを修正した

これで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 に関してはこちら

色々と触った感想

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

結局こうなった

grunt server --force 実行で大体自分が望むような形にした
具体的には
* 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保有し続けるんすか…

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