Tutoriel précédent : Developing Discourse Plugins - Part 5 - Add an admin interface
Saviez-vous que Discourse dispose de deux grandes suites de tests pour sa base de code ? Côté serveur, notre code Ruby utilise une suite de tests basée sur rspec. Pour l’application navigateur, nous disposons d’une suite qunit qui intègre ember-testing.
En supposant que vous ayez configuré un environnement de développement, si vous visitez l’URL http://localhost:3000/tests, vous lancerez la suite de tests JavaScript dans votre navigateur. Un aspect amusant est que vous pouvez voir l’application tester dans une miniature en bas à droite de l’écran :
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 :
Ajouter un test d’acceptation dans votre plugin
D’abord, assurez-vous d’avoir la dernière version de Discourse en local. La possibilité d’exécuter des tests d’acceptation depuis les plugins est une fonctionnalité relativement récente, et si vous n’avez pas 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 le fichier suivant :
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("Le bouton Purple tentacle fonctionne", async function (assert) {
await visit("/admin/plugins/purple-tentacle");
assert.ok(exists("#show-tentacle"), "il affiche le bouton purple tentacle");
assert.ok(!exists(".tentacle"), "la tentacule n'est pas encore affichée");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "la tentacule veut régner sur le monde !");
});
});
J’ai essayé d’écrire le test de manière claire, mais cela peut être un peu déroutant si vous n’avez jamais écrit de test d’acceptation auparavant. Je recommande vivement de lire la documentation Ember sur les tests d’acceptation, car elle contient beaucoup d’excellentes informations.
Dans chaque test que nous écrivons, nous devons faire une assert (vérification). Dans notre test, nous voulons effectuer quelques vérifications pour nous assurer que la tentacule est initialement masquée, puis affichée uniquement après avoir cliqué sur le bouton.
Nous voulons définir un ensemble d’actions à effectuer avant qu’une vérification ne soit faite. Pour cela, nous utilisons le mot-clé await. En utilisant ce mot-clé, nous attendons que l’exécution de chaque helper asynchrone se termine d’abord.
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 affiche la tentacule.
Après avoir visité la page où apparaît le bouton purple tentacle, nous voulons vérifier si nous pouvons voir que le bouton existe sur la page et que l’image de la tentacule n’existe pas encore.
Cela est fait par les vérifications suivantes :
assert.ok(exists("#show-tentacle"), "il affiche le bouton purple tentacle");
assert.ok(!exists(".tentacle"), "la tentacule n'est pas encore affichée");
P.-S. l’ancienne version du plugin purple-tentacle n’avait pas l’identifiant d’élément #show-tentacle dans le template handlebars. Consultez la dernière version pour suivre le guide !
Une fois ces tests passés, 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 faisant la vérification suivante :
assert.ok(exists(".tentacle"), "la tentacule veut régner sur le monde !");
Pas trop mal, n’est-ce pas ? Vous pouvez essayer le test vous-même en visitant http://localhost:3000/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 passer.
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éboguer vos tests
Lorsque vous écrivez vos plugins, vos tests peuvent vous aider à identifier des problèmes dans votre plugin. Lorsque vous développez vos tests ou si vous apportez des modifications au code de votre plugin, les tests peuvent échouer. Pour aider à comprendre pourquoi, Ember propose quelques bons helpers : pauseTest() et resumeTest().
Pour les utiliser, ajoutez await pauseTest() dans votre code de test à l’endroit où vous souhaitez que le test se mette en pause. Maintenant, lorsque vous exécutez votre test dans le navigateur, le test se mettra automatiquement en pause à l’endroit où vous avez ajouté pauseTest(). Cela vous donnera l’occasion d’inspecter la page ou de voir les erreurs pour aider au débogage.
Où aller maintenant
Je déteste avoir l’air d’un disque rayé, mais la documentation Ember sur les tests est excellente. Vous voudrez peut-être aussi voir comment Discourse teste diverses fonctionnalités en parcourant les tests dans notre répertoire de tests javascript. Nous y avons pas mal d’exemples dont vous pouvez vous inspirer.
Bon test !
Plus dans la série
Partie 1 : Bases des plugins
Partie 2 : Sorties de plugin (Outlets)
Partie 3 : Paramètres du site
Partie 4 : Configuration git
Partie 5 : Interfaces administrateur
Partie 6 : Ce sujet
Partie 7 : Publiez votre plugin
Ce document est sous contrôle de version - suggérez des modifications sur github.
it is an Admin page
)