Tutoriel précédent : Developing Discourse Plugins - Part 5 - Add an admin interface
Le saviez-vous ? 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 avons une suite qunit qui inclut ember-testing.
Si vous avez configuré un environnement de développement, en visitant 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 être testée dans une petite fenêtre en bas à droite :
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
Tout d’abord, assurez-vous d’avoir la dernière version de Discourse. La possibilité d’exécuter des tests d’acceptation depuis des plugins est une fonctionnalité relativement nouvelle ; si vous n’utilisez 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 seul fichier à votre plugin. Créez le 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("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 ce 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 vous recommande vivement de lire la documentation d’Ember sur les tests d’acceptation, car elle contient beaucoup d’informations précieuses.
Dans chaque test que nous écrivons, nous devons assert quelque chose. Dans notre test, nous voulons faire plusieurs affirmations pour vérifier si le tentacule est caché au départ, puis affiché uniquement après avoir cliqué sur le bouton.
Nous voulons définir un ensemble d’actions à effectuer avant qu’une affirmation 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 est celle qui affiche le tentacule.
Après avoir visité la page où le bouton du tentacule violet apparaît, nous voulons vérifier si le bouton est visible sur la page et si l’image du tentacule n’existe pas encore.
Cela se fait par les affirmations 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 ne contenait pas l’identifiant d’élément #show-tentacle dans le modèle Handlebars. Consultez la dernière version pour suivre !
Une fois ces tests passés, il est temps de tester l’interaction.
La prochaine commande est await click('#show-tentacle');, qui indique à notre framework de test que nous voulons cliquer sur le bouton et afficher le tentacule.
Après avoir simulé un clic sur le bouton, nous pouvons vérifier si le tentacule apparaît en affirmant :
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Ce n’est pas si 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 voir très rapidement le tentacule violet apparaître et tous les tests passer.
Si vous souhaitez exécuter les tests qunit du plugin en ligne de commande avec PhantomJS, vous pouvez lancer :
rake plugin:qunit['purple-tentacle']
(où purple-tentacle est le nom du dossier de votre plugin)
Déboguer vos tests
Alors que vous écrivez vos plugins, vos tests peuvent vous aider à identifier des problèmes. Lorsque vous développez vos tests ou si vous apportez des modifications au code de votre plugin, les tests peuvent échouer. Pour comprendre pourquoi, Ember propose de 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 au point où vous avez ajouté pauseTest(). Cela vous donnera la possibilité d’inspecter la page ou de voir toute erreur pour aider au débogage.
Où aller ensuite
Je déteste avoir l’air d’un disque rayé, mais la documentation d’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 avons pas mal d’exemples là-dedans que vous pouvez étudier.
Bon testage !
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 versionné – proposez des modifications sur GitHub.
it is an Admin page
)