oblove 2009 summer LT

1. JSpec のご紹介
JavaScript Testing Framework
オブジェクト 楽部 ／(株)永和システムマネジメント
家永 英治

2. 自己紹介カット
さっそく本編

3. What: JSpec?
JSpec ってな∼に？

4. What: JSpec?
• JavaScript Testing Framework
• RSpec 風の記述
• describe, before_each, it, should ...
• 豊富な語彙の Matchers
• eql, include, be_true, hava_tag, throw_error ...

5. JSpecを使った Spec Code の記述例
http://visionmedia.github.com/jspec/
注) RSpecじゃないよ！

6. • JSpec(RSpec)の特徴
• Test as Specification！
• Test as Documentation！
読書会もやってるよ
おすすめ♪

7. 合わせて、読みたい良書
待望の邦訳！
近日発売！

8. Who: JSpec?
誰が、JSpecを使う？

9. Who: JSpec？
• JavaScript系の
Webアプリケーションエンジニア
• RSpec系が好きな人

10. Why: JSpec?
JSpecを使う 理由／動機 は？

11. Why: JSpec?
• 意図の明確な
Spec Code / Product Codeを
書きたい！
• 手動テストのみだと確認が手間！

12. Example: JSpec
OX ゲームを例に JSpec を素振りしてみたよ
OX
O
X
http://github.com/haru01/Learning-JSpec-JQuery/tree/master

13. OXゲームの仕様
• ３x３のOX盤
• もし O が３つ並べば 、O の勝ちであること
• もし X が３つ並べば 、X の勝ちであること
• もし最後まで並ばなければ 、引き分けであること
OX
O
X

24. ネーミングで
迷ったところ
judgeメソッドの実装

25. ネーミングで
迷ったところ

26. ネーミングで
迷ったところ

27. • 時間が余ったので
• 銅鑼が鳴るまで
• デモして
• 書いたコードを眺めるよ

28. See Also
• http://visionmedia.github.com/jspec/
• http://github.com/haru01/Learning-JSpec-JQuery/tree/master

29. 没スライド

30. OXゲームの仕様 １
• プレーヤ
• 奇数手は O であること
• 偶数手は X であること
OX
O
X

33. Product
Code
ブラウザ
Product
Code
Spec
Code
JSpecを使えばクリック数、目視の確認数が減少
Red, Green, Refactoringの黄金の回転率が上昇！
※）上図の下部は、極端にSpec Code のみでProduct Codeの動作確認をしているが、現実では自動と手動の併用になる
ブラウザ

34. 豊富なMatchers
-JSpecの特徴

35. 豊富なMathers (core)
• eql
• be_null
• be_empty
• be_true
• be_false
• be_greater_than
• be_less_than
• have
• have_length
• include
• match
• throw_error
• respond_to
.... etc

36. 豊富なMathers (jQuery)
• have_tag
• have_child
• have_many
• have_text
• have_attr
• have_class
• have_value
• be_visible
• be_hidden
• be_enabled
• be_disabled
• be_selected
• have_id
.... etc