On sent le vécu hein ? :-). Non bon serieusement, on va essayer de rendre ça “FUN” avec un cocombre et un renard de feux. Déjà on va définir notre vocabulaire.

• Cucumber est un “framework” de test unitaire ou on écrit tout en langage “humain”. Genre “là j’ouvre ma page web et j’epluche des carottes”.
• Watir c’est une bibliothèque pour faire des tests unitaires sur une interface web.

Et si comme Dave Hoover, on combine les 2, ça donne quoi ?

Installation de Cucumber et FireWatir

Simple. Après avoir installé gem (le systeme de packaging de ruby) on tape

gem install cucumber
gem install firewatir

Vous aurez aussi besoin d’un petit plugin firefox disponible ici

En route pour notre premier test.

On nomme les test de cucumber “feature”. La syntaxe d’une feature de cucumber est assez libre mais se base essentiellemet sur 3 mots clé “When”, “Given” et “Then”. On peut assimiler ça a “Hypothèse, developpement et conclusion”.

Ici j’utilise Cucumber en anglais (car les clients que l’on a sont essentiellement anglais) mais il existe une version française de cucumber.

Feature: "lab" section Menu
  In order to ensure that the lab menu
  Verify that the "lab" menu entry exist on lo2k websites

Scenario: Check if "lab" menu exist
  Given I am on website "http://www.lo2k.net"
  Then "lab" is present in the menu

Voici le contenu du fichier “lab.feature”

Si je lance cucumber avec la commande “cucumber lab.feature” j’ai le resultat suivant.

Feature: "lab" section Menu  # features/lab.feature
  In order to ensure that the lab menu
  Verify that the "lab" menu entry exist on lo2k websites
  Scenario: Check if "lab" menu exist           # features/lab.feature:5
    Given I'm on website "http://www.lo2k.net"  # features/lab.feature:6
    Then "lab" is present in the menu           # features/lab.feature:7

1 scenario
2 steps pending (2 with no step definition)

You can use these snippets to implement pending steps which have no step definit
ion:

Given /^I am on website "http:\/\/www\.lo2k\.net"$/ do
end

Then /^"lab" is present in the menu$/ do
end

Sympa, il me definie des templates pour mes “steps”. Comme vous pouvez le voir, les steps sont definis par des expressions regulières. COOL !!! On va donc ecrire nos “steps” dans un repertoire que nous allons nommer “step_definitions”.
Nous allons a l’interieur nous constituer une “bibliotheque” de “step”. Peut importe le nom du fichier ici.

Je définis donc un fichier “bootstrap.rb”

#Include the FireWatir file.
require 'firewatir'

#include the FireWatir Module.
include FireWatir

Before do
	@browser = Firefox.new
end

After do
	@browser.close
end

Puis mes steps.

Given /^I am on website "(.*)"$/ do |url|
	@browser.goto(url)
end

Then /^"(.*)" is present in the menu$/ do |menu|
	@browser.link( :text, 'lab').exists?
end

J’ai profité ici de redefinir avec des parenthèses les elements succeptible de changer.

Bingo, le scenario passe sans aucun soucis

On améliore un peu

Maintenant je peux réecrire mon script comme suit.

Feature: "lab" section Menu
  In order to ensure that the lab menu
  Verify that the "lab" menu entry exist on lo2k websites

Scenario: Check if "lab" menu exist
  Given I am on website "http://www.lo2k.net"
  Then "lab" is present in the menu
  And "timeline" is present in the menu

Et avoir le resultat directement car ayant définis un pattern qui match, il ne me demande même pas de réecrire un bout de code

Feature: "lab" section Menu  # features/lab.feature
  In order to ensure that the lab menu
  Verify that the "lab" menu entry exist on lo2k websites
  Scenario: Check if "lab" menu exist            # features/lab.feature:5
    Given I am on website "http://www.lo2k.net"  # features/step_definitions/step1.rb:27
    Then "lab" is present in the menu            # features/step_definitions/step1.rb:31
    And "timeline" is present in the menu        # features/step_definitions/step1.rb:31

1 scenario
3 steps passed

Et si je veux m’y mettre serieusement ?

Vous remarquerez déjà quelques erreurs dans mon test que j’ai fait précipitement.

• Je fais le test que le lien “existe” pas qu’il est bien situé dans le menu
• Je ne simule pas d’action sur d’autre page.

Vous pouvez facilement mettre des informations dans des champs, simuler des clicks sur des boutons. Voici un exemple de code ci dessous.

When /^with password "(.*)"$/ do |password|
	@browser.text_field(:name,"passw").set(password)
end

Given /^I press the "(.*)" button$/ do |button_name|
	@browser.button(:value,button_name).click
end

Watir est assez exhaustif et montre une flexibilité très interessante qui couvre la plupart des cas, vous n’aurez pas trop de soucis a lui faire ce que vous voulez.

Conclusion

Enfin quelque chose de clair a montrer a votre client et quelque chose d’assez simple a mettre en place.

Quelques idées en vrac que j’ai dans mon cerveau bouillonant:

• Faire un serveur web pour taper vos “features” avec autocompletion basé sur votre bibliothèque de mots clés déjà définis
• Integrer ça a un systeme de builbot pour verifier que les scenarios de votre application marche correctement ;).

Enfin bref… ya du “potentiel” (et du boulot) ;).

Après Barack Obama c’est au tour de Facebook de vilement la copier.

Et oui, faire une grosse boulette (avec leurs condition générales d’utilisations) puis revenir en arrière en proposant un “forum participatif”, ça ressemble quand même a une stratégie de Ségolène Royale.

Bizarre qu’elle ne le revendique pas quand même…

• 40 éléments rajoutés à la base de donnée
• 40 lancements de rapport avec des requêtes MySQL de la mort
• 40 requetes AJAX qui vont répondre dans n’importe quel ordre et surtout n’importe quand.
• bref…. 40 COQUILLES.

Alors que faire contre l’utilisateur frénétique qui en est déjà a son 5eme café et qui va massacrer votre interface graphique car elle ne répond pas a la milliseconde ?

Du Feedback

Je n’ai eu qu’a de très rare occasion vu une application qui montre que quelque chose est en train de se faire en arrière plan.

Afin de dire a votre utilisateur que votre application web a bien pris en compte l’opération, vous pourriez mettre un petit sablier.

Pour cela rien de plus simple. Un peu de CSS.

body.waiting {
   cursor: wait;
}

Puis tout simplement avoir un code JS (ici avec prototypes)

document.body.addClassName('waiting');
new Ajax.Request(uri, {
   onComplete: function() {
      document.body.removeClassName('waiting');
   }
});

Simple non ? Vous pouvez aussi enregistrer un changement de curseur plus globalement au niveau du Responders ajax.

Ajax.Responders.register({
   onCreate: function(){
      document.body.addClassName('waiting');
   },
   onComplete: function(){
       document.body.removeClassName('waiting');
   }
});

Et n’oubliez pas l’evenement “window.load” de votre navigateur lorsque ce n’est pas un appel ajax.

BRAVO ! A présent votre utilisateur est au courant que quelque chose se passe :-).

Toute ces petites choses paraissent évidente et pourtant… beaucoup de site sérieux ne le font pas.

This is short mockup on how you can use canvas.

I was quite attracted by the style of the PS3 slideshow and I my idea is just to see if we can create the same feeling with the HTML5 canvas component (instead of an heavy flash animation).

The javascript code is quite dirt and was just a one shot proof of concept. 

Enter your flickrid and enjoy ;).

See it on the PS3 slideshow with canvas

For french readers

Oui je fais un post en anglais pour toucher un plus large public. Pour les nouveautés, une section “lab” a été rajouté sur lo2k pour mes experimentations. Elle est dispo dans l’url du site standard sous “lab“. (elle apparaitra dans le weblog surement bientôt aussi)

Tout est dispo sur mon compte flickr.

N’hésitez pas a me laisser des conseils ou des commentaires.

Bon. Cela me conforte dans mon choix :-).

Note: demander a la fnac qu’est-ce qu’elle fait avec mon D80…

Les stats ont EXPLOSE d’après google analytics. MERCI

pour le weblog 23 700%… BRAVO

pour lo2k.net 5 100% (les 2 precedents sont respectivement, meteora et scrutator)

Parce que je trouve que c’est ingrat de prendre toujours des roses alors que de la simple “mousse” sur un mur… ça peut être très joli aussi :).

Voici un zoom sans retouche par photoshop (si je vous assure)

Et pour finir… je ne peux resister a en mettre une de mon père

Tout est dispo en Hi-Res sur mon flickr