Tutorial anterior: Developing Discourse Plugins - Part 5 - Add an admin interface
¿Sabías que Discourse tiene dos grandes conjuntos de pruebas para su base de código? En el lado del servidor, nuestro código Ruby tiene un conjunto de pruebas que utiliza rspec. Para la aplicación del navegador, tenemos un conjunto de pruebas qunit que incluye ember-testing.
Suponiendo que tienes un entorno de desarrollo configurado, si visitas la URL http://localhost:4200/tests comenzarás a ejecutar el conjunto de pruebas de JavaScript en tu navegador. Un aspecto divertido es que puedes verlo probando la aplicación en una ventana miniatura en la esquina inferior derecha:
La aplicación Discourse está construida con muchas pruebas que comenzarán a ejecutarse cuando visites la URL /tests. Por lo tanto, puede ser útil filtrar tus pruebas por el complemento con el que estás trabajando. Puedes hacerlo en la interfaz haciendo clic en el menú desplegable Plugin y seleccionando tu complemento:
Añadir una prueba de aceptación en tu complemento
Primero, asegúrate de tener la última versión de Discourse extraída. Poder ejecutar pruebas de aceptación desde complementos es una característica relativamente nueva, y si no extraes la última versión, tus pruebas no aparecerán.
Para este artículo, voy a escribir una prueba de aceptación para el complemento purple-tentacle que escribimos 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 complemento. 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"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
});
});
Intenté escribir la prueba de una manera que fuera clara, pero podría ser un poco confusa si nunca has escrito una prueba de aceptación antes. Recomiendo encarecidamente que leas la documentación de Ember sobre pruebas de aceptación, ya que tienen mucha información excelente.
En cada prueba que escribimos, necesitamos assert (afirmar) 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 hacer eso, usamos la palabra clave await. Al usar esa palabra clave, esperamos a que la ejecución de cada ayuda asíncrona termine primero.
Nuestra primera acción de importancia es: await visit("/admin/plugins/purple-tentacle");. Esto le dice 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 morado, 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"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
P.D. la versión anterior del complemento purple-tentacle no tenía el ID de elemento #show-tentacle en la plantilla handlebars. ¡Consulta la última versión para seguir el ejemplo!
Una vez que esas pruebas pasen, es hora de probar la interacción.
El siguiente comando es await click('#show-tentacle');, que le dice a nuestro marco 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"), "the tentacle wants to rule the world!");
¿No es tan malo? Puedes probar la prueba tú mismo visitando http://localhost:4200/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 en tu máquina de desarrollo. Deberías ver muy rápidamente aparecer el tentáculo morado y todas las pruebas pasarán.
Si deseas ejecutar las pruebas qunit del complemento desde 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 complemento)
Depuración de tus pruebas
A medida que escribes tus complementos, tus pruebas pueden ayudarte a identificar problemas en tu complemento. Cuando estés desarrollando tus pruebas o si realizas cambios en el código de tu complemento, las pruebas pueden fallar. Para ayudar a entender por qué, Ember tiene algunas ayudas agradables: pauseTest() y resumeTest().
Para hacer uso de ellas, añade await pauseTest() dentro del código de tu prueba donde desees que la prueba se detenga. 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 de JavaScript. Tenemos bastantes ejemplos allí de los que puedes aprender.
¡Felices pruebas!
Más en la serie
Parte 1: Conceptos básicos de complementos
Parte 2: Salidas de complementos
Parte 3: Configuración del sitio
Parte 4: Configuración de git
Parte 5: Interfaces de administración
Parte 6: Este tema
Parte 7: Publica tu complemento
Este documento está controlado por versiones: sugiere cambios en github.
it is an Admin page
)