Tutorial precedente: Developing Discourse Plugins - Part 5 - Add an admin interface
Sapevate che Discourse dispone di due ampi 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 potrete osservare i test in esecuzione in una finestra in miniatura nell’angolo in basso a destra:
L’applicazione Discourse è costruita con tanti 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 tendina Plugin e selezionando il vostro plugin:
Aggiungere un test di accettazione al vostro plugin
Prima di tutto, assicuratevi di avere l’ultima versione di Discourse clonata. La possibilità di eseguire test di accettazione dai plugin è una funzionalità relativamente nuova e, se non clonate 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 file:
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 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 effettuare alcune assert (verifiche). Nel nostro test, vogliamo fare alcune verifiche per controllare se il tentacolo è inizialmente nascosto e poi visibile 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. Usando questa parola chiave, attendiamo che l’esecuzione di ogni 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 visualizzava il tentacolo.
Dopo aver visitato la pagina in cui appare il pulsante Purple Tentacle, vogliamo verificare se il pulsante è presente nella pagina e che l’immagine del tentacolo non sia ancora visibile.
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. Controllate l’ultima versione per seguire la guida!
Una volta che questi test superano, è 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 affermando:
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 rapidamente apparire il tentacolo viola e tutti i test supereranno.
Se volete eseguire i test qunit del plugin da 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 sviluppate i vostri plugin, i vostri test possono aiutarvi a identificare problemi nel plugin. Quando state sviluppando i vostri test o se apportate modifiche al codice del vostro plugin, i test potrebbero fallire. Per aiutare a capire il motivo, Ember ha alcuni helper utili: pauseTest() e resumeTest().
Per utilizzarli, aggiungete await pauseTest() all’interno del vostro codice di test nel punto in cui desiderate che il test si pausi. Ora, quando eseguite il vostro test nel browser, il test si fermerà 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.
Dove andare da qui
Odio sembrare un disco rotto, ma la documentazione di Ember sui test è eccellente. Potreste anche voler vedere come Discourse testa varie funzionalità navigando 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 argomento
Parte 7: Publish your plugin
Questo documento è sotto controllo versione - suggerite modifiche su github.
it is an Admin page
)