Tutorial anterior: Developing Discourse Plugins - Part 5 - Add an admin interface
¿Sabías que Discourse tiene dos grandes suites de pruebas para su base de código? En el lado del servidor, nuestro código Ruby tiene una suite de pruebas que utiliza rspec. Para la aplicación del navegador, tenemos una suite qunit que incluye ember-testing.
Asumiendo que tienes un entorno de desarrollo configurado, si visitas la URL http://localhost:3000/tests comenzarás a ejecutar la suite de pruebas JavaScript en tu navegador. Un aspecto interesante es que puedes ver cómo prueba la aplicación en una ventana en miniatura en la esquina inferior derecha:
La aplicación de Discourse está construida con muchas pruebas que comenzarán a ejecutarse cuando visites la URL /tests. Así que puede ser útil filtrar tus pruebas por el plugin en el que estás trabajando. Puedes hacerlo en la interfaz haciendo clic en el menú desplegable Plugin y seleccionando tu plugin:
Añadir una prueba de aceptación en tu plugin
Primero, asegúrate de tener la última versión de Discourse clonada. Poder ejecutar pruebas de aceptación desde plugins es una característica relativamente nueva, y si no clonas la última versión, tus pruebas no aparecerán.
Para este artículo, voy a escribir una prueba de aceptación para el plugin purple-tentacle que creamos en la parte 5 de esta serie.
Añadir una prueba de aceptación es tan fácil como añadir un archivo a tu plugin. Crea lo siguiente:
test/javascripts/acceptance/purple-tentacle-test.js
import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
import { click, visit } from "@ember/test-helpers";
import { test } from "qunit";
acceptance("Purple Tentacle", function (needs) {
needs.settings({ purple_tentacle_enabled: true });
needs.user();
test("Purple tentacle button works", async function (assert) {
await visit("/admin/plugins/purple-tentacle");
assert.ok(exists("#show-tentacle"), "muestra el botón del tentáculo púrpura");
assert.ok(!exists(".tentacle"), "el tentáculo aún no se muestra");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "¡el tentáculo quiere gobernar el mundo!");
});
});
Intenté escribir la prueba de una manera clara, pero puede ser un poco confusa si nunca has escrito una prueba de aceptación antes. Muy recomiendo que leas la documentación de Ember sobre pruebas de aceptación, ya que tiene mucha información útil.
En cada prueba que escribamos, necesitamos assert algo. En nuestra prueba, queremos hacer algunas afirmaciones para verificar si el tentáculo está oculto inicialmente y luego se muestra solo después de hacer clic en el botón.
Queremos definir un conjunto de acciones a realizar antes de hacer una afirmación. Para ello, usamos la palabra clave await. Al usar esa palabra clave, esperamos a que termine la ejecución de cada helper asíncrono primero.
Nuestra primera acción importante es: await visit("/admin/plugins/purple-tentacle");. Esto le indica a nuestra prueba que navegue a esa URL en nuestra aplicación. Esa URL era la que mostraba el tentáculo.
Después de visitar la página donde aparece el botón del tentáculo púrpura, queremos verificar si podemos ver que el botón existe en la página y que la imagen del tentáculo aún no existe.
Eso se hace mediante las siguientes afirmaciones:
assert.ok(exists("#show-tentacle"), "muestra el botón del tentáculo púrpura");
assert.ok(!exists(".tentacle"), "el tentáculo aún no se muestra");
P.D. la versión anterior del plugin purple-tentacle no tenía el id de elemento #show-tentacle en la plantilla handlebars. ¡Consulta la última versión para seguir el tutorial!
Una vez que esas pruebas pasen, es momento de probar la interacción.
El siguiente comando es await click('#show-tentacle'); que le indica a nuestro framework de pruebas que queremos hacer clic en el botón y mostrar el tentáculo.
Después de simular un clic en el botón, podemos verificar si aparece el tentáculo afirmando:
assert.ok(exists(".tentacle"), "¡el tentáculo quiere gobernar el mundo!");
¿No está tan mal, verdad? Puedes probar la prueba tú mismo visitando http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 en tu máquina de desarrollo. Deberías ver rápidamente aparecer el tentáculo púrpura y todas las pruebas pasarán.
Si quieres ejecutar las pruebas qunit del plugin en la línea de comandos usando PhantomJS, puedes ejecutar
rake plugin:qunit['purple-tentacle']
(donde purple-tentacle es el nombre de la carpeta de tu plugin)
Depurando tus pruebas
Mientras escribes tus plugins, tus pruebas pueden ayudarte a identificar problemas en tu plugin. Cuando estás desarrollando tus pruebas o si haces cambios en el código de tu plugin, las pruebas pueden fallar. Para ayudar a entender por qué, Ember tiene algunos helpers útiles: pauseTest() y resumeTest().
Para hacer uso de ellos, añade await pauseTest() dentro de tu código de prueba donde quieras que la prueba se pause. Ahora, cuando ejecutes tu prueba en el navegador, la prueba se pausará automáticamente en el punto donde añadiste pauseTest(). Esto te dará la oportunidad de inspeccionar la página o ver cualquier error para ayudar a depurar problemas.
Hacia dónde ir desde aquí
Odio sonar como un disco rayado, pero la documentación de Ember sobre pruebas es excelente. También podrías querer ver cómo Discourse prueba varias funcionalidades navegando por las pruebas en nuestro directorio de pruebas JavaScript. Tenemos bastantes ejemplos ahí de los que puedes aprender.
¡Feliz pruebas!
Más en la serie
Parte 1: Conceptos básicos de plugins
Parte 2: Puntos de conexión de plugins
Parte 3: Configuraciones del sitio
Parte 4: Configuración de git
Parte 5: Interfaces de administración
Parte 6: Este tema
Parte 7: Publica tu plugin
Este documento está controlado por versiones - sugiere cambios en github.
it is an Admin page
)