How we are writing user perspective tests using tools rspec, capybara, kameleon. To get more readable & maintaiable integration and acceptance tests . https://github.com/cs3b/kameleon

1. User perspective
testing using Ruby
Michał Czyż
@cs3b

2. selleo.com

3. http://webout.eu

4. User perspective
testing using Ruby

5. https://twitter.com/#!/moonmaster9000/status/169540724474384384

6. https://twitter.com/#!/athoshun/statuses/165138347432488962

7. https://twitter.com/#!/defkode/status/124066265642967040
http://www.jackkinsella.ie/2011/09/26/why-bother-with-cucumber-testing.html

8. http://blog.jonasbandi.net/2010/09/acceptance-vs-integration-tests.html

12. KAMELEON
http://www.funnypictures24.com/funny2/funnyphotoshopped166.jpg

14. fill_in & within
page.fill_in 'Login', :with =>
'me@in.com'
page.within('body') do ... end

16. click

17. click 'Administrations',
'Products',
click :and_dismiss => 'Delete'
click :and_accept => 'Delete'
click :image => 'OK'
click :element => "#some_div"

18. fill_in

19. fill_in 'www.selleo.com' => 'Link'
fill_in 'www.selleo.com' => 'Link'
'Selleo' => 'Company',
'Poland' => 'Country'

20. fill_in :check => 'Remember me'
fill_in :check => [ 'Red',
'Green',
'Grey' ]

21. fill_in :uncheck => 'Remember me'
fill_in :uncheck => [ 'Red',
'Green',
'Grey' ]

22. fill_in :choose => 'Female'
fill_in :choose => [ 'Europe',
'Poland' ]

23. fill_in :select => { 'Poland' =>
'Countries' }
fill_in :select => { 'Poland' =>
'Countries',
'Silesia' =>
'Provinces' }

24. fill_in :unselect => { 'Poland' =>
'Countries' }
fill_in :unselect => { 'Poland' =>
'Countries',
'Silesia' =>
'Provinces' }

25. fill_in :attach => { 'me.png' =>
'Avatar'}
fill_in :attach => { 'me.png' =>
'Avatar',
'selleo.png' =>
'Company Logo' }

26. # spec_helper.rb
Kameleon.configure do |c|
c.assets_dir = '(...)/fixtures/assets'
end

27. see

28. see 'www.selleo.com',
see 'one',
'another piece of text',
'and another one'

29. see :link => 'Wrocloverb'
see :link => { 'Wrocloverb' =>
'http://wrocloverb.com' }
see :links => { 'Wrocloverb' =>
'http://wrocloverb.com',
'Selleo' =>
'http://www.selleo.com' }

30. see :image => 'OK'
see :image => 'icon_ok.png'
see :images => [ 'completed',
'approved' ]

31. see 'Ruby' => 'First Name'
see 'Wisła' => 'City',
'Silesia' => 'Province'

32. see :field => 'Email'
see :fields => ['Email',
'City',
'Street' ]

33. see :empty => 'Last Name'
see :empty => [ 'Last Name',
'City' ]

34. see :checked => 'Remember me'
see :checked => [ 'Newsletter',
'Remember me' ]

35. see :unchecked => 'Remember me'
see :unchecked => [ 'Newsletter',
'Remember me' ]

36. see :selected => { 'Poland' =>
'Countries' }
see :selected => { 'Poland' =>
'Countries',
'Silesia' =>
'Provinces' }

37. see :selected => { [ 'Red',
'Green',
'Orange' ] =>
'Colors' }

38. see :unselected => { 'Poland' =>
'Countries' }
see :unselected => { 'Poland' =>
'Countries',
'Silesia' =>
'Provinces' }

39. see :unselected => { [ 'Red',
'Green',
'Orange' ] =>
'Colors' }

40. see :ordered => [ 'Bart',
'Tom',
'Anette' ]

41. see 5 => ".element"
see 3 => :menu_item
see 5 => [:xpath,
'//div[@class="element"]' ]

42. not_see

43. not_see 'php'
not_see 'java',
'c#',
'.net'

44. not_see :field => 'Email'
not_see :fields => [ 'Email',
'City',
'Street' ]

45. not_see :link => 'Wrocloverb'
not_see :link => { 'Wrocloverb' =>
'http://wrocloverb.com' }
not_see :links => [ 'Wrocloverb',
'Selleo' ]

46. not_see :image => 'OK'
not_see :image => 'ok.png'
not_see :images => [ 'OK',
'rails.png' ]

47. act_as

48. visit('/')
act_as(:default) do
click 'Products'
end

49. visit('/')
create_session(:user)
visit('/login')
act_as(:default) do
not_see :field => 'Email'
end
act_as(:user)
see :fields => [ 'Email', 'Password' ]

50. http://s1.desktopia.net/wp-content/uploads/walls/thumbs/Funny-Chameleon-575x359.jpg

51. click_link "Products"
within('table.index tr:nth-child(2)') {
page.should have_content("apache baseball
cap") }
within('table.index tr:nth-child(3)') {
page.should have_content("zomg shirt") }
click_link "admin_products_listing_name_title"
within('table.index tr:nth-child(2)') {
page.should have_content("zomg shirt") }
within('table.index tr:nth-child(3)') {
page.should have_content("apache baseball
cap") }
https://github.com/spree/spree/blob/master/core/spec/requests/admin/products/products_spec.rb#L22

52. click "Products"
within('table.index) do
see :ordered => [ "apache baseball cap",
"zomg shirt" ]
end
click "admin_products_listing_name_title"
within('table.index') do
see :ordered => [ "zomg shirt",
"apache baseball cap"]
end

53. click_link "Products"
click_link "admin_new_product"
fill_in "product_name", :with => "Baseball Cap"
fill_in "product_sku", :with => "B100"
fill_in "product_price", :with => "100"
fill_in "product_available_on", :with =>
"2012/01/24"
select "Size", :from => "Prototype"
check "Large"
click_button "Create"
page.should have_content("successfully
created!")
https://github.com/spree/spree/blob/master/core/spec/requests/admin/products/products_spec.rb#L77

54. click "Products",
"admin_new_product"
fill_in "Baseball Cap" => "product_name",
"B100" => "product_sku",
"100" => "product_price",
"2012/01/24" => "product_available_on",
:select => {
"Size" => "Prototype"
},
:check => "Large"
click "Create"
see "successfully created!"

55. within(:css, 'table.index tr:nth-child(2)') {
click_link "Edit" }
fill_in "adjustment_amount", :with => "99"
fill_in "adjustment_label", :with => "rebate 99"
click_button "Continue"
page.should have_content("successfully
updated!")
page.should have_content("rebate 99")
page.should have_content("$99.00")
https://github.com/spree/spree/blob/master/core/spec/requests/admin/orders/adjustments_spec.rb#L48

56. within(:row => 2) { click "Edit" }
fill_in 99 => "adjustment_amount",
"rebate 99" => "adjustment_label"
click "Continue"
see "successfully updated!",
"rebate 99",
"$99.00"

57. click_link "Orders"
within('table#listing_orders tbody tr:nth-child
(1)') { click_link "R100" }
click_link "Payments"
within('#payment_status') { page.should
have_content("Payment: balance due") }
find('table.index tbody tr:nth-child(2)
td:nth-child(2)').text.should == "$39.98"
find('table.index tbody tr:nth-child(2)
td:nth-child(3)').text.should == "Credit Card"
find('table.index tbody tr:nth-child(2)
td:nth-child(4)').text.should == "pending"
https://github.com/spree/spree/blob/master/core/spec/requests/admin/orders/payments_spec.rb#L32

58. click "Orders"
within('table#listing_orders', :row => 1) do
click_link "R100"
end
click "Payments"
within('#payment_status') do
see("Payment: balance due")
end
within(:cell =>[2,2]) { see "$39.98" }
within(:cell =>[2,3]) { see "Credit Card" }
within(:cell =>[2,4]) { see "pending" }

59. DEMO
inspired by a case taken
from a production system

61. create_session(:user)
sign_in_as(:user)
create_session(:admin)
sign_in_as(:admin)

62. act_as(:user) do
not_see 'IS OPEN',
'IS CLOSED'
within(:right_column) do
not_see 'Submit a proposal',
'Submit'
end
end

63. act_as(:admin) do
within(:menu) { click 'Set Contest' }
fill_in 'S vs C' => 'Name',
'2012-01-19 08:00:00' => 'starts at',
'2012-01-20 08:00:00' => 'ends at'
click 'Create Contest'
see 'Contest was successfully created'
end

64. Timecop.travel(2012, 1, 19, 8, 59, 55) do
act_as(:user) do
refresh_page
see 'IS CLOSED'
sleep 10
not_see 'IS CLOSED'
see 'IS OPEN'
end
end

65. Timecop.travel(2012, 1, 19, 9, 1, 1) do
act_as(:user) do
refresh_page
%w(ruby ... haml).each do |content|
fill_in content => 'proposal_content'
click 'Submit'
end
end

66. act_as(:admin) do
click 'Sticker proposals',
'Load more'
%w(ruby ... html).each do |c|
within(:proposal_with_content => c) do
click 'favorite'
end
end
end

67. act_as(:user) do
refresh_page
%w(...).each_with_index do |c, r|
within(:proposal_with_content => c) do
click "Rate #{r+1} out of 5"
end
end
end

68. act_as(:user) do
%w(ruby coffescript).each do |c|
within(:proposal_with_content => c) do
click 'Comment'
fill_in "sample text #{c}" => 'body'
click 'Create comment'
end
end
end

69. Timecop.travel(2012, 1, 20, 11, 10, 10) do
act_as(:admin) do
refresh_page
click 'Load more'
%w(html python).each do |c|
within(:proposal_with_content => c) do
click 'choose'
end
end
end

70. act_as(:user) do
refresh_page
click 'Gallery'
within(:ordered_list) do
see *(%w(html python))
not_see *(%w(ruby ... coffescript))
end
end

71. act_as(:admin) do
click 'Gallery', 'Add new production picture'
fill_in 'Sample title for picture' => 'Title',
:attach => {'pict.jpg' => 'Image'}
click 'Create Gallery image'
end

72. act_as(:user) do
click 'Gallery'
fill_in :select => {'S vs C' => 'contest_id'}
within(:gallery_list) do
see :image => 'Thumb_pict'
end
end

73. act_as(:admin) do
click 'Add new contest sticker'
fill_in 'Sample title for picture' => 'Title',
:attach => {'pict2.jpg' => 'Image'}
click 'Create Gallery image'
end

74. act_as(:user) do
click 'Gallery'
fill_in :select => {'S vs C' => 'contest_id'}
within(:gallery_list) do
see :image => 'Thumb_pict2'
end
end

75. http://2.bp.blogspot.com/_bVtGlUaW-tA/TMOUvmYXzHI/AAAAAAAAP90/SR5yHHWydN4/s1600/Mech_chameleon_by_tommaso_sanguigni.jpg

76. # gemfile
gem 'kameleon', '>= 0.2.0.alpha.2'
gem 'headless'
# spec_helper.rb
require 'kameleon'
require 'kameleon/ext/rspec/all'

77. # or
require 'kameleon/ext/rspec/dsl'
# optional
# .../rspec/garbage_collector'
# .../rspec/headless'

78. SHARED DB CONNECTION
example: lib/kameleon/ext/active_record/
● shared_single_connection.rb
● shared_single_connection_with_spork.rb

79. HEADLESS
RSpec.configure do |config|
config.before(:suite) do
@headless = Headless.new(:display => '100')
@headless.start
end
config.after(:suite) do
@headless.stop if defined?(@headless)
end
end
require 'kameleon/ext/rspec/headless'

80. RIPL
config.after(:each) do
if exception = example.instance_variable_get(:@exception)
Ripl.start :binding => binding
end
end
example: lib/kameleon/utils/debug_console.rb

81. LINKS
RSPEC
● http://pragprog.com/book/achbd/the-rspec-book
● https://www.relishapp.com/rspec
CAPYBARA
● https://github.com/jnicklas/capybara
XPATH
● http://www.w3.org/TR/xpath/
● https://addons.mozilla.org/en-US/firefox/addon/firepath/
SELENIUM
● http://seleniumhq.org/docs/
WEBKIT
● https://github.com/thoughtbot/capybara-webkit
KAMELEON
● https://github.com/cs3b/kame leon

82. THANKS :-)
questions ?
http://selleo.com/people/michal-czyz
http://cs3b.com