Vorheriges Tutorial: Developing Discourse Plugins - Part 5 - Add an admin interface
Wussten Sie, dass Discourse zwei große Test-Suiten für seinen Codebestand hat? Auf der Serverseite verfügt unser Ruby-Code über eine Test-Suite, die rspec verwendet. Für die Browseranwendung haben wir eine qunit-Suite, die ember-testing integriert hat.
Wenn Sie eine Entwicklungsumgebung eingerichtet haben, starten Sie die JavaScript-Test-Suite in Ihrem Browser, indem Sie die URL http://localhost:4200/tests besuchen. Ein interessanter Aspekt ist, dass Sie sehen können, wie sie die Anwendung in einem Miniaturfenster in der unteren rechten Ecke testet:
Die Discourse-Anwendung ist mit sehr vielen Tests erstellt, die ausgeführt werden, sobald Sie die URL /tests besuchen. 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:
Einen Akzeptanztest in Ihrem Plugin hinzufügen
Stellen Sie zunächst 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 auschecken, werden Ihre Tests nicht angezeigt.
Für diesen Artikel werde ich einen Akzeptanztest für das Plugin purple-tentacle schreiben, das wir in Teil 5 dieser Serie erstellt haben.
Einen Akzeptanztest hinzuzufügen 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 zuvor einen Akzeptanztest geschrieben haben. Ich empfehle dringend, die Ember-Dokumentation zum Akzeptanztesten zu lesen, da sie viele großartige Informationen enthält.
In jedem Test, den wir schreiben, müssen wir etwas asserten (behaupten). In unserem Test möchten wir einige Behauptungen aufstellen, um zu überprüfen, ob der Tentakel zunächst verborgen ist und erst nach dem Klicken auf den Button angezeigt wird.
Wir möchten eine Reihe von Aktionen definieren, die ausgeführt werden sollen, bevor eine Behauptung aufgestellt wird. Dazu verwenden wir das Schlüsselwort await. Durch die Verwendung dieses Schlüsselworts warten wir, bis die Ausführung jedes asynchronen Helferprogramms zuerst 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 anzeigte.
Nach dem Besuch der Seite, auf der der lila Tentakel-Button erscheint, möchten wir überprüfen, ob der Button auf der Seite vorhanden ist und ob das Tentakel-Bild noch nicht existiert.
Dies wird durch die folgenden Behauptungen 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 auf dem Laufenden zu bleiben!
Sobald diese Tests bestanden sind, ist es Zeit, die Interaktion zu testen.
Der nächste Befehl lautet await click('#show-tentacle');, der unserem Test-Framework mitteilt, dass wir auf 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 behaupten:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Nicht schlecht, oder? Sie können den Test selbst ausprobieren, indem Sie auf Ihrer Entwicklungsmaschine http://localhost:4200/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 besuchen. Sie sollten sehr schnell sehen, wie der lila Tentakel erscheint, und alle Tests werden bestanden.
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)
Ihre Tests debuggen
Während Sie Ihre Plugins schreiben, 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 nette Helfer: pauseTest() und resumeTest().
Um sie zu nutzen, fügen Sie await pauseTest() in Ihren Testcode ein, an der Stelle, an der der Test pausieren soll. Wenn Sie Ihren Test nun im Browser ausführen, wird der Test an der Stelle, an der Sie pauseTest() hinzugefügt haben, automatisch angehalten. Dies gibt Ihnen die Möglichkeit, die Seite zu überprüfen oder Fehler anzuzeigen, um bei der Fehlersuche zu helfen.
Wie geht es weiter?
Ich möchte nicht wie eine kaputte Schallplatte 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-Testverzeichnis durchsuchen. Dort finden Sie einige Beispiele, von denen Sie lernen können.
Viel Spaß beim Testen!
Mehr in der Serie
Teil 1: Plugin-Grundlagen
Teil 2: Plugin-Outlets
Teil 3: Site-Einstellungen
Teil 4: Git-Einrichtung
Teil 5: Admin-Schnittstellen
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
)