JavaScript: Unit-Testing

Bestehenden Code via TDD erweitern

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
"Beim nächsten Projekt werde ich Unit Tests schreiben!" – Diesen Satz hört man häufig, wenn man sich mit Entwicklern unterhält. Doch weshalb erst beim Nächsten? Auch in Bestandsprojekte sind Unit Tests mit wenigen Handgriffen integriert.
06:59

Transkript

Vorne sehen wir JavaScript-Code, der ein Sparkonto abbildet. Ein Sparkonto hat ein Guthaben, eine Kontonummer, aus dem können wir Geld einzahlen und Geld auszahlen. Für diesen Code existieren bisher keine Unit Tests. Stattdessen gibt es eine kleine GUI und innerhalb dieser GUI können wir Geld einzahlen und auszahlen. Was ich Ihnen nun zeigen möchte, ist wie Sie diesen bestehenden Code um eine neue Funktionalität im Test First, beziehungsweise Test Driven Ansatz erweitern können. Dazu werde ich zunächst hingehen und innerhalb meines Projektes Karma und Karma Jasmine installieren. Vorbereitend dazu habe ich bereits NPM initialisiert und nun werde ich die notwendige Module installieren. Also "npm install --save-dev", um es als Entwicklungsabhägigkeit zu speichern. Außerdem "npm install karma jasmine". Und den "karma chrome launcher" und auch hier das Ganze wieder als Entwicklungsabhängigkeit. Nun will ich Karma initialisieren. Jasmin ist mein Test Framework. Keine Abhängigkeiten, "per require" soll gemanagt werden, Chrome ist mein Browser, meine JavaScript-Dateien befinden sich im Ordner App. Und dort in einer beliebigen unter Ordnerstruktur und haben die Änderung JS, außerdem werde ich mir gleich einen Ordner Spec anlegen und hier werde ich Specs haben die auf... spec.js enden und das S kann groß oder klein geschrieben sein. So die Tests möchte ich ganz gerne bei Änderung durchlaufen lassen. Darüberhinaus möchte ich das Ganze auch (inaudible) Code starten kann. Dazu gehe ich zum einen Package Jason und trage mir hier einmal im Bereich Test Karma Start... Karma conf.js ein. Und das mache ich deswegen, weil ich nun hingehen kann und die Möglichkeit habe mir ein kleines Kommando anzulegen damit ein Test command. Und das kann ich konfigurieren sobald ich Control Shift T oder Command Shift T drücke. UNd jetzt sage ich "configure Task Runner" und hier füge ich folgenden Code ein: über den ich einmal eine Tests laufen lassen kann. Ich führe also npm, den "node package manager" aus und werde für den Node Package Manager das Test Kommando starten. Wenn ich nun eine meiner Dateien hier anpasse, dann sehen wir, dass mein Test Task anschließend laufen wird, im Moment habe noch keiner Spezifikation drinnen und genau das wollen wir jetzt ändern, denn ich möchte ja meinen Code erweitern. Wie gehe ich jetzt also vor? Schritt 1 ist ist ich lege mein Ordner Spec an. Und innerhalb des Ordners Spec lege ich mir eine Sparkonto Spec.js an. In einer neu angelegten Datei werde ich jetzt folgendes machen: Ich werde in dieser Datei, sobald sie sich öffnen lässt,... So, da habe ich versehentlich einen Ordner statt eine Datei angelegt, also Sparkonto Spec.js Innerhalb dieser Datei werde ich jetzt eine neue Test Suite anlegen, nämlich die Test Suite Sparkonto. Und dieser beschreibt sich durch eine Funktion und innerhalb dieser Funktion, wenn ich jetzt eine neue Funktionalität in einem Test First Ansatz hinzufügen. Dazu schreibe ich meine erste Spezifikation und meine erste Spezifikation lautet, dass ich kein Guthaben abheben kann, was über meinem Kontostand ist. Bedeutet also, ich schreibe mir eine neue Test Suite, die nenne ich: "Sparkonto mit geringem Guthaben". Dann sage ich hier "wahr Konto", nehme mir ein "before each block". In dem "before each block" werde ich jetzt das Sparkonto jeweils initialisieren also "Konto=new Sparkonto". Mit einer Nummer 1 2 3 4 und einen Betrag von 10 €. Und nun schreibe ich meine erste Spezifikation, nämlich... Die Spezifikation, dass das Guthaben sich nicht ändern soll, wenn ich mehr abheben möchte als ich Guthaben habe. So wie überprüfe ich das nun? Das überprüfe ich, indem ich Die Funktion Auszahlen aufrufe. Ich sage also: Konto.Auszahlen Und ich werde jetzt mal mehr auszahlen als ich Guthaben habe also zum Beispiel 11 €. Und meine Erwartung ist nun, dass bei meinem Konto das Guthaben Immer noch den Wert 10 hat, da ich ja nicht mehr abheben darf, als ich auf meinem Konto habe. Wenn ich nun speichere,... Und mein Test erneut laufen lasse. Ach, da war ein Schreibfehler in meiner Datei. So. Wenn ich das Ganze jetzt laufen lasse, dann sehen wir unten, dass mein Test fehlschlägt, denn rausgekommen ist -1 statt 10 und das ist okay, denn ich habe aktuell ja diese FUnktionalität noch nicht implementiert. Wie mache ich das jetzt? Das Ganze geht relativ einfach. Ich gehe, nachdem mein Test jetzt fehlgeschlagen ist, in meinen entsrpechenden produktiv Code rein und werde hier nun ein einfaches "if" einfügen und sagen "if Betrag Größer Guthaben" und zwar "this. Guthaben", dann soll er bitte herausspringen und zwar über ein... Return. Speichern und mit dieser kleinen Code Änderung ist mein Test grün. Wie wir also gesehen haben, ist es nicht besonders schwierig bestehenden Quellcode in einem Test First Ansatz, um neue Funktionalität zu erweitern. Alles was ich machen musste war mein Test Framework, in meinem Fall war das Jasmine, zu installieren, einen passenden Testrunner auszuwählen, ein Test für die neue Funktionalität zu schreiben. Dieser schlägt fehl und anschließend kann ich den entsprechenden Code, um diesen Test Grün zu bekommen, Schritt für Schritt implementieren.

JavaScript: Unit-Testing

Steigen Sie in die Grundlagen des Unit-Testings ein und sehen Sie, wie Sie mit dem Jasmine-Framework Ihren JAvaScript-Code professionell testen können.

2 Std. 7 min (21 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:19.05.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!