http://www.21croissants.com
Les Tests d'Interface Web
avec Rails
PARIS ON RAILS – 1er Décembre 2008
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.

2

Tests unitaires
Vues, Helpers, js
3

2 frameworks de test:
test/functional/
Test::Unit
assert_select
assert_select_RJS
OU
RSpec specs/helpers
spec/views
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
4

RSpec minimaliste des Vues
describe \"/events/show\" do
before(:each) do
@event = stub_event_in_barcelona
assigns[:event] = @event
render('/events/show')
end
it \"should render correctly an event\" do
response.should include_text( @event.name )
end
end
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
5

TDD javascript avec ScrewUnit
/!\\ Ne pas tester jQuery ou
Prototype /!\\
http://pivotallabs.com/users/nick/blog/articles/447-screw-unit-0-3
script/plugin install git://github.com/pivotal/screw-unit-server.git
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
6

// RAILS_ROOT/public/javascripts/application.js
require(\"/implementations/application\");
Screw.Unit(function() {
describe('HelloWorldExampleClass', function() {
var hello;
describe('#helloWorld', function() {
describe('when running ...', function() {
before(function() {
hello = new HelloWorldExample({});
});
it(\"should say 'Hello World!'\", function() {
expect(hello.sayHelloWorld()).to(equal,
\"Hello World!\");
});
});
... 7
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.

script/screw_unit_server
http://0.0.0.0:8080/specs
Onclick: lance le test
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
8

Tests Acceptance
Utilisateur avec cucumber
http://github.com/aslakhellesoy/cucumber/wikis/ruby-on-rails
9

Fonctionnalités utilisées
Source:
Aslak Hellesøy
CHAOS report
10

Origine des erreurs
Source:
Aslak Hellesøy
CHAOS report
11

Août 2008 : cucumber
Aslak Hellesøy
Fonctionnalité + cucumber
.txt = Spec exécutable
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
12

Le dernier joujou des alpha geeks?
13

/features/calculatrice.feature
Fonctionnalité: Addition
Afin de financer mon bonus Valeur
avec l'argent des pigeons
En tant que trader Rôle
Je souhaite pouvoir additionner 2 chiffres
Fonctionnalité
14

GIVEN: contexte, pré-conditions
Scénario:
Addition de produits dérivés
GIVEN
Étant donné que je tape 55000000000000
Et que je tape 2
Lorsque je tape additionner
Alors le résultat doit être 5500000000002
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
15

WHEN: événement, action
Scénario:
Addition de produits dérivés
Étant donné que je tape 55000000000000
Et que je tape 2
WHEN
Lorsque je tape additionner
Alors le résultat doit être 5500000000002
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
16

Boulot du développeur
 Aider le client à rédiger des critères
d'acceptance
 Ecrire le code ruby de chaque « step »
pour que les fonctionnalités soient
exécutées
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
17

THEN: résultat, post-conditions
Scénario:
Addition de produits dérivés
Étant donné que je tape 55000000000000
Et que je tape 2
Lorsque je tape additionner
THEN
Alors le résultat doit être 5500000000002
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
18

/features/step_definitions/calculatrice.rb
Be fo re do
@calc = Ca l cu la t r i ce.new
end
# Etant donné que je tape / Et que je tape
Given /que je tape (\\d+)/ do |n|
@calc.push n.to_i
end
# Lorsque je tape additionner
When 'je tape additionner' do
@result = @calc.additionner
end
# Alors le résultat doit être ...
Then /le résultat doit être (\\d*)/ do |expected|
@result.should == expected.to_i
end Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 19

Exécution: rake features
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
20

Documentation à jour + exécutable
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
21

Le format de Tables à la FIT
Etant donné que je tape 2
Et que je tape 1
Lorsque je tape additionner
Alors le résultat doit être 3
Plus d'exemples:
| a | b | somme |
|2|2|4 |
|2|3|5 |
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
22

rake features
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
23

Tests Acceptance
Utilisateur
avec cucumber + webrat
http://github.com/brynary/webrat
24

Web Application Ruby Acceptance Testing
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
25

Cucumber /features/step_definitions/
common_webrat_steps .fr
Given /^que je suis dans la page de \"(.*)\"$/ do |url|
visits url
end
When /^je tape \"(.*)\" dans le champ \"(.*)\"$/ do |
value, field|
fills_in(field, :with => value)
end
When /^je clique sur le bouton \"(.*)\"$/ do |button|
clicks_button(button)
end
Then /^je devrais voir le texte \"(.*)\"$/ do |text|
response_body.should contain(text)
end 26
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.

Limitation de Webrat::RailsSession
« simule » le butineur, pas de render de
la page
=> Rapide :-)
=> Pas de support de javascript :-(
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
27

Webrat::CeleritySession
 1.1.4 et 6 ou
 Basé sur la librarie java HtmlUnit
 jgem install celerity + toutes tes gems du
projet
 jruby -S rake features
Prototype Ajax.update ne fonctionne pas :-(
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
28

Webrat::SeleniumSession rocks!
 Vidéo Selenium User group (fev 2008)
http://www.youtube.com/watch?v=EDb8yOM3Vpw
 « Fermes » selenium de google:
50 équipes & 51 000 tests
 Phillipe Hanrigou:
 gem install selenium-client
 Voir les /examples/ruby de
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
29

Tester Ajax
avec cucumber + webrat +
selenium
http://github.com/ph7/selenium-client/
30

La newsletter de lecool
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
31

Fonctionnalité: Programmation d'une journée de la newsletter
Afin de gagner du temps dans la programmation de la
Newsletter
En tant qu'éditeur de lecool, je souhaite
pouvoir changer l'ordre des événements par glisser-déposer
Scénario:
Etant donné que je suis logged in en tant qu'administrateur
Lorsque j'édite la newsletter \"Barcelona Selected * 256\"
Et que je clique sur l'événement \"Los buenos muñecos viven
para siempre\" pour le déposer sur l'événement \"La Leyenda de
Los Planetas\"
Alors l'évenement \"Los buenos muñecos viven para siempre\"
devrait être en position 2
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
32

# Etant donné que je suis logged in en tant qu'administrateur
Given /que je suis logged in en tant qu'administrateur/ do
user = User.find_by_nickname(...)
visits \"/admin/login\"
fills_in(\"Email\", :with => \"jm@lecool.com\")
fills_in(\"Password\", :with => \"12345678\")
clicks_button(\"Sign in\")
end
Log:
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
33

# Lorsque j'édite la newsletter \"Barcelona Selected * 256\"
When /^j'édite la newsletter \"(.*)\"$/ do |name|
@newsletter = News le t te .find_by_title(name)
r
visits
\"/admin/newsletters/#{@newsletter.id}/edit_newsletter\"
end
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
34

# Et que je clique sur l'évenement \"Los buenos muñecos viven para
siempre\" pour le déposer sur l'évenement \"La Leyenda de Los Planetas\"
When /^que je clique sur l'évenement \"(.*)\" pour le
déposer sur l'évenement \"(.*)\"/ do |from_event_name,
to_event_name|
drag_and_drop_to_object xpath_event(from_event_name),
xpath_event(to_event_name)
wait_for_ajax
end
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
35

#Alors l'évenement \"Los buenos muñecos viven para siempre\"
devrait être en position 2
Then /^l'évenement \"(.*)\" devrait être en position
(\\d+)/ do |event_name, position|
Event.find_by_name(event_name).position_in_newsletter.
should == position.to_i
end
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
36

Fonctionnalité: Google map
Afin de pouvoir trouver plus facilement le lieu de l'événement
En tant que lecteur de lecool, je souhaite
pouvoir visualiser une google map
Scénario: Voir la carte d'un événement
Etant donné que je suis dans la page de \"/cities/barcelona/\"
Lorsque je clique sur \"VIEW MAP\" de l'événement \"Lube
Magazine\"
Et que je clique sur l'icône de l'événement
Alors je devrais voir le texte \"Barcelona\"
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
37

# Etant donné que je suis dans la page de \"/cities/barcelona\"
Given /^que je suis dans la page de \"(.*)\"$/ do |url|
visits url
end
CENSURE!
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
38

Lorsque je clique sur \"VIEW MAP\" de l'événement \"Lube
Magazine\"
When /^je clique sur
\"VIEW MAP\" de l'évenement\"(.*)\"
|event_name|
event =
Event.find_by_name(event_name)
clicks
\"//a[@id=view_map-#{event_id}']\"
wait_for_ajax
end
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
39

# Et que je clique sur l'icône de l'événement
When /^que je clique sur l'icône de l'évenement$/ do
clicks \"mtgt_unnamed_0\" # google map icon
end
40

Selenium IDE à la rescousse
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
41

Ouvre l'éditeur / Debugging
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
42

Intégration Continue
http://cruisecontrolrb.thoughtworks.com
cruise add <name> -u <url>
cruise start
Hudson
http://blog.huikau.com/2008/01/09/jruby-ruby-continuous-integration-with-hudson/
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.

Merci de votre attention!
Questions - Réponses
Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
44