Tutorial precedente: Developing Discourse Plugins - Part 5 - Add an admin interface
Sapevate che Discourse dispone di due grandi suite di test per il proprio 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 abbiate configurato un ambiente di sviluppo, se visitate l’URL http://localhost:3000/tests inizierete a eseguire la suite di test JavaScript nel vostro browser. Un aspetto divertente è che potete vederla testare l’applicazione in una finestra in miniatura nell’angolo in basso a destra:
L’applicazione Discourse è costruita con un sacco di test che iniziano a essere eseguiti quando visitate l’URL /tests. Quindi potrebbe 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 nel vostro plugin
Per prima cosa, assicuratevi di aver scaricato l’ultima versione di Discourse. La possibilità di eseguire test di accettazione dai plugin è una funzionalità relativamente nuova; se non scaricate l’ultima versione, i vostri test non appariranno.
In 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"), "mostra il pulsante Purple tentacle");
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 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 assertare 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 un insieme di azioni da compiere prima di effettuare un’asserzione. Per farlo, usiamo la parola chiave await. Utilizzando questa parola chiave, attendiamo che l’esecuzione di ogni helper asincrono sia completata prima di procedere.
La nostra prima azione importante è: await visit("/admin/plugins/purple-tentacle");. Questo dice al nostro test di navigare verso quell’URL nella nostra applicazione. Quell’URL è quello che visualizza il tentacolo.
Dopo aver visitato la pagina in cui appare il pulsante Purple tentacle, vogliamo verificare se possiamo vedere il pulsante sulla pagina e se l’immagine del tentacolo non esiste ancora.
Questo viene fatto dalle seguenti asserzioni:
assert.ok(exists("#show-tentacle"), "mostra il pulsante Purple tentacle");
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. Consultate l’ultima versione per seguire il tutorial!
Una volta che questi test passano, è il momento di testare l’interazione.
Il prossimo comando è 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 eseguendo l’asserzione:
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 passeranno.
Se volete eseguire i test qunit del plugin da 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 plugin. Quando state sviluppando i vostri test o se apportate modifiche al codice del plugin, i test potrebbero fallire. Per capire il motivo, Ember offre alcuni utili helper: pauseTest() e resumeTest().
Per utilizzarli, aggiungete await pauseTest() all’interno del codice del test nel punto in cui desiderate che il test si interrompa. Ora, quando eseguite il 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.
Da dove andare avanti
Odio sembrare un disco rotto, ma la documentazione di Ember sui test è eccellente. Potreste anche voler vedere come Discourse testa varie funzionalità esplorando i test nella nostra directory dei test JavaScript. Abbiamo diversi esempi lì dentro da cui potete imparare.
Buoni test!
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: Pubblicate il vostro plugin
Questo documento è sotto controllo versione: suggerite modifiche su GitHub.
it is an Admin page
)