Vorheriges Tutorial: Developing Discourse Plugins - Part 5 - Add an admin interface
Wussten Sie, dass Discourse zwei große Testsuiten für seinen Codebase 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 besuchen, starten Sie die JavaScript-Testsuite in Ihrem Browser. Ein lustiger Aspekt ist, dass Sie sehen können, wie die Anwendung in einem kleinen Fenster in der unteren rechten Ecke getestet wird:
Die Discourse-Anwendung ist mit vielen Tests aufgebaut, die beim Besuch der /tests-URL starten. Daher kann es hilfreich sein, Ihre Tests nach dem Plugin zu filtern, an dem Sie arbeiten. Sie können das in der Oberfläche tun, indem Sie auf das Plugin-Dropdown 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 Reihe 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"), "es zeigt den purple tentacle button");
assert.ok(!exists(".tentacle"), "der Tentakel wird noch nicht angezeigt");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "der Tentakel will die Welt beherrschen!");
});
});
Ich habe versucht, den Test so klar wie möglich zu schreiben, aber er könnte etwas verwirrend sein, wenn Sie noch keinen Akzeptanztest geschrieben haben. Ich empfehle dringend, dass Sie die Ember-Dokumentation zu Akzeptanztests lesen, da sie viele großartige Informationen enthält.
In jedem Test, den wir schreiben, müssen wir etwas asserten. In unserem Test möchten wir einige Assertions machen, um zu überprüfen, ob der Tentakel zunächst versteckt ist und erst nach dem Klicken auf den Button 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, bis die Ausführung jedes asynchronen Helfers 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.
Nachdem wir die Seite besucht haben, auf der der purple tentacle 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 Assertions erreicht:
assert.ok(exists("#show-tentacle"), "es zeigt den purple tentacle button");
assert.ok(!exists(".tentacle"), "der Tentakel wird noch nicht angezeigt");
P.S. Die vorherige Version des purple-tentacle-Plugins hatte die #show-tentacle-Element-ID nicht in der Handlebars-Vorlage. Schauen Sie sich die neueste Version an, um mitzumachen!
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 sagt, dass wir 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 folgendes asserten:
assert.ok(exists(".tentacle"), "der Tentakel will die Welt beherrschen!");
Nicht so 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 Entwicklungssystem besuchen. Sie sollten sehr schnell den purple tentacle 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 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, hat Ember einige nette Helfer: pauseTest() und resumeTest().
Um sie zu nutzen, fügen Sie await pauseTest() in Ihren Testcode ein, wo Sie möchten, dass der Test pausiert. Wenn Sie nun Ihren Test im Browser ausführen, wird der Test automatisch an der Stelle pausieren, 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 einige Beispiele, aus denen Sie lernen können.
Viel Spaß beim Testen!
Mehr in der Serie
Teil 1: Plugin-Grundlagen
Teil 2: Plugin-Ausgänge
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 versioniert - schlagen Sie Änderungen auf github vor.
it is an Admin page
)