Ciao!
Sto lavorando attualmente a un’estensione/plugin per Markdown che aggiunge un numero considerevole di tag BBCode, e sto cercando di scrivere test di accettazione QUnit per essi (mi sono stancato davvero di controllarli costantemente a mano, e sono molti).
I tag in questione sono un misto tra tag semplici che applicano solo HTML e tag complessi che hanno gestori di eventi ad essi associati. Di conseguenza, devo testare sia l’HTML generato (cooked) che i gestori di eventi.
Ho incontrato diversi test di accettazione per estensioni Markdown (in particolare local-dates-composer-test.js.es6, spoiler-button-test.js-es6, checklist-test.js.es6, e pretty-text-test.js), che ho utilizzato come riferimento. Questi possono essere ampiamente suddivisi in due modi per eseguire il test:
- Simulare l’apertura del sito, la creazione di un nuovo argomento e l’inserimento di testo nell’editor, ottenendo l’output tramite un selettore sul DOM. (local-dates-composer-test.js.es6, spoiler-button-test.js-es6)
- Creare un’istanza di Pretty Text per elaborare il testo sul momento e confrontare l’HTML risultante. (checklist-test.js.es6, pretty-text-test.js) (il test per la checklist sembra anche creare un’istanza del modello Post per testare la gestione degli eventi e, nel complesso, sembra testare davvero l’inizializzatore).
Ho provato entrambi i metodi e sono riuscito più o meno a farli funzionare. Il primo metodo è abbastanza diretto e sono riuscito a ottenere ciò che volevo, a scapito di un tempo maggiore rispetto al secondo. Con il secondo metodo sono riuscito a farlo con successo in un tempo di test molto più breve, ma sto ricevendo un errore strano.
Ecco i miei codici e risultati:
Metodo 1: Simulare l'apertura del sito
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("Metodo 1", function (needs) {
needs.user();
test("elaborazione via sito", async function (assert) {
await visit("/");
await click("#create-topic");
assert.cooked("hello world", "<p>hello world</p>", "questo test funziona");
});
});
Metodo 2: Creare un'istanza di Pretty Text
import { acceptance} from "discourse/tests/helpers/qunit-helpers";
import { cookAsync } from "discourse/lib/text";
acceptance("Metodo 2", function (needs) {
needs.user();
test("elaborazione usando cookAsync", async function (assert) {
const cooked = await cookAsync("hello world", {});
assert.equal(cooked, "<p>hello world</p>", "questo test funziona anch'esso");
});
});
Al momento, li sto usando solo per testare una semplice elaborazione del testo “hello world”. Li ho testati contro i miei tag personalizzati e funzionano.
Penso che mi stia sfuggire qualcosa nel metodo 2, dato l’errore afterEach failed ....: this.keyTrapper is null. Comunque, entrambi i metodi funzionano e posso vedere che per test semplici dell’HTML dovrei usare il metodo 2, mentre per i test che coinvolgono la gestione degli eventi dovrei usare il metodo 1.
Dato che molti dei miei tag sono solo HTML semplice, voglio usare il metodo 2 insieme al metodo 1 durante i test, per risparmiare tempo. Vorrei sapere cosa mi manca che sta causando quell’errore, o se esiste un modo ancora migliore per scrivere questi test in generale.