Las pruebas automatizadas son una excelente manera de proteger tu código contra regresiones futuras. Muchas personas están familiarizadas con cómo hacerlo en nuestra base de código de Rails con rspec, pero el lado de Javascript puede resultar un poco enigmático para algunos.
Afortunadamente, estos días es bastante fácil agregar pruebas básicas a tu código de Ember.
Pruebas de componentes
En el tutorial anterior de esta serie, agregamos un componente llamado fancy-snack para mostrar nuestro snack con un fondo desvanecido. Escribamos una prueba para él. Crea el siguiente archivo:
test/javascripts/components/snack-test.js
import componentTest from "helpers/component-test";
moduleForComponent("fancy-snack", { integration: true });
componentTest("test the rendering", {
template: "{{fancy-snack snack=testSnack}}",
setup() {
this.set("testSnack", {
name: "Potato Chips",
description: "Now with extra trans fat!",
});
},
test(assert) {
assert.equal(this.$(".fancy-snack-title h1").text(), "Potato Chips");
assert.equal(
this.$(".fancy-snack-description p").text(),
"Now with extra trans fat!"
);
},
});
Para ejecutar la prueba, abre tu navegador en tu servidor de desarrollo en /qunit?module=component%3Afancy-snack. Tu navegador luego ejecutará las pruebas de componentes y mostrará algo como «2 assertions of 2 passed, 0 failed.»
Ten en cuenta que, mientras estás en la página /qunit, puedes ejecutar otras pruebas. Simplemente puedes seleccionar una nueva prueba desde el menú desplegable Module en la parte superior de la pantalla.
Recorramos la prueba para entender cómo funciona.
La línea template le dice a Ember cómo nos gustaría insertar nuestro componente. Es exactamente el mismo marcado que usarías para colocar el componente en una plantilla de handlebars, así que debería ser familiar:
template: '{{fancy-snack snack=testSnack}}',
Ten en cuenta que está pasando testSnack como el parámetro snack. Esto está definido en el método setup():
setup() {
this.set('testSnack', {
name: 'Potato Chips',
description: 'Now with extra trans fat!'
});
},
Solo he puesto algunos datos ficticios. Eso es todo lo que necesitamos hacer para que Ember renderice el componente. Finalmente, tenemos un par de aserciones en el método test():
test(assert) {
assert.equal(this.$('.fancy-snack-title h1').text(), 'Potato Chips');
assert.equal(this.$('.fancy-snack-description p').text(), 'Now with extra trans fat!');
}
Si usas this.$(), obtienes acceso a un selector de jQuery en tu plantilla. Las aserciones aquí usan ese selector para obtener el valor del título del snack y la descripción del snack y compararlos con lo que esperamos. Si los valores coinciden, las aserciones se aprobarán y nuestra prueba funcionará correctamente.
Conviene señalar que no necesitas probar cada pequeño detalle en un componente como este. Deberías usar cierto discernimiento e intentar averiguar qué cosas en tu código son propensas a romperse o causar confusión a otros desarrolladores en el futuro. Si pruebas demasiadas cosas en tu plantilla, significará que será un dolor de cabeza para alguien más en el futuro cambiarlo. Comienza por lo pequeño, probando las cosas más obvias, y con el tiempo te acostumbrarás.
Pruebas de aceptación
Las pruebas de aceptación a menudo son más fáciles de escribir y pueden ser más potentes que las pruebas de componentes, ya que prueban tu aplicación de la misma manera que lo haría un usuario en su navegador. A menudo comienzo con pruebas de aceptación y, luego, si estoy creando un componente complicado, también agregaré pruebas para él.
Así es como podemos escribir una prueba de aceptación que visitará nuestra ruta /admin/snack y confirmará que el snack se renderizó:
test/javascripts/acceptance/snack-test.js
import { acceptance } from "helpers/qunit-helpers";
acceptance("Snack");
test("Visit Page", function (assert) {
visit("/admin/snack");
andThen(() => {
assert.ok(exists(".fancy-snack-title"), "the snack title is present");
});
});
El test() en este caso casi se lee como inglés. El primer comando dice visitar la URL de /admin/snack. Después de eso, hay un método andThen(). Este método es necesario para asegurarse de que todo el trabajo en segundo plano esté terminado antes de que continúen las pruebas. Dado que el código de Javascript y Ember es asíncrono, necesitamos asegurarnos de que Ember haya terminado todo lo que necesita hacer antes de que se ejecuten nuestras aserciones. Finalmente, prueba si el elemento .fancy-snack-title está presente.
Sin embargo, si ejecutas esta prueba visitando /qunit?module=Acceptance%3A%20Snack, descubrirás que la prueba fallará debido a un error de AJAX.
Si recuerdas, nuestro código incluye tanto un lado de Rails como un lado de Javascript que realizó una solicitud AJAX para obtener sus datos. La prueba de aceptación ejecutó el lado de Javascript, pero no sabía qué hacer para obtener sus datos de Rails.
Para solucionarlo, necesitamos agregar una respuesta falsa, usando la excelente biblioteca pretender. Abre el archivo test/javascripts/helpers/create-pretender.js y busca la línea que dice:
this.get("/admin/plugins", () => response({ plugins: [] }));
Justo debajo, agrega una línea para devolver un objeto de snack falso para que nuestra prueba de aceptación funcione:
this.get("/admin/snack.json", () => {
return response({ name: "snack name", description: "snack description" });
});
Puedes leer el código anterior como «para cualquier solicitud a /admin/snack.json, responde con la siguiente response».
Si actualizas la URL /qunit?module=Acceptance%3A%20Snack, tu prueba de aceptación debería obtener sus datos a través de pretender y las pruebas deberían aprobarse.
Hacia dónde ir desde aquí
Podrías intentar construir una pequeña funcionalidad y agregar pruebas para asegurarte de que funcione. Incluso podrías intentar usar TDD creando tus pruebas antes de escribir cualquier código en el front end. Dependiendo de lo que estés trabajando y de tus preferencias personales, podrías encontrar que esta es una forma más agradable de abordar esto. ¡Buena suerte y feliz codificación 
Este documento está bajo control de versiones - sugiere cambios en github.