Tutorial precedente: Developing Discourse Plugins - Part 5 - Add an admin interface
Sapevate che Discourse dispone di due ampie 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, visitando l’URL http://localhost:3000/tests avvierete l’esecuzione della suite di test JavaScript nel vostro browser. Un aspetto divertente è che potete osservare i test in azione in una finestra in miniatura nell’angolo in basso a destra:
L’applicazione Discourse è costruita con molti test che inizieranno a eseguirsi quando visiterete l’URL /tests. Potrebbe quindi essere utile filtrare i test in base al plugin su cui state lavorando. Potete farlo nell’interfaccia cliccando sul menu a discesa Plugin e selezionando il vostro plugin:
Aggiungere un test di accettazione al vostro plugin
Innanzitutto, assicuratevi di aver scaricato l’ultima versione di Discourse. 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 quanto 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"), "mostra il pulsante Purple Tentacle");
assert.ok(!exists(".tentacle"), "il tentacolo non è ancora visibile");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "il tentacolo vuole dominare 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. Raccomando fortemente 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 poi mostrato solo dopo aver cliccato il pulsante.
Vogliamo definire una serie di azioni da eseguire prima di fare una verifica. Per farlo utilizziamo la parola chiave await. Usando questa parola chiave, attendiamo che l’esecuzione di ciascun helper asincrono si completi prima di procedere.
La nostra prima azione importante è: await visit("/admin/plugins/purple-tentacle");. Questo indica 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 Purple Tentacle, vogliamo verificare se il pulsante è presente sulla pagina e se l’immagine del tentacolo non è ancora presente.
Questo viene fatto dalle seguenti verifiche:
assert.ok(exists("#show-tentacle"), "mostra 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 mostrare il tentacolo.
Dopo aver simulato un clic sul pulsante, possiamo verificare se il tentacolo appare facendo la seguente verifica:
assert.ok(exists(".tentacle"), "il tentacolo vuole dominare 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 tentacolo viola e tutti i test dovrebbero passare.
Se volete eseguire i test qunit del plugin dalla riga di comando usando 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 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 capire il motivo, Ember offre alcuni helper utili: pauseTest() e resumeTest().
Per utilizzarli, aggiungete await pauseTest() nel codice del vostro test nel punto in cui volete che il test si interrompa. Ora, quando eseguite il 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 il debug dei 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: Nozioni di base sui plugin
Parte 2: Plugin Outlets
Parte 3: Impostazioni del sito
Parte 4: Configurazione git
Parte 5: Interfacce di amministrazione
Parte 6: Questo argomento
Parte 7: Pubblicare il vostro plugin
Questo documento è sotto controllo versione - suggerite modifiche su github.
it is an Admin page
)