Ruby for Newbies Test d'applications Web avec Capybara et Cucumber

Ruby est l’un des langages les plus utilisés sur le Web. Nous organisons ici une session sur Nettuts + qui vous présentera Ruby, ainsi que les formidables cadres et outils associés au développement de Ruby. Dans cet épisode, vous découvrirez comment tester vos applications Sinatra avec Cucumber, Capybara et Rspec..

Dans le didacticiel précédent de cette série, nous avons examiné Rspec et comment vous pouvez effectuer un développement piloté par les tests. J'ai mentionné que, dans le prochain épisode, nous envisagerions d'utiliser Rspec pour tester des applications Web. Cependant, quelques commentateurs ont indiqué qu'ils seraient intéressés par un test avec Cucumber. C'est ce que nous allons utiliser pour tester une application Web très simple. En fait, nous utiliserons une partie de Rspec pour obtenir la même syntaxe que celle que vous aviez vue la dernière fois, mais la configuration du test est en concombre..


Préférer un screencast?


Étape 1: Construire l'application

Nous allons créer une application Sinatra incroyablement simple à tester. Pour commencer, créons un dossier de projet et jetons-le dans un Gemfile:

Quoi? Tu ne sais pas Gemfiles? Sortez de ce rocher et rattrapez l'épisode 8

 source: rubygems bijou "sinatra" bijou "fusil de chasse" bijou "concombre" bijou "capybara" bijou "rspec"

Maintenant, lancez installation groupée dans ce répertoire. Avec les gemmes installées, nous sommes prêts à partir! (En option, si vous utilisez RVM, vous pouvez installer ces gems pour ce projet uniquement en exécutant rvm --rvmrc --create 1.9.2@cucumber_example; exécuter ceci avant installation groupée)

Alors, ouvrez un fichier appelé myapp.rb; voici notre application super simple; il simule simplement un site qui pourrait vous permettre de vous inscrire à une newsletter.

 nécessite la classe "sinatra / base" MyApp < Sinatra::Base get "/" do erb :index end post "/thankyou" do @name = params["name"] @email = params["email"] erb :thankyou end get "/form" do erb :form end end

Si vous ne connaissez pas Sinatra, découvrez les excellentes sessions de Dan Harper Singing with Sinatra; ça va vous permettre de fonctionner avec les bases en un rien de temps.

Si vous connaissez Sinatra, vous verrez que nous créons trois chemins ici; sur la page d'accueil ('/'), nous rendons simplement le index.erb modèle (plus sur les modèles dans une minute). Si nous recevons une demande de publication sur le chemin /Je vous remercie, nous prenons les valeurs du prénom et email paramètres et les assigner à des variables d'instance. Les variables d’instance seront disponibles dans tous les modèles que nous avons rendus, ce qui est le cas. merci. Enfin, à /forme, nous rendons le form.erb modèle.

Maintenant, construisons ces modèles. Sinatra examinera les modèles dans un dossier "vues", alors mettons-les là. Comme vous l'avez vu dans myapp.rb, nous utilisons ERB pour rendre les modèles, donc ce seront bien sûr des modèles ERB. Si nous avons un layout.erb modèle, il enveloppera tous nos autres modèles. Alors faisons ceci:

layout.erb

     L'APPLICATION   

L'APPLICATION

<%= yield %>

Cet appel à rendement sera où les autres modèles sont insérés. Et ces autres modèles sont assez simples:

index.erb

 

Ceci est la page d'accueil

Inscrivez-vous à notre newsletter!

form.erb

 

Remplissez ce formulaire pour recevoir notre newsletter.

merci

 

salut, <%= @name %>. Vous allez maintenant recevoir notre email à <%= @email %>

Donc, il y a notre application. Pour le tester manuellement, vous pouvez le mettre dans un config.ru fichier:

 nécessite "./monapp" exécuter MyApp

Et puis courir fusil à pompe dans le terminal. Cela va démarrer un websever, probablement sur le port 9393. Vous pouvez maintenant fouiller et tester notre application web. Mais nous voulons automatiser ces tests, non? Faisons le!


Étape 2: Définir notre environnement de test

Le concombre se présente comme «un développement axé sur le comportement avec élégance et joie». Bien que la joie me paraisse un peu farfelue, je pense que nous conviendrons tous les deux pour dire que l'élégance, eh bien, Cucumber l'a.

Parce que le développement basé sur le comportement consiste en partie à comprendre ce que veut le client avant de commencer à coder, Cucumber vise à rendre ses tests lisibles par ses clients (AKA, non-programmeurs). Donc, vous verrez ici que tous vos tests sont écrits dans ce qui semble être du texte brut (c'est en fait Gherkin).

Rappelez-vous comment, avec Rspec, nous avons des fichiers de spécifications séparés pour décrire différentes fonctionnalités. En termes de concombre, ce sont des fonctionnalités, et elles appartiennent toutes à un? Fonctionnalités? dossier. Dans ce dossier, créez deux autres dossiers appelés? Support? et? step_definitions.?

Dans le? Support? dossier, ouvrez un env.rb. Ce code va configurer notre environnement de test. Voici ce dont nous avons besoin:

 require_relative "? /? / myapp" nécessite "Capybara" nécessite "Capybara / concombre" nécessite "rspec" Monde ne Capybara.app = MyApp inclut Capybara :: DSL inclut RSpec :: Matchers

Cela nécessite les différentes bibliothèques dont nous avons besoin, et utilise comprendre de charger leurs méthodes dans notre environnement. Quelle est cette Capybara que nous utilisons? En gros, c’est la fonctionnalité qui nous permet d’utiliser notre application Web pour pouvoir la tester. Il est important de définir Capybara.app à notre application. Je devrais mentionner que, si nous le faisions avec une application Rails, la plupart de cette configuration serait faite automatiquement pour nous..

(Remarque: dans le screencast, je include RSpec :: Attentes sans nécessité; laisser de côté.)

Bon, écrivons quelques tests!


Étape 3 Écriture des tests

Commençons par notre page d'accueil. Ouvrir le fichier home_pages.feature (dans le dossier "features") et commencez par ceci:

 Fonctionnalité: le spectateur visite la page d'accueil Pour lire la page En tant que spectateur, je souhaite voir la page d'accueil de mon application.

C'est un moyen courant de démarrer un fichier de caractéristiques. Ça ne ressemble pas vraiment à du code, n'est-ce pas? Eh bien, c’est Gherkin, un langage de domaine spécifique qui vous permet de décrire le comportement du logiciel sans détailler la façon dont ce comportement est implémenté. Ce que nous avons écrit jusqu’à présent n’a aucun sens, mais explique le but de la fonctionnalité. Voici la structure générale:

 Pour [objectif] En tant que [rôle], je veux [fonction]

Vous n'êtes pas obligé de suivre ce modèle: vous pouvez mettre ce que vous voulez; le but est de décrire la fonctionnalité. Cependant, cela semble être une tendance commune.

Vient ensuite une liste de scénarios décrivant la fonctionnalité. Voici le premier:

 Scénario: Afficher la page d'accueil Étant donné que je suis sur la page d'accueil Ensuite, je devrais voir "Ceci est la page d'accueil".

Chaque scénario peut comporter jusqu'à trois parties: Donnés, Quandle sable ensuites:

  • Donné - Donné les lignes décrivent quelle condition préalable devrait exister.
  • Quand - Quand les lignes décrivent les actions que vous prenez.
  • ensuite - ensuite les lignes décrivent le résultat.

Il y a aussi Et lignes, qui font quoi que la ligne au-dessus d'eux fait. Par exemple:

 Étant donné que je suis sur la page d'accueil Et je suis connecté, alors je devrais voir "Welcome Back!" Et je devrais voir "Paramètres"

Dans ce cas, le premier Et la ligne agit comme un Donné ligne, et le second agit en tant que ensuite ligne.

Nous verrons quelques Quand lignes sous peu. Mais pour le moment, exécutons ce test. Pour cela, lancez concombre dans le terminal. Vous verrez probablement quelque chose comme ça:

Les fichiers de caractéristiques de concombre sont écrits pour être lisibles par les non-programmeurs, nous devons donc "implémenter des définitions d'étape pour des étapes non définies". Heureusement, Cucumber nous donne des extraits pour commencer.

En regardant ces extraits, vous pouvez voir comment cela fonctionnera. Chaque étape est associée à une expression régulière. Toutes les valeurs citées seront capturées et transmises en tant que paramètre de bloc. À l'intérieur du bloc, nous faisons ce que nous nous attendons à la suite de cette étape. Cela pourrait être le code de configuration dans Donné étapes, des calculs ou des actions dans Quand étapes, et une comparaison en ensuite pas.

Le concombre chargera tous les fichiers du dossier? Features / step_definitions? pour les étapes, créons donc? sinatra_steps.rb? déposer et ajouter ces deux étapes:

 Etant donné / ^ je suis sur la page d'accueil $ / do visite "/" end Alors / ^ je devrais voir "([^"] *) "$ / do | text | page.should have_content text end

Dans ce petit extrait, nous utilisons Cucumber, Rspec et Capybara. Tout d'abord, nous avons le concombre Donné et ensuite appels de méthode. Deuxièmement, nous utilisons les méthodes Capybara visite (pour visiter une URL) et has_content?. Mais vous ne voyez pas l'appel à has_content? parce que nous avons chargé les adaptateurs RSpec, nous pouvons donc faire en sorte que nos tests se lisent comme ils le feraient avec Rspec. Si nous voulions quitter RSpec, nous écririons simplement page.has_content? texte.

Maintenant, si vous courez concombre encore une fois, vous verrez que nos tests réussissent:

Ajoutons deux autres scénarios pour notre page d'accueil:

Scénario: Rechercher l'en-tête sur la page d'accueil Étant donné que je suis sur la page d'accueil Ensuite, je devrais voir "MON APP" dans le sélecteur "h1". Scénario: Rechercher le lien vers le formulaire Donné Je suis sur la page d'accueil. Ensuite, je devrais consulter pour notre newsletter. " dans un lien

Ceux-ci nécessitent deux autres ensuite comme vous le constaterez si vous essayez d’exécuter ceci. Ajoutez-les à sinatra_steps.rb:

 Alors / ^ je devrais voir "([^"] *) "dans le sélecteur" ([^ "] *)" $ / do | text, selector | page.should have_selector selector, content: text end Alors / ^ je devrais voir "([^"] *) "dans un lien $ / do | text | page.should have_link text end

Vous devriez pouvoir savoir ce qu'ils font: le premier recherche du texte dans un certain élément de la page. La seconde cherche un lien avec le texte donné (oui, vous auriez pu le faire Ensuite, je devrais voir "Inscrivez-vous?" Dans le sélecteur "a", mais je voulais vous devriez une autre méthode Capybara / Rspec)

Encore une fois, lancez concombre; vous verrez passer tous nos tests:

Ouvrons maintenant? Features / form_page.feature ?; jeter ceci dedans là:

 Fonctionnalité: Le spectateur s’inscrit à la newsletter Pour recevoir le bulletin d’information En tant qu’utilisateur du site, je veux pouvoir m'inscrire à la newsletter Scénario: Afficher la page du formulaire Vu que je suis sur "/ formulaire" Ensuite, je devrais voir "Remplir hors de ce formulaire pour recevoir notre newsletter. " Scénario: Remplissez le formulaire Étant donné que je suis sur "/ formulaire" Lorsque je remplis "nom" avec "John Doe" Et je remplis "email" avec "[email protected]" Et je clique sur "Inscription!" Ensuite, je devrais voir "Bonjour, John Doe. Vous allez recevoir notre lettre d'information par courrier électronique à [email protected]"

Le premier scénario est assez simple, bien que nous devions écrire le Donné pas pour est. Vous pouvez probablement trouver comment faire cela maintenant:

 Étant donné / ^ je suis sur "([^"] *) "$ / do | chemin | fin du chemin de visite

Le second est un peu plus en profondeur. Pour la première fois, nous utilisons Quand étapes (rappelez-vous, le Et les étapes qui suivent le Quand étape sont également Quand pas). C'est assez évident ce que ceux Quand les étapes devraient faire, mais comment faisons-nous cela dans le code Ruby? Heureusement, Capybara a quelques méthodes pratiques pour vous aider:

 Quand / ^ je remplis "([^"] *) "avec" ([^ "] *)" $ / do | element, text | fill_in element, with: text end Quand / ^ je clique sur "([^"] *) "$ / do | element | click_on element end

Nous utilisons le remplir méthode, qui prend l'attribut name ou id d'un élément de la page. Nous utilisons aussi cliquer sur, qui cliquera sur l'élément avec le texte, l'identifiant ou la valeur donnés. Il y a aussi les plus spécifiques click_link et click_button. Pour en savoir plus, consultez le fichier Lisez-moi de Capybara. Parcourez le? DSL? section pour voir plus de méthodes que Capybara offre.

Quand tu cours concombre maintenant, vous devriez avoir tous nos tests, en passant:


Conclusion

Sachez que ce que nous testons ici est la seule interface utilisateur, pas le code sous-jacent. Si notre code vous a réellement inscrit à la newsletter, nous devrons également tester le code qui ajoute le nom et l'adresse électronique à notre base de données, etc. Ce n'est pas parce que nous voyons ce que nous sommes censés voir que nous Je vais recevoir le bulletin d'information, n'est-ce pas? Cela devrait être testé séparément.

Et cela teste les applications Web avec les adaptateurs Cucumber, Capybara et Rspec. Comme je l'ai mentionné, consultez la documentation Capybara pour plus d'informations.!