Tutorial precedente: Developing Discourse Plugins - Part 5 - Add an admin interface
Sapevate che Discourse dispone di due grandi suite di test per la sua base di codice? Sul lato server, il nostro codice Ruby utilizza una suite di test basata su rspec. Per l’applicazione browser, abbiamo una suite qunit che include ember-testing.
Assumendo che abbiate configurato un ambiente di sviluppo, se visitate l’URL http://localhost:3000/tests avvierete l’esecuzione della suite di test JavaScript nel vostro browser. Un aspetto divertente è che potete osservare l’applicazione mentre viene testata in una finestra in miniatura nell’angolo in basso a destra:
L’applicazione Discourse è costruita con molti test che inizieranno a essere eseguiti quando visitate l’URL /tests. Potrebbe quindi essere utile filtrare i test in base al plugin su cui state lavorando. Potete farlo nell’interfaccia cliccando il menu a discesa Plugin e selezionando il vostro plugin:
Aggiungere un test di accettazione al vostro plugin
Innanzitutto, assicuratevi di avere l’ultima versione di Discourse scaricata. La possibilità di eseguire test di accettazione dai plugin è una funzionalità relativamente nuova e, se non scaricate l’ultima versione, i vostri test non appariranno.
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 vostro plugin. Create 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("Il pulsante Purple Tentacle funziona", async function (assert) {
await visit("/admin/plugins/purple-tentacle");
assert.ok(exists("#show-tentacle"), "visualizza il pulsante Purple Tentacle");
assert.ok(!exists(".tentacle"), "il tentacolo non è ancora visibile");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "il tentacolo vuole conquistare il mondo!");
});
});
Ho cercato di scrivere il test in modo chiaro, ma potrebbe risultare un po’ confuso se non avete mai scritto un test di accettazione prima. Consiglio vivamente di leggere la documentazione di Ember sui test di accettazione, poiché contiene molte informazioni utili.
In ogni test che scriviamo, dobbiamo assert (verificare) qualcosa. Nel nostro test, vogliamo fare alcune verifiche per controllare se il tentacolo è inizialmente nascosto e se viene visualizzato solo dopo aver cliccato il pulsante.
Vogliamo definire una serie di azioni da eseguire prima di effettuare una verifica. Per farlo utilizziamo la parola chiave await. Utilizzando questa parola chiave, attendiamo che venga completata l’esecuzione di ciascun helper asincrono.
La nostra prima azione importante è: await visit("/admin/plugins/purple-tentacle");. Questo indica al nostro test di navigare verso quell’URL nella nostra applicazione. Quell’URL era quello che visualizzava il tentacolo.
Dopo aver visitato la pagina in cui appare il pulsante Purple Tentacle, vogliamo verificare se il pulsante è presente sulla pagina e che l’immagine del tentacolo non sia ancora presente.
Questo viene fatto dalle seguenti verifiche:
assert.ok(exists("#show-tentacle"), "visualizza il pulsante Purple Tentacle");
assert.ok(!exists(".tentacle"), "il tentacolo non è ancora visibile");
P.S. la versione precedente del plugin purple-tentacle non aveva l’id elemento #show-tentacle nel template handlebars. Scaricate l’ultima versione per seguire la guida!
Una volta superati questi test, è il momento di testare l’interazione.
Il comando successivo è await click('#show-tentacle'); che indica al nostro framework di test che vogliamo cliccare il pulsante e visualizzare il tentacolo.
Dopo aver simulato un clic sul pulsante, possiamo verificare se il tentacolo appare affermando:
assert.ok(exists(".tentacle"), "il tentacolo vuole conquistare il mondo!");
Non è male, vero? Potete provare il test voi stessi visitando http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 sulla vostra macchina di sviluppo. Dovreste vedere molto rapidamente apparire il Purple Tentacle e tutti i test dovrebbero superare.
Se volete eseguire i test qunit del plugin sulla riga di comando utilizzando PhantomJS, potete eseguire
rake plugin:qunit['purple-tentacle']
(dove purple-tentacle è il nome della cartella del vostro plugin)
Debug dei vostri test
Mentre scrivete i vostri plugin, i vostri test possono aiutarvi a identificare problemi nel vostro plugin. Durante lo sviluppo dei test o se apportate modifiche al codice del vostro plugin, i test potrebbero fallire. Per aiutare a capire il motivo, Ember dispone di alcuni utili helper: pauseTest() e resumeTest().
Per utilizzarli, aggiungete await pauseTest() all’interno del codice del vostro test nel punto in cui desiderate che il test si interrompa. Ora, quando eseguite il vostro test nel browser, il test si interromperà automaticamente nel punto in cui avete aggiunto pauseTest(). Questo vi darà la possibilità di ispezionare la pagina o visualizzare eventuali errori per aiutare a risolvere i problemi.
Prossimi passi
Odio sembrare un vinile rotto, ma la documentazione di Ember sui test è eccellente. Potreste anche voler vedere come Discourse testa varie funzionalità sfogliando i test nella nostra directory dei test JavaScript. Abbiamo diversi esempi da cui potete imparare.
Buon testing!
Altri articoli della serie
Parte 1: Plugin Basics
Parte 2: Plugin Outlets
Parte 3: Site Settings
Parte 4: git setup
Parte 5: Admin interfaces
Parte 6: Questo articolo
Parte 7: Publish your plugin
Questo documento è versionato - suggerite modifiche su github.
it is an Admin page
)