Bonjour !
Je travaille actuellement sur une extension/plugin Markdown qui ajoute un grand nombre de balises BBCode, et je souhaite rédiger des tests d’acceptation QUnit pour elles (j’en avais assez de les vérifier constamment à la main, et il y en a beaucoup).
Les balises en question sont un mélange de balises simples qui appliquent directement du HTML et de balises complexes auxquelles sont attachés des gestionnaires d’événements. Par conséquent, je dois tester à la fois le HTML généré (cooked) et les gestionnaires d’événements.
J’ai rencontré plusieurs tests d’acceptation pour des extensions Markdown (notamment local-dates-composer-test.js.es6, spoiler-button-test.js-es6, checklist-test.js.es6, et pretty-text-test.js), que j’ai utilisés comme références. Ces tests peuvent globalement être séparés en deux approches pour les exécuter :
- Simuler l’ouverture du site, la création d’un nouveau sujet et la saisie de texte dans l’éditeur, tout en récupérant la sortie via un sélecteur sur le DOM. (local-dates-composer-test.js.es6, spoiler-button-test.js-es6)
- Créer une instance de Pretty Text pour « cuire » (cook) le texte sur place et comparer le HTML obtenu. (checklist-test.js.es6, pretty-text-test.js) (checklist semble également créer une instance du modèle Post pour tester la gestion des événements, et dans l’ensemble, semble vraiment tester l’initialiseur).
J’ai essayé les deux méthodes et j’ai réussi, plus ou moins. La première méthode est assez simple et j’ai obtenu ce que je voulais, au prix d’un temps d’exécution plus long que pour la deuxième. Pour la deuxième méthode, j’ai réussi à l’implémenter avec un temps de test beaucoup plus rapide, mais je rencontre une erreur étrange.
Voici mes codes et résultats :
Méthode 1 : Simuler l'ouverture du site
import { acceptance, queryAll } from "discourse/tests/helpers/qunit-helpers";
QUnit.assert.cooked = async function (input, expected, message) {
await fillIn(".d-editor-input", input);
const actual = queryAll(".d-editor-preview")[0].innerHTML;
this.pushResult({
result: actual === expected.replace(/\/>/g, ">"),
actual,
expected,
message,
});
};
acceptance("Méthode 1", function (needs) {
needs.user();
test("cuisson via le site", async function (assert) {
await visit("/");
await click("#create-topic");
assert.cooked("hello world", "<p>hello world</p>", "ce test fonctionne");
});
});
Méthode 2 : Créer une instance de Pretty Text
import { acceptance} from "discourse/tests/helpers/qunit-helpers";
import { cookAsync } from "discourse/lib/text";
acceptance("Méthode 2", function (needs) {
needs.user();
test("cuisson via cookAsync", async function (assert) {
const cooked = await cookAsync("hello world", {});
assert.equal(cooked, "<p>hello world</p>", "ce test fonctionne aussi");
});
});
Pour l’instant, je les fais simplement tester une cuisson simple du texte “hello world”. Je l’ai testé avec mes propres balises personnalisées et elles fonctionnent bien.
Je pense qu’il me manque quelque chose pour la méthode 2, car l’erreur afterEach failed ....: this.keyTrapper is null apparaît. Quoi qu’il en soit, les deux méthodes fonctionnent, et je vois que pour des tests simples du HTML, je devrais utiliser la méthode 2, et pour des tests impliquant la gestion des événements, je devrais utiliser la méthode 1.
Puisque beaucoup de mes balises sont simplement du HTML simple, je souhaite utiliser la méthode 2 en parallèle de la méthode 1 lors des tests, pour gagner du temps. J’aimerais savoir ce qui me manque et qui provoque cette erreur, ou s’il existe une meilleure façon d’écrire ces tests dans l’ensemble.