夜のJSTDD boot camp

kyo_ago @kyo_ago

あんまり盛り上がらない。。。 #夜のJSTDD

kyo_ago @kyo_ago

htmlを使ったテストをしたい場合、AsyncTestCaseの第二引数のfunction内に/* :DOC += <div>hoge</div> */を書くとbody内に要素が追加された状態になります #夜のJSTDD

kyo_ago @kyo_ago

htmlを使ったテストは/* :DOC hoge = <div>hoge</div> */でthis.hogeに値をセットすることもできます。bodyに要素を追加するのは重いので、可能であればこっちを使いましょう #夜のJSTDD

kyo_ago @kyo_ago

JsTestDriverは非同期テストとhtmlを対象にしたテストはサポートするけど、mockとかstubとかはないのでそういうのが欲しい場合はsinon.jsを入れる #夜のJSTDD

kyo_ago @kyo_ago

ただ、非同期テストはテストの規模が大きくなった場合に時間を短縮できないのでできるだけ避けたほうがいい。テストも書きやすいし #夜のJSTDD

kyo_ago @kyo_ago

JsTestDriverの魅力はスケールすること。対象のテストコードは変更がない場合JsTestDriverServerがキャッシュして送信されないからテストファイル数とテスト時間は比例しないし、ブラウザの数が増えても並行でテストが走るからテスト時間は比例しない #夜のJSTDD

kyo_ago @kyo_ago

勢いでこんなハッシュタグつけたけど、明日続き書くときどうしよう。。。 #夜のJSTDD

kyo_ago @kyo_ago

特にAndroidの「機種によってリロードボタンの位置が違う問題」を回避できるのがでかい。PCならコンソールからテスト実行して結果を収集するのもそんなに難しくないけど、スマホ端末でここまで簡単にテストが実行できるのは非常にいい #夜のJSTDD

kyo_ago @kyo_ago

問題点としてはJavaのせいかエラーが非常にわかりにくい、オプションの解釈が微妙に融通効かない、ドキュメントがひどい、非同期テストの構文がひどいというのがあるけど、これもうJSTDDじゃなくてJsTestDriverの話だな #夜のJSTDD

kyo_ago @kyo_ago

複数クライアントから同時につなげてもサーバ側で制御してくれるので混線することはないので、会社とかで共有サーバ立ててそこにスマホとかのブラウザつなげてみんなで使いつつCIするような使い方もおすすめ #夜のJSTDD

kyo_ago @kyo_ago

ただ、テスト自体の問題かもしれないけど、たまにブラウザが不安定になるのでその場合リロードが必要。CIとか実行した最後にlocation.reload()を仕込んどくのがいいかも #夜のJSTDD

kyo_ago @kyo_ago

テスト全体はJsTestDriverで、stub、mock系はsinon.jsで、あとイベント関係でいいのがほしいな。Seleniumのイベント発火系持ってくるのがいいかな

kyo_ago @kyo_ago

今夜はここまでー

kyo_ago @kyo_ago

#jstdd 場所決定しましたー　それに合わせて、1時間時間が繰り上がって、参加費に関する内容がたされて、募集人数が増えてます // 横浜JSTDDハンズオン : ATND http://t.co/y3uYEoPW

kyo_ago @kyo_ago

JsTestDriverはAsyncTestCaseで非同期のテストを実行できますが、非同期のテストはテストの量が増えた時にテスト実行時間を短縮できないのでおすすめできません #夜のJSTDD

kyo_ago @kyo_ago

もし非同期テストがsetTimeoutしているだけならsinon.js等のsetTimeoutを上書きして同期実行できるようになる方法でテストできないか検討しましょう #夜のJSTDD

kyo_ago @kyo_ago

sinon.jsを使う場合、setUpでthis.clock = sinon.useFakeTimers();してtearDownでthis.clock.restore();すると他の部分に影響なくsetTimeout, setIntervalを乗っ取れます #夜のJSTDD

kyo_ago @kyo_ago

テストコード内ではthis.clock.tick(10);で時間を進めることができます。時間を進めるとsetTimeout内のfunctionは同期実行されるので、次の行では時間が進んだものとしてテストが実行できます #夜のJSTDD

kyo_ago @kyo_ago

sinon.jsのuseFakeTimersはjsunitのjsUnitMockTimeout.jsを元にしてるらしいので、なにしてるか興味ある方は読んでみてください。コメント込みで150行なので超短いです http://t.co/9sdj3kSw #夜のJSTDD

kyo_ago @kyo_ago

JSUnitのサイト見たら「うちはもうJasmine使ってるからこれはもうメンテしてないよ！」って書かれてた。。。

kyo_ago @kyo_ago

sinon.jsには他にFake XHR、Fake serverがありますが、使った事無いので本家のサンプル見てください。（jQuery.mockjaxは使ってた） #夜のJSTDD

kyo_ago @kyo_ago

sinon.jsには他にspy,stub,mockがあります。spyは「元のfunctionを呼び出しつつ監視」、stubは「元のfunctionを空に差し替えて監視」、mockは「元のfunctionをテストfunctionに差し替えて監視」します #夜のJSTDD

kyo_ago @kyo_ago

「監視」とは対象のfunctionが「呼び出されたか否か」、「呼び出されたのであれば、何回、どういう引数で呼び出されたのか」をfunctionプロパティに保存します #夜のJSTDD

kyo_ago @kyo_ago

例えば、var spy = sinon.spy(); spy(1,2);した場合、spy.calledにtrueがセットされ、spy.args[0][0]に1、spy.args[0][1]に2がセットされます #夜のJSTDD

kyo_ago @kyo_ago

spyには他にもいくつかmethodがありますが、単純に「どう呼び出されたか」だけではなく、「すべてこの方法で呼び出されているか」等の「複数回呼び出し」も考慮されているのでそれを踏まえてドキュメントを読むと理解しやすいと思います #夜のJSTDD