Vorheriges Tutorial: Developing Discourse Plugins - Part 5 - Add an admin interface
Wussten Sie, dass Discourse zwei große Testsuiten für seinen Code 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.
Wenn Sie eine Entwicklungsumgebung eingerichtet haben und 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 wird mit vielen Tests erstellt, die beim Aufrufen der URL /tests ausgeführt werden. Daher kann es 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 zu schreiben, dass er klar ist, aber er könnte etwas verwirrend sein, wenn Sie noch nie einen Akzeptanztest geschrieben haben. Ich empfehle dringend, dass Sie die Ember-Dokumentation zum Akzeptanztesten lesen, da sie viele großartige Informationen enthält.
In jedem Test, den wir schreiben, müssen wir etwas assert (behaupten). In unserem Test möchten wir einige Behauptungen machen, um zu überprüfen, ob der Tentakel zunächst versteckt ist und erst nach dem Klicken auf die Taste angezeigt wird.
Wir möchten eine Reihe von Aktionen definieren, die vor einer Behauptung ausgeführt werden. 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 war diejenige, die den Tentakel anzeigt.
Nach dem Besuch der Seite, auf der der lila-Tentakel-Button erscheint, möchten wir überprüfen, ob der Button auf der Seite existiert und dass das Tentakel-Bild noch nicht existiert.
Das wird durch die folgenden Behauptungen 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 keine #show-tentacle-Element-ID im Handlebars-Template. 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 sagt, dass wir die Taste klicken und den Tentakel anzeigen möchten.
Nachdem wir einen Klick auf die Taste simuliert haben, können wir überprüfen, ob der Tentakel erscheint, indem wir behaupten:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Nicht zu 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 Entwicklungscomputer aufrufen. Sie sollten sehr schnell den lila Tentakel 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, an der Stelle, an der Sie möchten, dass der Test pausiert. Wenn Sie nun Ihren Test 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 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 ziemlich viele Beispiele, aus denen Sie lernen können.
Viel Spaß beim Testen!
Mehr in der Serie
Teil 1: Plugin-Grundlagen
Teil 2: Plugin-Auslass
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 ist versionskontrolliert - schlagen Sie Änderungen auf GitHub vor.
it is an Admin page
)