JavaScript: Unit-Testing

Neuen Code per TDD entwickeln

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit welchem Test beginnt man? Selbstverständlich mit dem einfachsten! Was das konkret heißt, erklärt dieses Video.
12:51

Transkript

Viele Entwickler schrecken davor zurück ein neues Projekt direkt mit Unit Tests auszustatten. Das liegt daran, dass man häufig die Vorstellung hat, das ist unheimlich schwer und kompliziert erst mit Unti Test zu starten. Wie wir in diesem Video sehen werden, ist es gar nicht so. Was ich in diesem Video mit Ihnen gemeinsam machen werde, ist, ich werde ein kleines Projekt anlegen und diesem Projekt werde ich die Funktionalität für eine Sparkonten- Klasse Schritt für Schritt Test First entwickeln. Mein erster Schritt dazu, ist ich lege einen neuen Ordner an, indem man das Source-Codes legen sollen, dazu nutze ich "mkd" auf der Kommandozeile und den Ordner nenne ich "new code demo". Nun muss ich in diesen Ordner wechseln und werde jetzt hier über ein "per minute" eine package Jason anlegen. Ich bestätige einfach für meinen Fall sämtliche Voreinstellungen. Ich brauche diese Datei lediglich, damit ich anschließend über NPM Karma als Testrunner und danach die Module Karma Jasmine und Karma-Chrome-Launcher installieren kann, um Jasmine Test ausführen zu können. Das erledige ich also auch schnell. Das hätte natürlich eine Entwicklungsabhängigkeit sein müssen, das korrigiere ich kurz. Und nun installiere ich Karma Jasmine und den Karma-Chrome- Launcher als Entwicklungsabhängigkeit. Nun öffne ich Einen Text Editor in meinem Fall ist es Visual Studio Code, dazu sollte ich hier vielleicht noch zuvor über Karma Inet ein neues Karma Projekt initialisieren. Auch hier kann ich soweit die Voreinstellungen übernehmen, lediglich werde ich jetzt hier sagen, dass sämtlicher produktiver Code in einem Unterordner ablegt und auf einem die Änderung JS gehört, dass es außerdem meinen Ordner Spec gibt in dem meiner Specs liegen werden. So bevor ich jetzt tatsächlich loslege, werde ich in der package Jason mein Test Kommando festlegen. Und dafür sorgen, dass all meine Tests laufen sobald ich Command Shift T oder Steuerung Shift T drücke. Dazu konfiguriere ich also ein Task Runner und Lege los und wenn ich jetzt Diesen Test Task starte, dann sagt er mir, dass er keinen Test ausführen konnte unddas ist korrekt, denn es gibt ja noch keine Tests. Wie gehen wir jetzt vor, Schritt Nummer 1 für mich ist, ich lege einen neuen Ordner Spec an. Und innerhalb dieses Ordners Specs lege ich eine neue Datei an, und die Datei nenne ich Sparkonto Spec.JS. Innerhalb der Datei werde ich nun ein neuen Test Suite anlegen nämlich die Suite Sparkonto. Und jetzt ist die Frage, was ist mein erster Test. Nun ja, wenn ich überlege wenn ich jetzt meine Funktionalität umsetzen möchte, ich möchte eine JavaScript Datei schreiben, in der soll es ein Sparkonto Objekt geben und diese Sparkonto Objekt soll eine Kontonummer vorhalten und ein initiales Guthaben, dann wäre der erste Code, den ich eigentlich schreiben würde, dass ich eine Konstrutor-Funktion in meiner JavaScript Datei schreibe. Jetzt möchte ich aber Test First arbeiten, also schreibe ich den Test, der mich dazu zwingt eben diese Konstruktor-Funktion zu schreiben. Und dieser Code ist folgender, ich sage ich habe ein neues Spec und dieses Spec nenne ich, "Konto kann eröffnet werden". Und nun sage ich hier "wahr Konto = new Sparkonto". Sparkonto gibt es noch nicht, bedeutet, das wird also gleich auf einen Fehler laufen, Kontonummer, die ich initial angebe, ist 123456, der initiale Betrag ist 100 und... Jetzt möchte ich folgendes überprüfen, zum einen... Dass es das Konto gibt. Danach möchte ich überprüfen, dass die Kontonummer gesetzt ist. Nämlich 123456 und außerdem, dass das initiale Guthaben gesetzt ist. Wenn ich nun Speicher werden wir sehen, dass dieser Test fehlschlagen wird. Und der schlägt fehl weil Sparkonto gibt es aktuell noch nicht. So, wie kann ich diesen Test jetzt grün werden lassen, Schritt Nummer 1 ist ich brauche ein Sparkonto. Also sage ich: Wunderbar... Function: Sparkonto. Klammer auf. Kontonummer, Guthaben Und speichere das Ganze, mein Test schlägt immer noch fehl, diesmal aber nicht mehr, weil mein Sparkonto nicht mehr nicht existent ist, sondern weil es diesmal keine Properties für Kontonummern und Guthaben gibt, das kann ich relativ einfach beheben, indem ich sage "sys.kontonummer= Kontonummer" und "sys.guthaben" "= Guthaben". Jetzt lasse ich das Ganze wieder laufen und Sie sehen dieses Mal, ist mein Test erfolgreich, erste Funktionalität es ist also erfüllt und ich habe den ersten sehr einfach Test geschrieben, nämlich den den Test: " ich kann ein Konto eröffnen". Aber der erste Test ist immer der schwierigste, die nächsten werden Sie jetzt sehen, gehen relativ einfach von der Hand, der nächste Test Ist nämlich, dass ich Geld einzahlen kann. Lautet mein nächster Test ist: "Einzahlungen erhöhen", das Guthaben... Und hier werde ich nun die Funktion Einzahlen aufrufen, wie Sie sehen gibt es die noch nicht, also "Konto einzahlen". 20 Wir haben initial... Ein Konto mit 100... Und mein Erwartung ist nun, dass der Kontostand, dass der jetzt... Dem Wert 120 entspricht. Dieser Test schlägt fehl, der schlägt fehl weil Einzahlen keine Funktion ist, bedeutet also wir brauchen eine Funktion dafür, wie erhalte ich die, ganz einfach an der Funktion Sparkonto greife ich auf die Eigenschaft Prototype zu und füge nun eine neue Funktion Einzahlen hinzu. Und in dieser Funktion wird jetzt ganz simpel das aktuelle Guthaben erhöhen. Und zwar um den übergebenen Betrag und damit ist auch dieser Testpfeil hier grün. Jetzt kommt für mich die erste Phase zu der ich refactern kann, aber ich aber was ich nun refactern möchte, ist nicht mein produktiver Code, sondern mein Test Code, ich habe nämlich hier doppelten Code, das möchte ich ganz gerne eliminieren, indem ich ein "before each block" einfüge und in diesem "before each block" werde ich jetzt das Konto initialisieren. Die Zeile also hier hoch. Und die Zeile hier raus. Speichern, meine Tests laufen immer noch meine Refactoring war also erfolgreich. So jetzt kommt auch schon die nächste Funktion, die nächste Funktion ist, dass Auszahlungen... das Guthaben verringern. Also rufe ich auf meinem Konto Objekt die Methode Auszahlen auf, die Methode Auszahlen, die gibt es natürlich noch nicht. bedeutet ich bekommen, auch hier gleich wieder eine Fehlermeldung, wenn ich jetzt überprüfe ob das Guthaben nun den Wert 70 hat, was ja 100-30 entspricht, speichern, Test schlägt fehl, und zwar weil Auszahlen keine Funktion ist. Gar kein Problem, die Funktion kann ich relativ schnell hinzufügen. Indem ich wieder über den Prototype gehe und jetzt Auszahlen als Funktion anlege. Und innerhalb der Funktion Auszahlen werde ich jetzt das Guthaben verringern. Speichern und alle drei Tests sind erfolgreich. Nun werde ich das nächste Refactoring ausführen, denn wie Sie sich vielleicht schon gewundert haben, habe ich den kompletten produktiven Code innerhalb meiner Spec Datei stehen, also innerhalb meines Tests und wenn man ganz ehrlich ist, hat dieser Code hier eigentlich gar nichts verloren. Ich mache das in der Praxis allerdings recht gerne, dass ich in meiner Spec Datei während ich Test First entwickelt bereits den produktiven Code habe. Einfach cor dem Hintergrund, dass ich so direkt sehe, wie der Code weg (inaudible), ich füge einen neuen Test hinzu, ich muss nicht durch Dateien springen, sondern kann das direkt in der gleichen Datei editieren. Jetzt muss er natürlich hier raus dazu Wenn ich ihn ausschneiden Leg mich hier einen neuen Ordner App an, hier wird das Ganze nämlich rein, im Ordner App werde ich jetzt die Sparkonto vom JS anlegen und wenn ich das Ganze jetzt hier einfüge und speichere, dann laufen meine Tests wieder und sie laufen immer noch auch nach diesem move Refactory. Was haben wir in diesem Video gesehen? Wir haben gesehen, dass es relativ leicht ist nach einem Test First Ansatz neuen Code zu erzeugen. Der Weg war wie folgt, ich habe einen neuen Ordner angelegt, in diesem neuen Ordner habe ich über NPM Inet und NPM Install Karma und Karma Jasmine, sowie den Karma-Chrome-Launcher installiert, anschließend habe ich einen Text Editor geöffnet, in meinem Fall habe ich hier Visual Studio Code genutzt, Hier habe ich jetzt zuerst eine Spec Datei angelegt, für die neue Funktionalität, die ich gerne inplementieren möchte und habe ich hier den ersten Test geschrieben, der mich dazu zwang die Klasse beziehungsweise Objekt zu erzeugen, was ich brauche. Der erste Test ist wie gesagt erfahrungsgemäß im der schwierigste, deshalb soltlen wir uns hier etwas ganz einfaches aussuchen typischerweise nutze ich etwas in der Richtung, wie wir es hier sehen, also ein Test der mich dazu zwingt erst einmal die Klasse zu definieren beziehungsweise das Objekt oder die Funktion zu erzeugen Sobald dann das Eis gebrochen ist und wir den ersten Test haben, kommen wir in einen Lauf rein, der relativ produktiv ist. Innerhalb dieses Laufs haben wir jetzt gesehen, habe ich mit relativ wenig Aufwand in kurzer Zeit die 2 neuen Funktionalitäten hinzufügen können. Zwischendurch habe ich zweimal refactored und zwar einmal, um den doppelten Initialisierungs-Code zu eliminieren beziehungsweise zentral zu halten und beim zweiten Mal als ich meinen produktiven Code dann auch in eine eigene Datei ausgelagert habe.

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!