Tutorial precedente: Developing Discourse Plugins - Part 5 - Add an admin interface
Sapevi che Discourse ha 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, abbiamo una suite qunit che include ember-testing.
Supponendo che tu abbia un ambiente di sviluppo configurato, se visiti l’URL http://localhost:4200/tests inizierai ad eseguire la suite di test JavaScript nel tuo browser. Un aspetto interessante è che puoi vederla testare l’applicazione in una finestra in miniatura nell’angolo in basso a destra:
L’applicazione Discourse è costruita con molti test che inizieranno ad essere eseguiti 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 cliccando sul menu a discesa Plugin e selezionando il tuo plugin:
Aggiungere un Test di Accettazione nel tuo Plugin
Innanzitutto, assicurati di avere l’ultima versione di Discourse scaricata. La possibilità di eseguire test di Accettazione dai plugin è una funzionalità relativamente nuova e se non scarichi l’ultima versione i tuoi 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 è facile come aggiungere un file al tuo plugin. Crea quanto segue:
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 del tentacolo viola");
assert.ok(!exists(".tentacle"), "il tentacolo non è ancora mostrato");
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 essere un po’ confuso se non hai mai scritto un test di accettazione prima. Ti raccomando vivamente di leggere la documentazione di Ember sui test di accettazione poiché contiene molte ottime informazioni.
In ogni test che scriviamo, dobbiamo assert (asserire) qualcosa. Nel nostro test, vogliamo fare alcune asserzioni per verificare se il tentacolo è nascosto inizialmente e poi mostrato solo dopo aver cliccato il pulsante.
Vogliamo definire una serie di azioni da intraprendere prima che venga fatta un’asserzione. Per fare ciò usiamo la parola chiave await. Usando quella parola chiave, attendiamo prima che l’esecuzione di ogni helper asincrono sia completata.
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 possiamo vedere che il pulsante sulla pagina esiste e che l’immagine del tentacolo non esiste ancora.
Questo è fatto dalle seguenti asserzioni:
assert.ok(exists("#show-tentacle"), "mostra il pulsante del tentacolo viola");
assert.ok(!exists(".tentacle"), "il tentacolo non è ancora mostrato");
P.S. la versione precedente del plugin purple-tentacle non aveva l’ID elemento #show-tentacle nel template handlebars. Controlla l’ultima versione per seguire l’esempio!
Una volta che quei test passano è il momento di testare l’interazione.
Il comando successivo è await click('#show-tentacle'); che dice 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 asserendo:
assert.ok(exists(".tentacle"), "il tentacolo vuole dominare il mondo!");
Non è male, vero? Puoi provare tu stesso il test visitando http://localhost:4200/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 sulla tua macchina di sviluppo. Dovresti vedere molto rapidamente apparire il tentacolo viola e tutti i test passeranno.
Se vuoi eseguire i test qunit del plugin dalla riga di comando usando PhantomJS, puoi eseguire
rake plugin:qunit['purple-tentacle']
(dove purple-tentacle è il nome della cartella del tuo plugin)
Debug dei tuoi test
Mentre scrivi 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 perché, Ember ha alcuni utili helper: pauseTest() e resumeTest().
Per utilizzarli, aggiungi await pauseTest() all’interno del codice del tuo test dove desideri che il test si interrompa. Ora, quando esegui il tuo test nel browser, il test si metterà in pausa automaticamente nel punto in cui hai aggiunto pauseTest(). Questo ti darà la possibilità di ispezionare la pagina o visualizzare eventuali errori per aiutare nel debug dei problemi.
Dove andare da qui
Odio 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. Ci sono parecchi 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 è controllato tramite versione - suggerisci modifiche su github.
it is an Admin page
)