Vorheriges Tutorial: Developing Discourse Plugins - Part 5 - Add an admin interface
Wussten Sie schon, dass Discourse zwei große Test-Suiten für seine Codebasis hat? Auf der Serverseite verfügt unser Ruby-Code über eine Test-Suite, die rspec verwendet. Für die Browser-Anwendung haben wir eine qunit-Suite, die ember-testing integriert hat.
Wenn Sie eine Entwicklungsumgebung eingerichtet haben, können Sie die JavaScript-Test-Suite in Ihrem Browser starten, indem Sie die URL http://localhost:3000/tests aufrufen. Ein netter Nebeneffekt ist, dass Sie dabei sehen können, wie die Anwendung in einem kleinen Fenster in der unteren rechten Ecke getestet wird:
Die Discourse-Anwendung besteht aus vielen Tests, die ausgeführt werden, sobald Sie die URL /tests aufrufen. Es kann daher hilfreich sein, Ihre Tests nach dem Plugin zu filtern, an dem Sie arbeiten. Dies können Sie in der Oberfläche tun, indem Sie auf das Dropdown-Menü Plugin klicken und Ihr Plugin auswählen:
Hinzufügen eines Acceptance-Tests in Ihrem Plugin
Stellen Sie zunächst sicher, dass Sie die neueste Version von Discourse ausgecheckt haben. Die Möglichkeit, Acceptance-Tests direkt aus Plugins heraus auszuführen, ist eine relativ neue Funktion. Wenn Sie nicht die neueste Version verwenden, werden Ihre Tests nicht angezeigt.
In diesem Artikel schreibe ich einen Acceptance-Test für das Plugin purple-tentacle, das wir in Teil 5 dieser Serie erstellt haben.
Das Hinzufügen eines Acceptance-Tests ist so einfach wie das Erstellen einer einzigen Datei in Ihrem Plugin. Erstellen Sie folgende Datei:
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 wenn Sie noch nie zuvor einen Acceptance-Test geschrieben haben, mag er vielleicht etwas verwirrend wirken. Ich kann Ihnen dringend empfehlen, die Ember-Dokumentation zu Acceptance-Tests zu lesen, da sie viele großartige Informationen enthält.
Bei jedem Test, den wir schreiben, müssen wir etwas assert (behaupten/überprüfen). In unserem Test möchten wir einige Assertions durchführen, um zu prüfen, ob der Tentakel anfangs ausgeblendet ist und erst nach dem Klicken auf die Schaltfläche 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 darauf, dass die Ausführung jedes asynchronen Helpers 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 zeigt den Tentakel an.
Nachdem wir die Seite aufgerufen haben, auf der die Schaltfläche für den violetten Tentakel erscheint, möchten wir prüfen, ob die Schaltfläche auf der Seite existiert und das Tentakelbild noch nicht angezeigt wird.
Dies geschieht durch die folgenden Assertions:
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 Element-ID #show-tentacle nicht in der Handlebars-Vorlage. Schauen Sie sich die neueste Version an, um dem Beispiel folgen zu können!
Sobald diese Tests bestanden sind, ist es an der Zeit, die Interaktion zu testen.
Der nächste Befehl ist await click('#show-tentacle');, der unserem Test-Framework mitteilt, dass wir auf die Schaltfläche klicken und den Tentakel anzeigen möchten.
Nachdem wir einen Klick auf die Schaltfläche simuliert haben, können wir prüfen, ob der Tentakel erscheint, indem wir Folgendes behaupten:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Gar nicht so schlecht, oder? Sie können den Test selbst ausprobieren, indem Sie auf Ihrem Entwicklungsrechner http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 aufrufen. Sie sollten den violetten Tentakel sehr schnell erscheinen sehen und alle Tests werden bestanden.
Wenn Sie die QUnit-Tests des Plugins über die Befehlszeile mit PhantomJS ausführen möchten, können Sie Folgendes ausführen:
rake plugin:qunit['purple-tentacle']
(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 dies geschieht, bietet Ember einige nützliche Hilfsfunktionen an: pauseTest() und resumeTest().
Um diese zu nutzen, fügen Sie await pauseTest() in Ihrem Testcode an der Stelle ein, an der der Test pausiert werden soll. Wenn Sie Ihren Test nun im Browser ausführen, pausiert der Test automatisch an der Stelle, an der Sie pauseTest() eingefügt haben. Dies gibt Ihnen die Möglichkeit, die Seite zu untersuchen oder Fehlermeldungen anzuzeigen, um Probleme zu debuggen.
Wie geht es weiter?
Ich möchte nicht wie eine kaputte Schallplatte klingen, aber die Ember-Dokumentation zum Thema Testing ist hervorragend. Sie können sich auch ansehen, wie Discourse verschiedene Funktionen testet, indem Sie die Tests in unserem Verzeichnis für JavaScript-Tests durchsuchen. Wir haben dort viele Beispiele, von denen Sie lernen können.
Viel Spaß beim Testen!
Mehr in dieser Reihe
Teil 1: Plugin-Grundlagen
Teil 2: Plugin-Outlets
Teil 3: Site-Einstellungen
Teil 4: git-Einrichtung
Teil 5: Admin-Oberflächen
Teil 6: Dieses Thema
Teil 7: Veröffentlichen Sie Ihr Plugin
Dieses Dokument wird versioniert – schlagen Sie Änderungen auf GitHub vor.
it is an Admin page
)