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 divertente è che puoi vederla testare l’applicazione in una finestra in miniatura nell’angolo in basso a destra:
L’applicazione Discourse è costruita con moltissimi test che inizieranno ad essere eseguiti quando visiti l’URL /tests. Quindi può 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 Acceptance Test nel tuo Plugin
Innanzitutto, assicurati di avere l’ultima versione di Discourse scaricata. La possibilità di eseguire Acceptance test dai plugin è una funzionalità relativamente nuova e se non scarichi l’ultima versione i tuoi test non verranno visualizzati.
Per questo articolo scriverò un acceptance test per il plugin purple-tentacle che abbiamo scritto nella parte 5 di questa serie.
Aggiungere un acceptance test è 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("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 che fosse chiaro, ma potrebbe essere un po’ confuso se non hai mai scritto un acceptance test prima. Ti consiglio vivamente di leggere la documentazione di Ember sui test di accettazione poiché contiene molte informazioni utili.
In ogni test che scriviamo, dobbiamo assert (affermare) qualcosa. Nel nostro test, vogliamo fare alcune asserzioni per verificare se il tentacolo è inizialmente nascosto e poi mostrato solo dopo aver cliccato sul 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 pulsante del tentacolo viola.
Dopo aver visitato la pagina in cui appare il pulsante del tentacolo viola, vogliamo verificare se possiamo vedere che il pulsante è presente sulla pagina e che l’immagine del tentacolo non è ancora presente.
Questo è 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 l’ultima versione per seguire l’esempio!
Una volta che quei test sono superati è 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 controllare se il tentacolo appare asserendo:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Non è male, vero? Puoi provare il test tu stesso 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 dovrebbero essere superati.
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 sviluppi i tuoi test o apporti modifiche al codice del tuo plugin, i test potrebbero fallire. Per aiutare a capire il perché, Ember ha alcuni bei helper: pauseTest() e resumeTest().
Per utilizzarli, aggiungi await pauseTest() all’interno del codice del 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.
Da dove andare ora
Odio sembrare un disco rotto ma la documentazione di Ember sui test è eccellente. Potresti anche voler vedere come Discourse testa varie funzionalità navigando nei 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
)