Archivo de la etiqueta: testing

Usando Magic Test en Rails

Ayer un amigo me paso un tweet con un screencast que me pareció increíble.

Andrew Culver y Adam Pallozzi crearon la gema Magic Tests, que como se ve en el video, nos puede dar un montón de productividad para crear tests.

Tiene 3 partes que funcionan en conjunto, la primera es la consola, donde ejecutamos los tests, la segunda es el browser, dónde podemos ir haciendo click y la última es el editor donde se va a ir creando nuestro test.

Proyecto de Prueba

Para probar Magic Tests, lo único que hice fue crear un proyecto de Rails 6.1, que usa Postgres y le genere un scaffold de Productos. Siguiendo los siguientes pasos:

rails new testMagicTests -d postgresql
rails g scaffold Products name:string description:string price:integer
rails db:create db:migrate

Por último modifique el archivo routes.rb para que la root_url sea la página de productos. Para eso simplemente agregamos:

root 'products#index'

En este punto podemos probar que nuestra aplicación funcione ejecutando:

rails s

Si accedemos a http://localhost:3000/ deberíamos ver algo como esto

Configurando Magic Tests

Vamos a agregar en nuestro Gemfile, dentro del grupo test la gema magic_tests. A modo de ejemplo les pongo el grupo test completo de mi Gemfile.

group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 3.26'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
gem 'magic_test'
end
view raw Gemfile hosted with ❤ by GitHub

Ahora hacemos bundle install y a continuación vamos a ejecutar el generador de Magic Tests.

rails g magic_test:install

Esto nos va a crear un test en test/system/basics_test.rb.

Una cosa que tenemos que agregar manualmente en views/templates/application.html.rb es

 <%= render 'magic_test/support' if Rails.env.test? %>

Esto no se hace automático, por que es muy dificil de hacerlo, según dicen en el repo de Magic Tests.

El archivo les debería quedar algo así:

<!DOCTYPE html>
<html>
<head>
<title>TestMagicTest</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= render 'magic_test/support' if Rails.env.test? %>
</head>
<body>
<%= yield %>
</body>
</html>
view raw application.html.erb hosted with ❤ by GitHub

Con esto ya tenemos todo lo que necesitamos, ahora vamos a probar como funciona.

Creando nuestro primer test

Para prepararnos vamos a abrir el archivo test/system/basics_test.rb. en el editor de código que usamos y luego ejecutamos el siguiente comando en la consola.

MAGIC_TEST=1 rails test:system test/system/basics_test.rb

Esto nos va a abrir el browser y en un momento se va a parar la ejecución como si estuviéramos debuggeando. Para ver bien donde estamos parados tenemos que escribir en la consola el comando up y apretar enter.

Ahora vamos al browser y usamos la aplicación haciendo los pasos que queremos que se graben en el test. En mi caso voy a crear un Producto.

Para crear assertions (recuerden que un tests sin assertions no es un test), tenemos un atajo de teclado CTRL + SHIFT + A.

Lo que tenemos que hacer es seleccionar lo que queremos que verificar que aparezca en la pantalla cuando estamos ejecutando el test y luego apretar el atajo. Por ejemplo «Product was successfully created» .

Si quisiéramos podemos seguir probando más cosas y todo lo que hagamos en el browser se va a seguir grabando.

Una vez que terminamos, vamos a la consola, escribimos flush y apretamos enter. Este comando va a tomar todo lo que hicimos en el browser y crear los pasos en el test como por arte de mágia.

Salida en la consola después de ejecutar flush

Y en nuestro test se autocompletó todo 🤯

Ultimos pasos

Solo nos queda borrar las últimas 2 líneas del test. (en la imagen líneas 13 y 14).

La palabra up, creo que queda de cuando la escribimos en la consola para ver donde estábamos. Y magic_test es el método que nos permite colgarnos en el test para poder generar los pasos usando esta gema.

Ahora cada vez que quieras grabar un test o actualizar uno usando esta gema, solo tenés que escribir dentro del test magic_test y en ese punto se va a parar la ejecución para que puedas interactuar con el browser y grabar los pasos que vayas haciendo.

Espero que lo puedan usar en sus proyectos y si bien es una gema muy nueva, ojalá que tenga aceptación en la comunidad.

Nota: No usé el ambiente de Docker que mostré en este post, porque no podríamos estar interactuando con el browser.