Vorheriges Tutorial: Developing Discourse Plugins - Part 5 - Add an admin interface
Wusstest du, dass Discourse zwei große Testsuiten für seinen Code-Codebase hat? Auf der Serverseite hat unser Ruby-Code eine Testsuite, die rspec verwendet. Für die Browser-Anwendung haben wir eine qunit-Suite, die ember-testing enthält.
Vorausgesetzt, du hast eine Entwicklungsumgebung eingerichtet, startest du beim Besuch der URL http://localhost:3000/tests die Ausführung der JavaScript-Testsuite in deinem Browser. Ein unterhaltsames Detail ist, dass du die Anwendung in einem Miniaturfenster in der unteren rechten Ecke beim Testen beobachten kannst:
Die Discourse-Anwendung ist mit sehr vielen Tests aufgebaut, die beim Besuch der /tests-URL ausgeführt werden. Es kann daher hilfreich sein, deine Tests nach dem Plugin zu filtern, an dem du arbeitest. Das kannst du in der Oberfläche tun, indem du auf das Plugin-Dropdown-Menü klickst und dein Plugin auswählst:
Hinzufügen eines Akzeptanztests in deinem Plugin
Erstens: Stelle sicher, dass du die neueste Version von Discourse ausgecheckt hast. Die Möglichkeit, Akzeptanztests aus Plugins heraus auszuführen, ist eine relativ neue Funktion, und wenn du nicht die neueste Version ausgecheckt hast, werden deine Tests nicht angezeigt.
In diesem 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 deinem Plugin. Erstelle 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 es könnte etwas verwirrend sein, wenn du noch nie einen Akzeptanztest geschrieben hast. Ich empfehle dir dringend, die Ember-Dokumentation zu Akzeptanztests zu lesen, da sie viele wertvolle Informationen enthält.
In jedem Test, den wir schreiben, müssen wir etwas asserten. In unserem Test möchten wir einige Assertions vornehmen, um zu überprü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 Assertion ausgeführt werden sollen. Dazu verwenden wir das await-Schlüsselwort. Durch die Verwendung dieses Schlüsselworts warten wir, bis die Ausführung jedes asynchronen Helpers 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 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 die Schaltfläche auf der Seite vorhanden ist und das Tentakel-Bild noch nicht existiert.
Das wird durch die folgenden Assertions 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 frühere Version des purple-tentacle-Plugins hatte die #show-tentacle-Element-ID nicht im Handlebars-Template. Schau dir 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 mitteilt, dass wir 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 asserten:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
Nicht schlecht, oder? Du kannst den Test selbst ausprobieren, indem du auf deinem Entwicklungssystem http://localhost:3000/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 besuchst. Du solltest sehr schnell sehen, wie der lila Tentakel erscheint, und alle Tests werden bestehen.
Wenn du die qunit-Tests des Plugins auf der Kommandozeile mit PhantomJS ausführen möchtest, kannst du ausführen:
rake plugin:qunit['purple-tentacle']
(wobei purple-tentacle der Ordnername deines Plugins ist)
Debuggen deiner Tests
Während du deine Plugins entwickelst, können dir deine Tests helfen, Probleme in deinem Plugin zu identifizieren. Wenn du deine Tests entwickelst oder Änderungen am Code deines Plugins vornimmst, können die Tests fehlschlagen. Um zu verstehen, warum, bietet Ember einige nützliche Helfer: pauseTest() und resumeTest().
Um sie zu nutzen, füge await pauseTest() in deinen Testcode ein, an der Stelle, an der der Test pausieren soll. Wenn du deinen Test dann im Browser ausführst, pausiert der Test automatisch an dem Punkt, an dem du pauseTest() hinzugefügt hast. Das gibt dir die Möglichkeit, die Seite zu untersuchen oder Fehler anzuzeigen, um beim Debuggen zu helfen.
Wo geht es weiter hin
Ich hasse es, wie eine kaputte Schallplatte zu klingen, aber die Ember-Dokumentation zu Tests ist ausgezeichnet. Vielleicht möchtest du auch sehen, wie Discourse verschiedene Funktionen testet, indem du die Tests in unserem JavaScript-Tests-Verzeichnis durchsuchst. Dort gibt es einige Beispiele, aus denen du lernen kannst.
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-Oberflächen
Teil 6: Dieses Thema
Teil 7: Veröffentliche dein Plugin
Dieses Dokument wird versioniert - schlage Änderungen auf github vor.
it is an Admin page
)