Cucumber で美味しい開発(入門編)

第○×回 sonic 勉強会sonicチーム id:nsgc

http://cukes.info/

Behaviour Driven

Development with elegance and joy

簡潔に楽しくBDD(ビヘイビア駆動開発)しよう

1. プレーンテキストに振舞いを記述する

2. Ruby で step の定義を書く

3. 実行して失敗に着目する

4. step をパスするコードを作る

5. 再度実行して step がパスするのを確認する

6. キュウリのように緑色になるまで、2-5 を繰り返す

7. お金が無くなるまで、1-6を繰り返す

1. プレーンテキストに振舞いを記述する

2. Ruby で step の定義を書く

3. 実行して失敗に着目する

4. step をパスするコードを作る

5. 再度実行して step がパスするのを確認する

6. キュウリのように緑色になるまで、2-5 を繰り返す

7. お金が無くなるまで、1-6を繰り返す

ご清聴ありがとうございました!

お品書き

• Cucumber って食べれるの?

• Cucumber の下ごしらえ

• Cucumber で料理してみよう

お品書き

• Cucumber って何?

• Cucumber の動かし方

• Cucumber で開発してみよう

お品書き

• Cucumber って何?

• Cucumber の動かし方

• Cucumber で開発してみよう

Cucumber って何?(第35回Rails勉強会 id:moro さんの資料より)

http://www.slideshare.net/moro/rails-tokyo-035-cucumber-presentation

Cucumber lets software development teams describe how software should behave in plain text. The text is written in a business-readable domain-specific language and serves as documentation, automated tests and development-aid - all rolled into one format.

Cucumber って何?(http://cukes.info/ 公式サイト)

• プレーンテキストで振る舞いを書ける

• 仕事上でも読めるDSL言語で書ける

• ドキュメントとしての機能も持つ

• 自動でテストを実行する

• 開発の手助けをする

Cucumber って何?(http://cukes.info/ 公式サイト)

って多分書いてる

all rolled into one format

(おさらい)BDD って何?(クは駆動のク”D is for Driven” 角谷 さんの発表資料より)

http://www.slideshare.net/kakutani/d-is-for-driven

(おさらい)BDD って何?(クは駆動のク”D is for Driven” 角谷 さんの発表資料より)

http://www.slideshare.net/kakutani/d-is-for-driven

この章のまとめ✓ Cucumber とは プレーンテキストにシステムの振る舞いを書いて、それを実行するアプリケーション

✓ BDD のためのツール

✓ BDD のゴールと同じく、「顧客と同じ語彙で設計する」

✓ 受け入れテスト = システムの振る舞い

お品書き

• Cucumber って何?

• Cucumber の動かし方

• Cucumber で開発してみよう

Cucumber の動かし方

A.まずは、インストールしよう

B.Cucumber の雛形を作ろう

C.振る舞い の雛形を作ろう

D.実行しよう

Cucumber の動かし方

A.まずは、インストールしよう

B.Cucumber の雛形を作ろう

C.振る舞い の雛形を作ろう

D.実行しよう

gem で 以下のものをインストール

✓cucumber

✓webrat

✓nokogiri ※依存で勝手に入ると思うが✓rspec

✓rspec-rails

まずは、インストール

WebratRuby Acceptance Testing for Web applications

★受け入れテストのためのツール class SignupTest < ActionController::IntegrationTest

def test_trial_account_sign_up visit home_path click_link "Sign up" fill_in "Email", :with => "good@example.com" select "Free account" click_button "Register" end

end

Nokogiri鋸

★HTML, XML, SAX, XSLT, Readのパーサ require 'nokogiri' require 'open-uri'

# Get a Nokogiri::HTML:Document for the page we’re interested in... doc = Nokogiri::HTML(open('http://www.google.com/search?q=tenderlove'))

# Do funky things with it using Nokogiri::XML::Node methods... #### # Search for nodes by css doc.css('h3.r a.l').each do |link| puts link.content end

#### # Search for nodes by xpath doc.xpath('//h3/a[@class="l"]').each do |link| puts link.content end

#### # Or mix and match. doc.search('h3.r a.l', '//h3/a[@class="l"]').each do |link| puts link.content end

Nokogiri鋸

★HTML, XML, SAX, XSLT, Readのパーサ require 'nokogiri' require 'open-uri'

# Get a Nokogiri::HTML:Document for the page we’re interested in... doc = Nokogiri::HTML(open('http://www.google.com/search?q=tenderlove'))

# Do funky things with it using Nokogiri::XML::Node methods... #### # Search for nodes by css doc.css('h3.r a.l').each do |link| puts link.content end

#### # Search for nodes by xpath doc.xpath('//h3/a[@class="l"]').each do |link| puts link.content end

#### # Or mix and match. doc.search('h3.r a.l', '//h3/a[@class="l"]').each do |link| puts link.content end

割愛

Cucumber の動かし方

A.まずは、インストールしよう

B.Cucumber の雛形を作ろう

C.振る舞い の雛形を作ろう

D.実行しよう

$ruby script/generate cucumber

$ruby script/generate cucumber

features/step_definitions/webrat_steps.rb

• step とは、ユーザの操作内容

• features/step_definitions 以下に step を定義する

• 汎用的な step はwebrat_step.rb に記載する

• Given, When, Then には、前提の内容、実行する内容、確認する内容を定義する

• Webrat の表記で記述。Rspec の文法でも書ける

features/step_definitions/webrat_steps.rb

Webratの表記webrat_step.rb の例 Rdoc 日本語

visit path_to(page_name) visit(url = nil, http_method = :get, data = {}) 引数の URL にアクセスする

click_button(button) click_button(value = nil)指定した名前のボタンを

クリックする

fill_in(field, :with => value) fill_in(field_locator, options = {}) フォームに入力する

参考) RDocul.us http://docs.rdocul.us/webrat/master/ ramaze-users のWebrat 紹介ページ http://route477.net/ramaze/?Webrat

その他にも✓ features/support/env.rb

cucumber の設定を書くファイル

✓ features/support/paths.rbpath_to メソッドとかパスに関する設定はここに書く

Cucumber の動かし方

A.まずは、インストールしよう

B.Cucumber の雛形を作ろう

C.振る舞い の雛形を作ろう

D.実行しよう

$ruby script/generate feature Memo

$ruby script/generate feature Memo

features/manage_memos.feature

• feature ファイルには、振る舞いを書く

• Feature: には要求や機能を書く

• Scenario: そのフィーチャについてのテストシナリオ名を付ける

• あとは、ユーザの操作内容(Step)を記述

• Given, When, Then には、前提の内容、実行する内容、確認する内容 を書く。And は 直前の内容 ‘かつ’ です

features/manage_memos.feature

features/manage_memos.feature

features/manage_memos.feature

「メモを削除するシナリオ」前提として、以下のメモがある時、もし、3つ目を削除すると、その結果、以下のようになる

Cucumber の動かし方

A.まずは、インストールしよう

B.Cucumber の雛形を作ろう

C.振る舞い の雛形を作ろう

D.実行しよう

実行する

✓全フィーチャの実行$rake features$cucumber featutes

✓フィーチャを指定して実行$cucumber features/manage_memos.feature

この章のまとめ✓ gem で cucumber, webrat をインストール

✓ ruby script/generate cucumber で cucumber 実行のための雛形を作成

✓ ruby script/generate feature XXX でXXX機能に対する振る舞いを書く雛形を作成

✓ rake features や cucumber コマンドで実行

お品書き

• Cucumber って何?

• Cucumber の動かし方

• Cucumber で開発してみよう

1. プレーンテキストに振舞いを記述する

2. Ruby で step の定義を書く

3. 実行して失敗に着目する

4. step をパスするコードを作る

5. 再度実行して step がパスするのを確認する

6. キュウリのように緑色になるまで、2-5 を繰り返す

7. お金が無くなるまで、1-6を繰り返す

1. プレーンテキストに振舞いを記述する

2. Ruby で step の定義を書く

3. 実行して失敗に着目する

4. step をパスするコードを作る

5. 再度実行して step がパスするのを確認する

6. キュウリのように緑色になるまで、2-5 を繰り返す

7. お金が無くなるまで、1-6を繰り返す

その前に

feature はやっぱり、日本語で書きたいよね?お客さんも僕たちも、列記とした日本人だし!

features/manage_memos.feature

「メモを削除するシナリオ」前提として、以下のメモがある時、もし、3つ目を削除すると、その結果、以下のようになる

features/manage_memos.feature

‘フィーチャ’, ‘シナリオ’, ‘前提’, ‘もし’, ‘ならば’, ‘かつ’

と日本語でも書ける (ありがとう! 角谷さん)

「メモを削除するシナリオ」前提として、以下のメモがある時、もし、3つ目を削除すると、その結果、以下のようになる

さらに✓step_definition も自前で用意して、やれば日本語でフィーチャ内のstepを書けます

✓でも、1から書くのはなー っというあなたには、モロ味噌をお勧めします

?

moro-miso✓日本語の step_definition ジェネレータ

✓“キュウリにつけてお召し上がりください”

✓インストールは以下$gem sources --add http://gems.github.com$gem install moro-miso

✓参考サイトCukeの日本語step_definitionジェネレータ、misoを作ってみました(id:moro のブログ) http://d.hatena.ne.jp/moro/20090603/1244042258

$ruby script/generate miso

features/step_definitions/webrat_ja_steps.rb

実行する時の注意

★ -l ja オプション を付ける

$cucumber features/manage_memos.feature -l ja$cucumber features -l ja

1. プレーンテキストに振舞いを記述する

2. Ruby で step の定義を書く

3. 実行して失敗に着目する

4. step をパスするコードを作る

5. 再度実行して step がパスするのを確認する

6. キュウリのように緑色になるまで、2-5 を繰り返す

7. お金が無くなるまで、1-6を繰り返す

今回作りたい機能簡易なメモの作成機能の仕様

•タイトルと本文に文字を入力し、作成ボタンをクリックするとメモを作成して欲しい

•タイトルが空でボタン押下時はエラーメッセージを表示して欲しい

お客さんの声 画面イメージ

1. プレーンテキストに振舞いを記述する

2. Ruby で step の定義を書く

3. 実行して失敗に着目する

4. step をパスするコードを作る

5. 再度実行して step がパスするのを確認する

6. キュウリのように緑色になるまで、2-5 を繰り返す

7. お金が無くなるまで、1-6を繰り返す

NO MONEY

結局、何がそんなに嬉しいの?• 自然言語(っぽいもの)で書かれた振る舞い(=受け入

れテスト=仕様)でそのままテストが実行できるよ

• もちろん、繰り返し実行できるよ

• BDDのためのアプリケーションだから、BDDの恩恵が得られるよ

• ブラウザをいちいち開かなくても、テストできるよ

• Rspec で書いてた View, Controller のテストが1つで書けるよ

• 最初は大変だけど、結構すぐ書けるようになるよ

問題は無かったの?• feature をお客さんに見せたら、「そりゃ、まだ、

プログラミング言語だよ、読み辛い」と言われたよ

• 受け入れテスト仕様 > Cucumberで書ける振る舞い

• Ajax まわりのテストには厳しいよ

• レイアウト周りの確認のために、結局コミット前はブラウザ立ち上げるよ

• 最近、バッチのテストに使おうと思っているけど、苦戦してるよ

• ある程度、プロジェクト内でStepが溜るまでは、大変かもしれないよ

この章のまとめ✓ step_definition を用意すれば、feature は日本語でも書ける

✓ 日本語の step_definition ジェネレータ moro-miso を使うと便利

✓ 振る舞いを書いて、 step を書いて、 プロダクトコードを書いて、を繰り返しキュウリを緑色に

✓ 既に、Rspec で BDD してるなら、 採用するにあたってのデメリットは無い

Cucumber で美味しい開発(実践編)

第○×回 sonic 勉強会sonicチーム id:nsgc

Cucumber で美味しい開発(実践編)

第○×回 sonic 勉強会sonicチーム id:nsgc

次回開催

最後に• 今回は Cucumber の入門編という内容で紹介させて頂きました

• ご要望があれば次回、実践編をさせて下さい• Rainbow プロジェクトでのノウハウ等を紹介します

• (開催されるなら)次回時までの宿題は、実際に使ってみて下さい!で、疑問を教えて下さい

次回、話したい内容など• テーブル表記

• autospec で 実行

• カバレッジ計測

• cucumber.el

• Nokogiri てか、xpath について

ご清聴ありがとうございました!