Ruby para principiantes probando aplicaciones web con capibara y pepino

Ruby es uno de los idiomas más populares utilizados en la web. Estamos ejecutando una sesión aquí en Nettuts + que le presentará a Ruby, así como a los excelentes marcos y herramientas que acompañan el desarrollo de Ruby. En este episodio, aprenderá cómo probar sus aplicaciones Sinatra con Cucumber, Capybara y Rspec.

En el tutorial anterior de esta serie, analizamos Rspec y cómo puede realizar con él el desarrollo basado en pruebas. Mencioné que, en el próximo episodio, consideraríamos usar Rspec para probar aplicaciones web. Sin embargo, un par de comentaristas mencionaron que estarían interesados ​​en ver las pruebas con Cucumber, así que eso es lo que usaremos para probar una aplicación web muy simple. En realidad, usaremos parte de Rspec para obtener la misma sintaxis de comparación que vimos la última vez, pero la configuración de prueba real está en Cucumber.


Prefiero un Screencast?


Paso 1: Construyendo la aplicación

Vamos a crear una aplicación Sinatra increíblemente simple para probar. Para empezar, vamos a crear una carpeta de proyecto y lanzar esto en un Gemfile:

¿Qué? Tu no sabes Gemfiles? Sal de debajo de esa roca y ponte al día con el episodio 8

 fuente: rubygems gema "sinatra" gema "escopeta" gema "pepino" gema "capibara" gema "rspec"

Ahora corre instalación de paquete en ese directorio ¡Con las gemas instaladas, estamos listos para partir! (Opcionalmente, si está usando RVM, puede instalar estas gemas para este proyecto solo ejecutando rvm --rvmrc --create 1.9.2@cucumber_example; corre esto antes instalación de paquete)

Entonces, abre un archivo llamado myapp.rb; Aquí está nuestra aplicación super simple; simplemente simula un sitio que podría permitirle registrarse para recibir un boletín informativo.

 requiere clase "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 no está familiarizado con Sinatra, eche un vistazo a las excelentes sesiones de Dan Harper Cantando con Sinatra; Eso te pondrá en marcha con lo básico en poco tiempo.

Si está familiarizado con Sinatra, verá que estamos creando tres rutas aquí; en la página de inicio ('/'), simplemente representamos index.erb Plantilla (más sobre las plantillas en un minuto). Si obtenemos una solicitud de entrada al camino. /gracias, tomamos los valores de la nombre y correo electrónico Parámetros y asignarlos a variables de instancia. Las variables de instancia estarán disponibles dentro de la plantilla que representamos, que resulta ser gracias.. Finalmente, en /formar, hacemos el form.erb modelo.

Ahora, vamos a construir estas plantillas. Sinatra buscará las plantillas en una carpeta de 'vistas', así que pongámoslas allí. Como viste en myapp.rb, estamos usando ERB para representar las plantillas, por lo que, por supuesto, serán plantillas ERB. Si tenemos un layout.erb Plantilla, envolverá todas nuestras otras plantillas. Entonces, hagamos esto:

layout.erb

     LA APLICACIÓN   

LA APLICACIÓN

<%= yield %>

Esa llamada a rendimiento Será donde se insertan las otras plantillas. Y esas otras plantillas son bastante simples:

index.erb

 

Esta es la página principal

Suscríbase a nuestro boletín!

form.erb

 

Rellena este formulario para recibir nuestro boletín..

gracias.

 

Hola, <%= @name %>. Ahora recibirás nuestro correo electrónico en <%= @email %>

Entonces, ahí está nuestra aplicación. Para probarlo manualmente, puedes poner esto en una config.ru expediente:

 requiere "./myapp" ejecutar MyApp

Y luego correr escopeta en la terminal Esto iniciará un websever, probablemente en el puerto 9393. Ahora puede buscar y probar nuestra aplicación web. Pero queremos automatizar estas pruebas, ¿verdad? Vamos a hacerlo!


Paso 2: Configuración de nuestro entorno de prueba

El pepino se factura a sí mismo como "comportamiento impulsado por el desarrollo con elegancia y alegría". Si bien la alegría me parece un poco exagerada, creo que ambos estaremos de acuerdo en que la elegancia, bueno, lo tiene Cucumber..

Debido a que el desarrollo impulsado por el comportamiento se basa en parte en comprender lo que el cliente quiere antes de que usted comience a codificar, Cucumber apunta a hacer que sus pruebas sean legibles para los clientes (AKA, no programadores). Entonces, verás aquí que todas tus pruebas están escritas en lo que parece ser texto simple (en realidad es Gherkin).

¿Recuerda cómo, con Rspec, tenemos archivos de especificaciones separados para describir diferentes funcionalidades? En el lenguaje del pepino, esas son características, y todas ellas pertenecen a? Características? carpeta. Dentro de esa carpeta cree dos carpetas más llamadas "soporte". y? step_definitions.?

¿Dentro del soporte? carpeta, abre un env.rb. Este código configurará nuestro entorno de prueba. Esto es lo que necesitamos:

 require_relative "? /? / myapp" require "Capybara" require "Capybara / cucumber" require "rspec" World do Capybara.app = MyApp include Capybara :: DSL include RSpec :: Matchers end

Esto requiere las diferentes bibliotecas que necesitamos, y utiliza incluir para cargar sus métodos en nuestro entorno. ¿Qué es esta Capibara que estamos usando? Básicamente, es la funcionalidad que nos permite utilizar nuestra aplicación web, para que podamos probarla. Es importante establecer Capibara.app a nuestra aplicación Debería mencionar que, si hiciéramos esto con una aplicación Rails, la mayor parte de esta configuración se realizaría automáticamente por nosotros..

(Nota: en el screencast, yo incluye RSpec :: Expectativas innecesariamente déjalo afuera.)

Está bien, entonces, vamos a escribir algunas pruebas!


Paso 3 Escribiendo las Pruebas

Vamos a empezar con nuestra página de inicio. Abre el archivo home_pages.feature (en la carpeta? características?) y comience con esto:

 Característica: el visor visita la página de inicio Para leer la página Como visor, quiero ver la página de inicio de mi aplicación

Esta es una forma común de iniciar un archivo de características; Realmente no parece código, ¿verdad? Bueno, es Gherkin, un lenguaje específico de dominio (DSL) que "te permite describir el comportamiento del software sin detallar cómo se implementa ese comportamiento". Lo que escribimos hasta ahora no funciona de ninguna manera, pero explica el propósito de la función. Aquí está la estructura general:

 Para [objetivo] Como [rol] quiero [característica]

No tienes que seguir esa plantilla: puedes poner lo que quieras; El propósito es describir la característica. Sin embargo, este parece ser un patrón común..

Luego viene una lista de escenarios que describen la característica. Aquí está el primero:

 Escenario: ver la página de inicio Dado que estoy en la página de inicio Luego debería ver "Esta es la página de inicio".

Cada escenario puede tener hasta tres partes: Dados, Cuandos, y Entoncess:

  • Dado - Dado las líneas describen qué condición previa debe existir.
  • Cuando - Cuando las líneas describen las acciones que tomas.
  • Entonces - Entonces las líneas describen el resultado.

Tambien hay Y líneas, que hacen lo que hace la línea por encima de ellos. Por ejemplo:

 Dado que estoy en la página de inicio Y me registré, debería ver "¡Bienvenido de nuevo!" Y debería ver "Configuración"

En este caso, la primera Y la línea actúa como Dado línea, y el segundo actúa como un Entonces línea.

Veremos unos pocos Cuando líneas en breve. Pero ahora mismo, vamos a correr esa prueba. Para hacer eso, corre Pepino en la terminal Probablemente veas algo como esto:

Los archivos de características de pepino se escriben para ser legibles para no programadores, por lo que tenemos que "implementar definiciones de pasos para pasos no definidos". Afortunadamente, Pepino nos da algunos fragmentos para comenzar.

Mirando estos fragmentos, puedes ver cómo funcionará esto. Cada paso coincide con una expresión regular. Cualquier valor citado será capturado y pasado como un parámetro de bloque. Dentro del bloque, hacemos lo que esperamos que suceda como resultado de ese paso. Esto podría ser un código de configuración en Dado pasos, algunos cálculos o acciones en Cuando pasos, y una comparación en Entonces pasos.

Cucumber cargará los archivos en la carpeta? Features / step_definitions? para los pasos, así que vamos a crear? sinatra_steps.rb? Archivo y agregar estos dos pasos:

 Dado / ^ Estoy en la página de inicio $ / do visit "/" end Then / ^ Debería ver "([^"] *) "$ / do | text | page. Deberíamos tener_content text end

En este pequeño fragmento aquí, estamos usando Cucumber, Rspec y Capybara. En primer lugar, tenemos el pepino. Dado y Entonces método de llamadas. En segundo lugar, estamos utilizando los métodos de capibara. visitar (para visitar una URL) y has_content?. Pero no ves la llamada a has_content? porque hemos cargado los comparadores RSpec, por lo que podemos hacer que nuestras pruebas se lean como lo harían con Rspec. Si quisiéramos dejar fuera RSpec, simplemente escribiríamos page.has_content? texto.

Ahora si corres Pepino De nuevo, verás que nuestras pruebas pasan:

Agreguemos dos escenarios más para nuestra página de inicio:

Escenario: Encuentre el encabezado en la página de inicio Dado que estoy en la página de inicio Luego debería ver "MI APLICACIÓN" en el selector "h1" Escenario: Encuentre el enlace al formulario Dado que estoy en la página de inicio Luego debería ver "Registrarse" para nuestro boletín ". en un enlace

Estos requieren dos más Entonces Pasos, como verás si intentas ejecutar esto. Añadir estos a sinatra_steps.rb:

 Entonces / ^ debería ver "([^"] *) "en el selector" ([^ "] *)" $ / do | text, selector | page.should have_selector select, content: text end Then / ^ Debería ver "([^"] *) "en un enlace $ / do | text | page.should have_link text end

Debería poder decir lo que están haciendo: el primero busca el texto dentro de un determinado elemento de la página. El segundo busca un enlace con el texto dado (sí, podría haber hecho Entonces debería ver "¿Registrarse?" En el selector "a", pero quería que tuvieras otro método Capybara / Rspec)

De nuevo, corre Pepino; Verás pasar todas nuestras pruebas:

Abramos ahora? Features / form_page.feature ?; tirar esto allí

 Característica: el visor se registra para recibir el boletín informativo Para recibir el programa de noticias Como usuario del sitio web quiero poder registrarme para el boletín informativo Escenario: Ver la página del formulario Dado que estoy en "/ form" Luego debería ver "Completar este formulario para recibir nuestro boletín ". Escenario: Llene el formulario Dado que estoy en "/ form" Cuando relleno "nombre" con "John Doe" Y relleno "correo electrónico" con "[email protected]" Y hago clic en "Registrarse!" Luego debería ver "Hola, John Doe. Recibirá un boletín por correo electrónico en [email protected]"

El primer escenario aquí es bastante simple, aunque necesitamos escribir el Dado paso para es Probablemente puedas averiguar cómo hacerlo ahora:

 Dado / ^ Estoy en "([^"] *) "$ / do | ruta | visita final de ruta

El segundo es un poco más profundo. Por primera vez, estamos usando Cuando pasos (recuerda, el Y pasos que siguen los Cuando paso son también Cuando pasos). Es bastante obvio lo que esos Cuando Los pasos deben seguir, pero ¿cómo hacemos eso en el código de Ruby? Afortunadamente, Capybara tiene algunos métodos prácticos para ayudar:

 Cuando / ^ Relleno "([^"] *) "con" ([^ "] *)" $ / do | elemento, texto | Elemento fill_in, con: final de texto Cuando / ^ hago clic en "([^"] *) "$ / do | element | click_on end de elemento

Estamos usando el fill_in Método, que toma el nombre o el atributo de identificación de un elemento en la página. Tambien estamos usando haga clic en, que hará clic en el elemento con el texto, id o valor dado. También están los más específicos. click_link y botón de clic. Para ver más, echa un vistazo al Léame de Capibara. Navegar alrededor del? DSL? Sección para ver más de los métodos que ofrece Capibara..

Cuando corres Pepino Ahora, deberías hacerte todas nuestras pruebas, aprobando:


Conclusión

Date cuenta de que lo que estamos probando aquí es la IU justa, no el código subyacente. Si nuestro código realmente lo inscribió en el boletín, también tendríamos que probar el código que agrega el nombre y la dirección de correo electrónico a nuestra base de datos, etc. Solo porque vemos lo que se supone que debemos ver, no significa En realidad recibiré el boletín, ¿verdad? Eso debe ser probado por separado.

Y eso es probar aplicaciones web con emparejadores de pepino, capibara y Rspec. Como he mencionado, echa un vistazo a la documentación de Capybara para más!