Vorheriges Tutorial: Developing Discourse Plugins - Part 5 - Add an admin interface
Wussten Sie, dass Discourse über zwei große Testsuiten für seine Codebasis verfügt? Auf der Serverseite verfügt unser Ruby-Code über eine Testsuite, die rspec verwendet. Für die Browseranwendung haben wir eine qunit Suite, die ember-testing enthält.
Unter der Annahme, dass Sie eine Entwicklungsumgebung eingerichtet haben, starten Sie beim Aufruf der URL http://localhost:3000/tests die JavaScript-Testsuite in Ihrem Browser. Ein unterhaltsamer Aspekt ist, dass Sie sehen können, wie die Anwendung in einem Miniaturfenster unten rechts getestet wird:
Die Discourse-Anwendung ist mit einer Menge Tests aufgebaut, die beim Aufruf der URL /tests gestartet werden. Daher kann es hilfreich sein, Ihre Tests nach dem Plugin zu filtern, an dem Sie arbeiten. Dies können Sie 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
Zunächst stellen Sie sicher, dass Sie die neueste Version von Discourse ausgecheckt haben. Die Möglichkeit, Akzeptanztests aus Plugins auszuführen, ist eine relativ neue Funktion. Wenn Sie nicht die neueste Version ausgecheckt haben, 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 verwirrend sein, wenn Sie noch nie einen Akzeptanztest geschrieben haben. Ich dringend empfehle Ihnen, die Ember-Dokumentation zum Thema Akzeptanztests zu lesen, da diese viele großartige Informationen enthält.
In jedem von uns geschriebenen Test müssen wir etwas asserten. In unserem Test möchten wir einige Aussagen treffen, um zu prüfen, ob der Tentakel zunächst ausgeblendet ist und erst nach dem Klicken auf die Schaltfläche angezeigt wird.
Wir möchten eine Reihe von Aktionen definieren, die vor einer Aussage 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 Hilfsprogramms abgeschlossen ist.
Unsere erste wichtige Aktion ist: await visit("/admin/plugins/purple-tentacle");. Dies weist unseren Test an, in unserer Anwendung zu dieser URL zu navigieren. Diese URL ist diejenige, die den Tentakel anzeigt.
Nachdem wir die Seite besucht haben, auf der die Schaltfläche für den violetten Tentakel erscheint, möchten wir prüfen, ob wir die Schaltfläche auf der Seite sehen können und ob das Tentakelbild noch nicht vorhanden ist.
Dies wird durch die folgenden Aussagen erreicht:
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 mitzuhalten!
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 Testframework 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 feststellen:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Nicht so schlimm, 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 sehr schnell sehen, wie der violette Tentakel erscheint und alle Tests bestanden werden.
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 entwickeln, können Ihnen Ihre Tests 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, bietet Ember einige nützliche Hilfsprogramme: pauseTest() und resumeTest().
Um sie zu verwenden, fügen Sie await pauseTest() innerhalb Ihres Testcodes an der Stelle ein, an der Sie den Test pausieren möchten. Wenn Sie Ihren Test nun im Browser ausführen, pausiert der Test automatisch an der Stelle, 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 es weitergeht
Ich hasse es, wie eine kaputte Schallplatte zu klingen, aber die Ember-Dokumentation zum Testen ist hervorragend. Vielleicht möchten Sie auch sehen, wie Discourse verschiedene Funktionen testet, indem Sie durch die Tests in unserem JavaScript-Testverzeichnis blättern. Wir haben dort einige Beispiele, aus denen Sie lernen können.
Viel Spaß beim Testen!
Mehr in der Serie
Teil 1: Plugin Basics
Teil 2: Plugin Outlets
Teil 3: Site Settings
Teil 4: git setup
Teil 5: Admin interfaces
Teil 6: Dieses Thema
Teil 7: Publish your plugin
Dieses Dokument ist versioniert – schlagen Sie Änderungen auf GitHub vor.
it is an Admin page
)