Automatisierte Tests sind eine hervorragende Methode, um deinen Code vor zukünftigen Regressionsfehlern zu schützen. Viele kennen bereits die Vorgehensweise in unserem Rails-Code mit rspec, doch die JavaScript-Seite kann für manche noch ein Rätsel sein.
Zum Glück ist es heutzutage recht einfach, grundlegende Tests für deinen Ember-Code hinzuzufügen!
Komponententests
Im vorherigen Tutorial dieser Serie haben wir eine Komponente namens fancy-snack hinzugefügt, um unseren Snack mit einem ausblendenden Hintergrund anzuzeigen. Schauen wir uns an, wie wir dafür einen Test schreiben. Erstelle die folgende Datei:
test/javascripts/components/snack-test.js
import componentTest from "helpers/component-test";
moduleForComponent("fancy-snack", { integration: true });
componentTest("test the rendering", {
template: "{{fancy-snack snack=testSnack}}",
setup() {
this.set("testSnack", {
name: "Potato Chips",
description: "Now with extra trans fat!",
});
},
test(assert) {
assert.equal(this.$(".fancy-snack-title h1").text(), "Potato Chips");
assert.equal(
this.$(".fancy-snack-description p").text(),
"Now with extra trans fat!"
);
},
});
Um den Test auszuführen, öffne deinen Browser auf deinem Entwicklungsserver unter /qunit?module=component%3Afancy-snack. Dein Browser führt dann die Komponententests aus und gibt eine Meldung wie „2 of 2 assertions passed, 0 failed“ aus.
Beachte, dass du auf der /qunit-Seite auch andere Tests ausführen kannst. Du kannst einfach einen neuen Test aus dem Module-Dropdown-Menü oben auf dem Bildschirm auswählen.
Gehen wir den Test Schritt für Schritt durch, um zu verstehen, wie er funktioniert.
Die template-Zeile sagt Ember, wie wir unsere Komponente einfügen möchten. Es handelt sich um exakt dasselbe Markup, das man verwenden würde, um die Komponente in einer Handlebars-Vorlage zu platzieren, also sollte es dir vertraut sein:
template: '{{fancy-snack snack=testSnack}}’,
Beachte, dass hier testSnack als snack-Parameter übergeben wird. Dieser ist in der setup()-Methode definiert:
setup() {
this.set('testSnack', {
name: 'Potato Chips',
description: 'Now with extra trans fat!'
});
},
Ich habe hier einfach nur einige Platzhalterdaten eingefügt. Das ist alles, was wir tun müssen, damit Ember die Komponente rendert. Schließlich haben wir in der test()-Methode ein paar Assertions:
test(assert) {
assert.equal(this.$('.fancy-snack-title h1').text(), 'Potato Chips');
assert.equal(this.$('.fancy-snack-description p').text(), 'Now with extra trans fat!');
}
Wenn du this.$() verwendest, erhältst du in deiner Vorlage Zugriff auf einen jQuery-Selektor. Die Assertions hier nutzen diesen Selektor, um den Wert des Snack-Titels und der Snack-Beschreibung abzurufen und mit dem erwarteten Wert zu vergleichen. Wenn die Werte übereinstimmen, werden die Assertions bestanden und unser Test funktioniert einwandfrei.
Es ist erwähnenswert, dass du nicht jedes kleine Detail in einer Komponente auf diese Weise testen musst. Du solltest mit Bedacht vorgehen und versuchen herauszufinden, welche Teile deines Codes wahrscheinlich brechen könnten oder anderen Entwicklern später Verwirrung bereiten könnten. Wenn du zu viele Dinge in deiner Vorlage testest, wird es für jemanden in der Zukunft zur Last, diese zu ändern. Fang einfach klein an, teste die offensichtlichsten Dinge, und mit der Zeit wirst du den Dreh raushaben.
Akzeptanztests
Akzeptanztests sind oft einfacher zu schreiben und können leistungsfähiger sein als Komponententests, da sie deine Anwendung auf dieselbe Weise testen, wie es ein Benutzer in seinem Browser tun würde. Ich beginne oft mit Akzeptanztests und füge dann, wenn ich eine komplizierte Komponente erstelle, auch Tests dafür hinzu.
So können wir einen Akzeptanztest schreiben, der unsere /admin/snack-Route aufruft und bestätigt, dass der Snack gerendert wurde:
test/javascripts/acceptance/snack-test.js
import { acceptance } from "helpers/qunit-helpers";
acceptance("Snack");
test("Visit Page", function (assert) {
visit("/admin/snack");
andThen(() => {
assert.ok(exists(".fancy-snack-title"), "the snack title is present");
});
});
Die test()-Methode liest sich in diesem Fall fast wie Englisch! Der erste Befehl sagt, die URL /admin/snack aufzurufen. Danach gibt es eine andThen()-Methode. Diese Methode ist notwendig, um sicherzustellen, dass alle Hintergrundarbeiten abgeschlossen sind, bevor die Tests fortgesetzt werden. Da JavaScript- und Ember-Code asynchron ist, müssen wir sicherstellen, dass Ember alles getan hat, was es tun muss, bevor unsere Assertions ausgeführt werden. Schließlich wird getestet, ob das Element .fancy-snack-title vorhanden ist.
Wenn du jedoch diesen Test ausführst, indem du /qunit?module=Acceptance%3A%20Snack aufrufst, wirst du feststellen, dass der Test aufgrund eines AJAX-Fehlers fehlschlägt.
Wenn du dich erinnerst, umfasst unser Code sowohl eine Rails-Seite als auch eine JavaScript-Seite, die eine AJAX-Anfrage ausgeführt hat, um ihre Daten zu beziehen. Der Akzeptanztest hat die JavaScript-Seite ausgeführt, wusste aber nicht, wie er die Daten von Rails beziehen soll.
Um dies zu beheben, müssen wir eine gefälschte Antwort hinzufügen, wobei wir die hervorragende pretender-Bibliothek verwenden. Öffne die Datei test/javascripts/helpers/create-pretender.js und suche nach der Zeile, die Folgendes sagt:
this.get("/admin/plugins", () => response({ plugins: [] }));
Füge direkt darunter eine Zeile hinzu, die ein gefälsktes Snack-Objekt zurückgibt, damit unser Akzeptanztest damit arbeiten kann:
this.get("/admin/snack.json", () => {
return response({ name: "snack name", description: "snack description" });
});
Den obigen Code kannst du so lesen: „Für jede Anfrage an /admin/snack.json antworte mit der folgenden response.“
Wenn du die URL /qunit?module=Acceptance%3A%20Snack neu lädst, sollte dein Akzeptanztest seine Daten über pretender abrufen und die Tests sollten bestanden werden.
Wo geht es weiter?
Du könntest versuchen, eine kleine Funktion zu entwickeln und Tests hinzuzufügen, um sicherzustellen, dass sie funktioniert. Du könntest es sogar versuchen, TDD zu nutzen, indem du deine Tests erstellst, bevor du irgendeinen Code im Frontend schreibst. Je nachdem, woran du arbeitest und deinen persönlichen Vorlieben, könnte dies eine angenehmere Vorgehensweise für dich sein. Viel Erfolg und frohes Coden 
Dieses Dokument wird versioniert verwaltet – Vorschläge für Änderungen auf github.