http://www.21croissants.com


Les Tests d'Interface Web
        avec Rails
        PARIS ON RAILS – 1er Décembre 2008




...
2
Tests unitaires
 Vues, Helpers, js




                     3
2 frameworks de test:


                                       test/functional/
Test::Unit
                               ...
RSpec minimaliste des Vues
describe quot;/events/showquot; do

  before(:each) do
    @event = stub_event_in_barcelona
   ...
TDD javascript avec ScrewUnit


/! Ne pas tester jQuery ou
  Prototype /!


http://pivotallabs.com/users/nick/blog/article...
// RAILS_ROOT/public/javascripts/application.js
require(quot;/implementations/applicationquot;);

Screw.Unit(function() {
...
script/screw_unit_server
         http://0.0.0.0:8080/specs




Onclick: lance le test
   Paris On Rail 2008 – Copyright (...
Tests Acceptance
Utilisateur avec cucumber
http://github.com/aslakhellesoy/cucumber/wikis/ruby-on-rails




              ...
Fonctionnalités utilisées




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




                Source:
                Aslak Hellesøy
                CHAOS report
              ...
Août 2008 : cucumber


                                         Aslak Hellesøy




Fonctionnalité                         ...
Le dernier joujou des alpha geeks?




                              13
/features/calculatrice.feature

      Fonctionnalité: Addition

Afin de financer mon bonus Valeur
        avec l'argent de...
GIVEN: contexte, pré-conditions

Scénario:
Addition de produits dérivés
   GIVEN
Étant donné que je tape 55000000000000

E...
WHEN: événement, action

Scénario:
Addition de produits dérivés
Étant donné que je tape 55000000000000

Et que je tape 2
W...
Boulot du développeur
   Aider le client à rédiger des critères
    d'acceptance
   Ecrire le code ruby de chaque « step...
THEN: résultat, post-conditions

Scénario:
Addition de produits dérivés
Étant donné que je tape 55000000000000

Et que je ...
/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 / ...
Exécution: rake features




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




  Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons....
Le format de Tables à la FIT

Etant donné que je tape 2
  Et que je tape 1
  Lorsque je tape additionner
  Alors le résult...
rake features




Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
                     ...
Tests Acceptance
   Utilisateur
 avec cucumber + webrat
     http://github.com/brynary/webrat




                        ...
Web Application Ruby Acceptance Testing




  Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Co...
Cucumber /features/step_definitions/
common_webrat_steps .fr
Given /^que je suis dans la page de quot;(.*)quot;$/ do |url|...
Limitation de Webrat::RailsSession

« simule » le butineur, pas de render de
 la page
=> Rapide :-)
=> Pas de support de j...
Webrat::CeleritySession
                   1.1.4 et                     6 ou


   Basé sur la librarie java HtmlUnit
  ...
Webrat::SeleniumSession rocks!
   Vidéo Selenium User group (fev 2008)
    http://www.youtube.com/watch?v=EDb8yOM3Vpw

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




                        ...
La newsletter de lecool




Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
           ...
Fonctionnalité: Programmation d'une journée de la newsletter
 Afin de gagner du temps dans la programmation de la
Newslett...
# Etant donné que je suis logged in en tant qu'administrateur
Given /que je suis logged in en tant qu'administrateur/ do
 ...
# Lorsque j'édite la newsletter quot;Barcelona Selected * 256quot;
When /^j'édite la newsletter quot;(.*)quot;$/ do |name|...
# Et que je clique sur l'évenement quot;Los buenos muñecos viven para
siemprequot; pour le déposer sur l'évenement quot;La...
#Alors l'évenement quot;Los buenos muñecos viven para siemprequot;
devrait être en position 2
Then /^l'évenement quot;(.*)...
Fonctionnalité: Google map

 Afin de pouvoir trouver plus facilement le lieu de l'événement
 En tant que lecteur de lecool...
# Etant donné que je suis dans la page de quot;/cities/barcelonaquot;
Given /^que je suis dans la page de quot;(.*)quot;$/...
Lorsque je clique sur quot;VIEW MAPquot; de l'événement quot;Lube
                       Magazinequot;

                  ...
# 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 quot;mtgt_unna...
Selenium IDE à la rescousse




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


http://cruisecontrolrb.thoughtworks.com




cruise add <name> -u <url>
cruise start

Hudson
http://...
Merci de votre attention!

         Questions - Réponses



Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licenc...
Upcoming SlideShare
Loading in …5
×

Tests Interfaces Web avec Rails

2,114 views

Published on

Presentation made a Paris on Rails 2008 about User Acceptance Testing with cucumber + webrat & selenium

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,114
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tests Interfaces Web avec Rails

  1. 1. 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. 2. 2
  3. 3. Tests unitaires Vues, Helpers, js 3
  4. 4. 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
  5. 5. RSpec minimaliste des Vues describe quot;/events/showquot; do before(:each) do @event = stub_event_in_barcelona assigns[:event] = @event render('/events/show') end it quot;should render correctly an eventquot; do response.should include_text( @event.name ) end end Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 5
  6. 6. 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
  7. 7. // RAILS_ROOT/public/javascripts/application.js require(quot;/implementations/applicationquot;); Screw.Unit(function() { describe('HelloWorldExampleClass', function() { var hello; describe('#helloWorld', function() { describe('when running ...', function() { before(function() { hello = new HelloWorldExample({}); }); it(quot;should say 'Hello World!'quot;, function() { expect(hello.sayHelloWorld()).to(equal, quot;Hello World!quot;); }); }); ... 7 Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
  8. 8. 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
  9. 9. Tests Acceptance Utilisateur avec cucumber http://github.com/aslakhellesoy/cucumber/wikis/ruby-on-rails 9
  10. 10. Fonctionnalités utilisées Source: Aslak Hellesøy CHAOS report 10
  11. 11. Origine des erreurs Source: Aslak Hellesøy CHAOS report 11
  12. 12. 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
  13. 13. Le dernier joujou des alpha geeks? 13
  14. 14. /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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. /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
  20. 20. Exécution: rake features Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 20
  21. 21. Documentation à jour + exécutable Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 21
  22. 22. 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
  23. 23. rake features Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 23
  24. 24. Tests Acceptance Utilisateur avec cucumber + webrat http://github.com/brynary/webrat 24
  25. 25. Web Application Ruby Acceptance Testing Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 25
  26. 26. Cucumber /features/step_definitions/ common_webrat_steps .fr Given /^que je suis dans la page de quot;(.*)quot;$/ do |url| visits url end When /^je tape quot;(.*)quot; dans le champ quot;(.*)quot;$/ do | value, field| fills_in(field, :with => value) end When /^je clique sur le bouton quot;(.*)quot;$/ do |button| clicks_button(button) end Then /^je devrais voir le texte quot;(.*)quot;$/ do |text| response_body.should contain(text) end 26 Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons.
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Tester Ajax avec cucumber + webrat + selenium http://github.com/ph7/selenium-client/ 30
  31. 31. La newsletter de lecool Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 31
  32. 32. 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 quot;Barcelona Selected * 256quot; Et que je clique sur l'événement quot;Los buenos muñecos viven para siemprequot; pour le déposer sur l'événement quot;La Leyenda de Los Planetasquot; Alors l'évenement quot;Los buenos muñecos viven para siemprequot; devrait être en position 2 Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 32
  33. 33. # 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 quot;/admin/loginquot; fills_in(quot;Emailquot;, :with => quot;jm@lecool.comquot;) fills_in(quot;Passwordquot;, :with => quot;12345678quot;) clicks_button(quot;Sign inquot;) end Log: Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 33
  34. 34. # Lorsque j'édite la newsletter quot;Barcelona Selected * 256quot; When /^j'édite la newsletter quot;(.*)quot;$/ do |name| @newsletter = News le t te .find_by_title(name) r visits quot;/admin/newsletters/#{@newsletter.id}/edit_newsletterquot; end Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 34
  35. 35. # Et que je clique sur l'évenement quot;Los buenos muñecos viven para siemprequot; pour le déposer sur l'évenement quot;La Leyenda de Los Planetasquot; When /^que je clique sur l'évenement quot;(.*)quot; pour le déposer sur l'évenement quot;(.*)quot;/ 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
  36. 36. #Alors l'évenement quot;Los buenos muñecos viven para siemprequot; devrait être en position 2 Then /^l'évenement quot;(.*)quot; 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
  37. 37. 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 quot;/cities/barcelona/quot; Lorsque je clique sur quot;VIEW MAPquot; de l'événement quot;Lube Magazinequot; Et que je clique sur l'icône de l'événement Alors je devrais voir le texte quot;Barcelonaquot; Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 37
  38. 38. # Etant donné que je suis dans la page de quot;/cities/barcelonaquot; Given /^que je suis dans la page de quot;(.*)quot;$/ do |url| visits url end CENSURE! Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 38
  39. 39. Lorsque je clique sur quot;VIEW MAPquot; de l'événement quot;Lube Magazinequot; When /^je clique sur quot;VIEW MAPquot; de l'évenementquot;(.*)quot; |event_name| event = Event.find_by_name(event_name) clicks quot;//a[@id=view_map-#{event_id}']quot; wait_for_ajax end Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 39
  40. 40. # 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 quot;mtgt_unnamed_0quot; # google map icon end 40
  41. 41. Selenium IDE à la rescousse Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 41
  42. 42. Ouvre l'éditeur / Debugging Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 42
  43. 43. 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.
  44. 44. Merci de votre attention! Questions - Réponses Paris On Rail 2008 – Copyright (c) Garnier Jean-Michel. Licence: Creative Commons. 44

×