Tutorial precedente: Developing Discourse Plugins - Part 5 - Add an admin interface
Sapevi che Discourse dispone di due grandi suite di test per la sua base di codice? Sul lato server, il nostro codice Ruby ha una suite di test che utilizza rspec. Per l’applicazione browser, disponiamo di una suite qunit che include ember-testing.
Presumendo di avere un ambiente di sviluppo configurato, se visiti l’URL http://localhost:3000/tests inizierai a eseguire la suite di test JavaScript nel tuo browser. Un aspetto divertente è che puoi vederla testare l’applicazione in una finestra in miniatura nell’angolo in basso a destra:
L’applicazione Discourse è costruita con molte test che inizieranno a essere eseguite quando visiti l’URL /tests. Quindi potrebbe essere utile filtrare i tuoi test in base al plugin su cui stai lavorando. Puoi farlo nell’interfaccia facendo clic sul menu a discesa Plugin e selezionando il tuo plugin:
Aggiunta di un test di accettazione nel tuo plugin
Prima di tutto, assicurati di avere la versione più recente di Discourse clonata. La possibilità di eseguire test di accettazione dai plugin è una funzionalità relativamente nuova e, se non cloni la versione più recente, i tuoi test non verranno visualizzati.
Per questo articolo scriverò un test di accettazione per il plugin purple-tentacle che abbiamo creato nella parte 5 di questa serie.
Aggiungere un test di accettazione è semplice come aggiungere un file al tuo plugin. Crea il seguente:
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!");
});
});
Ho cercato di scrivere il test in modo chiaro, ma potrebbe essere un po’ confuso se non hai mai scritto un test di accettazione prima d’ora. Ti raccomando vivamente di leggere la documentazione di Ember sui test di accettazione, poiché contiene molte informazioni utili.
In ogni test che scriviamo, dobbiamo assert qualcosa. Nel nostro test, vogliamo effettuare alcune asserzioni per verificare se il tentacolo è nascosto inizialmente e poi mostrato solo dopo aver fatto clic sul pulsante.
Vogliamo definire un set di azioni da eseguire prima che venga fatta un’asserzione. Per farlo utilizziamo la parola chiave await. Utilizzando quella parola chiave, attendiamo che l’esecuzione di ogni helper asincrono finisca prima di procedere.
La nostra prima azione importante è: await visit("/admin/plugins/purple-tentacle");. Questo dice al nostro test di navigare a quell’URL nella nostra applicazione. Quell’URL era quello che mostrava il tentacolo.
Dopo aver visitato la pagina in cui appare il pulsante del tentacolo viola, vogliamo verificare se il pulsante esiste sulla pagina e che l’immagine del tentacolo non esista ancora.
Ciò viene fatto dalle seguenti asserzioni:
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
P.S. la versione precedente del plugin purple-tentacle non aveva l’id dell’elemento #show-tentacle nel template handlebars. Controlla la versione più recente per seguire la guida!
Una volta superati quei test, è il momento di testare l’interazione.
Il comando successivo è await click('#show-tentacle'); che dice al nostro framework di test che vogliamo fare clic sul pulsante e mostrare il tentacolo.
Dopo aver simulato un clic sul pulsante, possiamo verificare se il tentacolo appare facendo un’asserzione:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Non è male, vero? Puoi provare il test tu stesso visitando http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 sulla tua macchina di sviluppo. Dovresti vedere rapidamente apparire il tentacolo viola e tutti i test verranno superati.
Se vuoi eseguire i test qunit del plugin da riga di comando utilizzando PhantomJS, puoi eseguire
rake plugin:qunit['purple-tentacle']
(dove purple-tentacle è il nome della cartella del tuo plugin)
Debug dei tuoi test
Mentre sviluppi i tuoi plugin, i tuoi test possono aiutarti a identificare problemi nel tuo plugin. Quando stai sviluppando i tuoi test o se apporti modifiche al codice del tuo plugin, i test potrebbero fallire. Per aiutare a capire il motivo, Ember ha alcuni helper utili: pauseTest() e resumeTest().
Per farne uso, aggiungi await pauseTest() nel codice del tuo test nel punto in cui desideri che il test si metta in pausa. Ora, quando esegui il tuo test nel browser, il test si metterà automaticamente in pausa nel punto in cui hai aggiunto pauseTest(). Questo ti darà la possibilità di ispezionare la pagina o visualizzare eventuali errori per aiutarti a risolvere i problemi.
Dove andare da qui
Odia di sembrare un disco rotto, ma la documentazione di Ember sui test è eccellente. Potresti anche voler vedere come Discourse testa varie funzionalità sfogliando i test nella nostra directory dei test javascript. Abbiamo diversi esempi lì da cui puoi imparare.
Buon testing!
Altro nella serie
Parte 1: Plugin Basics
Parte 2: Plugin Outlets
Parte 3: Site Settings
Parte 4: git setup
Parte 5: Admin interfaces
Parte 6: Questo argomento
Parte 7: Publish your plugin
Questo documento è versionato - suggerisci modifiche su github.
it is an Admin page
)