Vorheriges Tutorial: Developing Discourse Plugins - Part 5 - Add an admin interface
Wussten Sie, dass Discourse zwei große Test-Suites 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 mit integriertem ember-testing.
Wenn Sie eine Entwicklungsumgebung eingerichtet haben, starten Sie die JavaScript-Test-Suite in Ihrem Browser, indem Sie die URL http://localhost:4200/tests aufrufen. Ein interessanter Aspekt ist, dass Sie sehen können, wie die Anwendung in einem Miniaturfenster unten rechts getestet wird:
Die Discourse-Anwendung wird mit sehr vielen Tests erstellt, die zu laufen beginnen, wenn 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 schreibe ich einen Akzeptanztest für das Plugin purple-tentacle, 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 zuvor 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 asserten (behaupten). In unserem Test möchten wir ein paar Behauptungen aufstellen, um zu überprüfen, ob der Tentakel zunächst verborgen und erst nach dem Klicken auf den Button angezeigt wird.
Wir möchten eine Reihe von Aktionen definieren, die ausgeführt werden, bevor eine Behauptung gemacht wird. Dazu verwenden wir das Schlüsselwort await. Durch die Verwendung dieses Schlüsselworts warten wir, bis die Ausführung jeder asynchronen Hilfsfunktion 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 anzeigt.
Nach dem Besuch der Seite, auf der die lila Tentakel-Schaltfläche erscheint, möchten wir überprüfen, ob wir sehen können, dass die Schaltfläche auf der Seite existiert und dass das Tentakel-Bild noch nicht vorhanden ist.
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. Sehen Sie sich die neueste Version an, um Schritt halten zu können!
Sobald diese Tests bestanden sind, ist es Zeit, die Interaktion zu testen.
Der nächste Befehl lautet await click('#show-tentacle');, was 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 ü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 Ihrem Entwicklungsrechner http://localhost:4200/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 besuchen. Sie sollten sehr schnell sehen, wie sich der lila Tentakel anzeigt und alle Tests bestanden werden.
Wenn Sie die Plugin-Qunit-Tests auf der Kommandozeile 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)
Ihre Tests debuggen
Wenn 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 Hilfsprogramme: pauseTest() und resumeTest().
Um sie zu nutzen, fügen Sie await pauseTest() in Ihren Testcode dort ein, wo der Test pausieren soll. Wenn Sie Ihren Test nun im Browser ausführen, wird der Test automatisch an der Stelle angehalten, an der Sie pauseTest() hinzugefügt haben. Dies gibt Ihnen die Möglichkeit, die Seite zu überprüfen oder Fehler anzuzeigen, um Probleme zu debuggen.
Wie geht es weiter
Ich hasse es, wie eine kaputte Schallplatte zu klingen, aber die Ember-Dokumentation zum Testen ist ausgezeichnet. Sie möchten sich vielleicht auch ansehen, 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-Setup
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
)