Tutoriel précédent : Developing Discourse Plugins - Part 5 - Add an admin interface
Saviez-vous que Discourse possède deux grandes suites de tests pour sa base de code ? Du côté serveur, notre code Ruby dispose d’une suite de tests qui utilise rspec. Pour l’application navigateur, nous avons une suite qunit qui inclut ember-testing.
En supposant que vous ayez configuré un environnement de développement, si vous visitez l’URL http://localhost:4200/tests, vous commencerez à exécuter la suite de tests JavaScript dans votre navigateur. Un aspect amusant est que vous pouvez la voir tester l’application dans une fenêtre miniature dans le coin inférieur droit :
L’application Discourse est construite avec beaucoup de tests qui commenceront à s’exécuter lorsque vous visiterez l’URL /tests. Il peut donc être utile de filtrer vos tests par le plugin sur lequel vous travaillez. Vous pouvez le faire dans l’interface en cliquant sur le menu déroulant Plugin et en sélectionnant votre plugin :
Ajout d’un test d’acceptation dans votre plugin
Tout d’abord, assurez-vous d’avoir la dernière version de Discourse extraite. La possibilité d’exécuter des tests d’acceptation à partir de plugins est une fonctionnalité relativement nouvelle, et si vous n’avez pas extrait la dernière version, vos tests n’apparaîtront pas.
Pour cet article, je vais écrire un test d’acceptation pour le plugin purple-tentacle que nous avons créé dans la partie 5 de cette série.
Ajouter un test d’acceptation est aussi simple que d’ajouter un fichier à votre plugin. Créez ce qui suit :
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!");
});
});
J’ai essayé d’écrire le test d’une manière claire, mais il pourrait être un peu déroutant si vous n’avez jamais écrit de test d’acceptation auparavant. Je vous recommande vivement de lire la documentation d’Ember sur les tests d’acceptation car elle contient beaucoup d’informations utiles.
Dans chaque test que nous écrivons, nous devons assert (affirmer) quelque chose. Dans notre test, nous voulons faire quelques assertions pour vérifier si la tentacule est masquée initialement, puis affichée uniquement après avoir cliqué sur le bouton.
Nous voulons définir un ensemble d’actions à entreprendre avant qu’une assertion ne soit faite. Pour ce faire, nous utilisons le mot-clé await. En utilisant ce mot-clé, nous attendons d’abord que l’exécution de chaque aide asynchrone soit terminée.
Notre première action importante est : await visit("/admin/plugins/purple-tentacle");. Cela indique à notre test de naviguer vers cette URL dans notre application. Cette URL était celle qui affichait le bouton de la tentacule violette.
Après avoir visité la page où le bouton de la tentacule violette apparaît, nous voulons vérifier si nous pouvons voir que le bouton sur la page existe et que l’image de la tentacule n’existe pas encore.
Ceci est réalisé par les assertions suivantes :
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
P.S. la version précédente du plugin purple-tentacle n’avait pas l’ID d’élément #show-tentacle dans le template handlebars. Consultez la dernière version pour suivre !
Une fois que ces tests réussissent, il est temps de tester l’interaction.
La commande suivante est await click('#show-tentacle'); qui indique à notre framework de test que nous voulons cliquer sur le bouton et afficher la tentacule.
Après avoir simulé un clic sur le bouton, nous pouvons vérifier si la tentacule apparaît en affirmant :
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Pas trop mal, n’est-ce pas ? Vous pouvez essayer le test vous-même en visitant http://localhost:4200/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 sur votre machine de développement. Vous devriez très rapidement voir la tentacule violette apparaître et tous les tests réussiront.
Si vous souhaitez exécuter les tests qunit du plugin en ligne de commande en utilisant PhantomJS, vous pouvez exécuter
rake plugin:qunit['purple-tentacle']
(où purple-tentacle est le nom du dossier de votre plugin)
Débogage de vos tests
Lorsque vous écrivez vos plugins, vos tests peuvent vous aider à identifier les problèmes dans votre plugin. Lorsque vous développez vos tests ou que vous apportez des modifications au code de votre plugin, les tests peuvent échouer. Pour vous aider à comprendre pourquoi, Ember dispose de quelques aides utiles : pauseTest() et resumeTest().
Pour les utiliser, ajoutez await pauseTest() dans votre code de test là où vous souhaitez que le test s’arrête. Maintenant, lorsque vous exécutez votre test dans le navigateur, le test s’arrêtera automatiquement au point où vous avez ajouté pauseTest(). Cela vous donnera une chance d’inspecter la page ou de visualiser les erreurs pour vous aider à déboguer les problèmes.
Par où commencer ensuite
Je déteste sonner comme un disque rayé, mais la documentation d’Ember sur les tests est excellente. Vous voudrez peut-être également voir comment Discourse teste diverses fonctionnalités en parcourant les tests dans notre répertoire de tests JavaScript. Nous avons pas mal d’exemples là-dedans à partir desquels vous pouvez apprendre.
Bonne chance pour les tests !
Plus dans la série
Partie 1 : Bases des plugins
Partie 2 : Sorties de plugins
Partie 3 : Paramètres du site
Partie 4 : Configuration git
Partie 5 : Interfaces d’administration
Partie 6 : Ce sujet
Partie 7 : Publiez votre plugin
Ce document est contrôlé par version - suggérez des modifications sur github.
it is an Admin page
)