Vorheriges Tutorial: Developing Discourse Plugins - Part 5 - Add an admin interface
Wussten Sie, dass Discourse zwei große Testsuiten für seinen Codebasis hat? Auf der Serverseite hat unser Ruby-Code eine Testsuite, die rspec verwendet. Für die Browseranwendung haben wir eine qunit-Suite, die ember-testing enthält.
Gehen wir davon aus, dass Sie eine Entwicklungsumgebung eingerichtet haben. Wenn Sie die URL http://localhost:3000/tests aufrufen, starten Sie die JavaScript-Testsuite in Ihrem Browser. Ein lustiger Aspekt ist, dass Sie sehen können, wie die Anwendung in einem Miniaturfenster in der unteren rechten Ecke getestet wird:
Die Discourse-Anwendung wurde mit vielen Tests erstellt, die beim Aufrufen der /tests-URL gestartet werden. Es kann daher hilfreich sein, Ihre Tests nach dem Plugin zu filtern, an dem Sie arbeiten. Sie können das in der Benutzeroberfläche tun, indem Sie auf das Dropdown-Menü Plugin klicken und Ihr Plugin auswählen:
Hinzufügen eines Akzeptanztests in Ihrem Plugin
Zuerst stellen Sie sicher, dass Sie die neueste Version von Discourse ausgecheckt haben. Die Fähigkeit, Akzeptanztests aus Plugins auszuführen, ist eine relativ neue Funktion, und wenn Sie nicht die neueste Version auschecken, werden Ihre Tests nicht angezeigt.
Für diesen Artikel werde ich einen Akzeptanztest für das purple-tentacle-Plugin schreiben, das wir in Teil 5 dieser Serie erstellt haben.
Das Hinzufügen eines Akzeptanztests ist so einfach wie das Hinzufügen einer Datei zu Ihrem Plugin. Erstellen Sie Folgendes:
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!");
});
});
Ich habe versucht, den Test so klar wie möglich zu schreiben, aber er könnte etwas verwirrend sein, wenn Sie noch keinen Akzeptanztest geschrieben haben. Ich empfehle dringend, dass Sie die Ember-Dokumentation zum Akzeptanztest lesen, da sie viele großartige Informationen enthält.
In jedem Test, den wir schreiben, müssen wir etwas asserten. In unserem Test möchten wir einige Assertions machen, um zu überprüfen, ob der Tentakel initially verborgen ist und erst nach dem Klicken auf den Button angezeigt wird.
Wir möchten eine Reihe von Aktionen definieren, die vor einer Assertion ausgeführt werden sollen. Dazu verwenden wir das Schlüsselwort await. Durch die Verwendung dieses Schlüsselworts warten wir, bis die Ausführung jedes asynchronen Helfers abgeschlossen ist.
Unsere erste wichtige Aktion ist: await visit("/admin/plugins/purple-tentacle");. Dies weist unseren Test an, zu dieser URL in unserer Anwendung zu navigieren. Diese URL war diejenige, die den Tentakel anzeigt.
Nachdem wir die Seite besucht haben, auf der der purple-tentacle-Button erscheint, möchten wir überprüfen, ob der Button auf der Seite existiert und das Tentakelbild noch nicht existiert.
Das wird durch die folgenden Assertions erledigt:
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
P.S. Die vorherige Version des purple-tentacle-Plugins hatte die #show-tentacle-Element-ID nicht in der Handlebars-Vorlage. Schauen Sie sich die neueste Version an, um mitzumachen!
Sobald diese Tests bestanden sind, ist es Zeit, die Interaktion zu testen.
Der nächste Befehl ist await click('#show-tentacle');, der unserem Testframework mitteilt, dass wir den Button klicken und den Tentakel anzeigen möchten.
Nachdem wir einen Klick auf den Button simuliert haben, können wir überprüfen, ob der Tentakel erscheint, indem wir folgendes asserten:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Nicht schlecht, oder? Sie können den Test selbst ausprobieren, indem Sie http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 auf Ihrem Entwicklungssystem aufrufen. Sie sollten sehr schnell den purple tentacle erscheinen sehen und alle Tests werden bestehen.
Wenn Sie die Plugin-qunit-Tests auf der Kommandozeile mit PhantomJS ausführen möchten, können Sie
rake plugin:qunit['purple-tentacle']
ausführen
(wobei purple-tentacle der Ordnername Ihres Plugins ist)
Debuggen Ihrer Tests
Während Sie Ihre Plugins schreiben, können Ihre Tests Ihnen helfen, Probleme in Ihrem Plugin zu identifizieren. Wenn Sie Ihre Tests entwickeln oder Änderungen am Code Ihres Plugins vornehmen, können die Tests fehlschlagen. Um zu verstehen, warum, hat Ember einige nette Helfer: pauseTest() und resumeTest().
Um sie zu nutzen, fügen Sie await pauseTest() in Ihren Testcode ein, wo Sie möchten, dass der Test pausiert. Wenn Sie nun Ihren Test im Browser ausführen, wird der Test automatisch an der Stelle pausieren, an der Sie pauseTest() hinzugefügt haben. Dies gibt Ihnen die Möglichkeit, die Seite zu inspizieren oder Fehler anzuzeigen, um Probleme zu debuggen.
Wohin geht es von hier?
Ich hasse es, wie eine kaputte Schallplatte zu klingen, aber die Ember-Dokumentation zum Testen ist ausgezeichnet. Sie möchten vielleicht auch sehen, wie Discourse verschiedene Funktionen testet, indem Sie die Tests in unserem JavaScript-Tests-Verzeichnis durchsuchen. Wir haben dort einige Beispiele, aus denen Sie lernen können.
Viel Spaß beim Testen!
Mehr in der Serie
Teil 1: Plugin-Grundlagen
Teil 2: Plugin-Ausgänge
Teil 3: Site-Einstellungen
Teil 4: Git-Einrichtung
Teil 5: Admin-Oberflächen
Teil 6: Dieses Thema
Teil 7: Veröffentlichen Ihres Plugins
Dieses Dokument ist versionskontrolliert - schlagen Sie Änderungen auf GitHub vor.
it is an Admin page
)