JSpec のご紹介JavaScript Testing Framework

オブジェクト俱楽部 ／(株)永和システムマネジメント家永 英治

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

What: JSpec?JSpec ってな～に？

What: JSpec?• JavaScript Testing Framework

• RSpec 風の記述

• describe, before_each, it, should ...

• 豊富な語彙の Matchers

• eql, include, be_true, hava_tag, throw_error ...

JSpecを使った Spec Code の記述例

http://visionmedia.github.com/jspec/注) RSpecじゃないよ！

• JSpec(RSpec)の特徴

• Test as Specification！

• Test as Documentation！

読書会もやってるよ

おすすめ♪

合わせて、読みたい良書

待望の邦訳！

近日発売！

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

Who: JSpec？

• JavaScript系のWebアプリケーションエンジニア

• RSpec系が好きな人

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

Why: JSpec?

• 意図の明確なSpec Code / Product Codeを書きたい！

• 手動テストのみだと確認が手間！

Example: JSpecOX ゲームを例に JSpec を素振りしてみたよ

OXO

X

http://github.com/haru01/Learning-JSpec-JQuery/tree/master

OXゲームの仕様

• ３x３のOX盤

• もし O が３つ並べば 、O の勝ちであること

• もし X が３つ並べば 、X の勝ちであること

• もし最後まで並ばなければ 、引き分けであること

OXO

X

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

judgeメソッドの実装

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

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

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

See Also

• http://visionmedia.github.com/jspec/

• http://github.com/haru01/Learning-JSpec-JQuery/tree/master

没スライド

OXゲームの仕様 １

• プレーヤ

• 奇数手は O であること

• 偶数手は X であること

OXO

X

ProductCode

ブラウザ

ProductCode

SpecCode

JSpecを使えばクリック数、目視の確認数が減少

Red, Green, Refactoringの黄金の回転率が上昇！

※）上図の下部は、極端にSpec Code のみでProduct Codeの動作確認をしているが、現実では自動と手動の併用になる

ブラウザ

豊富なMatchers-JSpecの特徴

豊富な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

豊富な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