JavaScript: Unit-Testing

Erstes Beispiel: Bestehenden JavaScript-Code über Tests absichern

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Um bestehenden JavaScript-Code über Tests abzusichern, bedarf es nur weniger Handgriffe. Welche das sind, erfahren Sie in diesem Video.
10:32

Transkript

Sie sehen hier eine kleine Webseite und auf dieser Webseite kann ich ein Konto eröffnen, dazu gebe ich eine Kontonummer an. Anschließend ein initiales Guthaben, also einen Öffnungsbetrag und diese Daten sehe ich nun auf der Webseite. Sie haben jetzt hier die Möglichkeit einen Betrag einzuzahlen, zum Beispiel 30 €. Dann sehen wir, dass sich das Guthaben von 100 auf 130 € erhöht. Und ich kann natürlich auch einen Betrag auszahlen, in diesem Fall jetzt 50 €. Und dann verringert sich das Guthaben auf 80 €. Den Quelltext zu dem Ganzen sehen wir hier. Ich habe in Visual Studio das Projekt geöffnet, es besteht aktuell aus einer HTML Datei, in diese HTML-Datei sehen wir die Eingabefelder, wir sehen hier ein accent verwiesenes Skript, Und wir sehen etwas inlinescript, das ist natürlich nicht der beste Stil, den Sie hier gerade sehen. Es ist allerdings am einfachsten das ganze jetzt so inline zu erläutern, damit Sie den Überblick erhalten. In diesem inlinescript werden zunächst 2 Daten abgefragt, nämlich die Kontonummer und das initiale Guthaben. Anschließend wird ein neues Sparkonto erzeugt. Und dann werden die eingegebenen Daten in die HTML Ausgabe Felder geschrieben, außerdem werden zwei EventListener verdrahtet, der eine für ein Klick auf den Button Einzahlen und der andere EventListener lauscht auf ein Klickevent für den Button Auszahlen. Die eigentliche Logik die befindet sich im Unterordner App, in der Datei Sparkonto js. Hier sehen wir, dass wir über eine Konstruktor-Funktion ein neues Sparkonto Objekt erzeugen. Wir übergeben hier eine Kontonummer und ein Guthaben beides merken wir uns, direkt, außerdem haben wir die Funktionen Einzahlen und Auszahlen, die sind hier jeweils deklariert und beim einzahlen dann wird das Guthaben, um den übergebenen Betrag erhöht und beim Auszahlen wird das Guthaben, um den übergebenen Betrag verringert. Dass das Ganze funktioniert haben wir bereits eben in der Webseite gesehen, ich möchte nun allerdings ein Test dafür entwickeln, dazu gehe ich wie folgt vor: Ich wechsel in meiner Kommandozeile und werde über npm init eine neue package Jason Datei anlegen. Hier möchte NPM von mir einen Namen haben, ich wähle Sparkonto, den Rest bestätige ich einfach. Und diesee Datei, die benötige ich nur damit ich anschließend über den Node Package Manager NPM Karma als Testrunner installieren kann und das geschieht über NPM install Karma -- save -dev. Neben Karma benötige ich jetzt auch noch Karma Jasmine und den Karma-Chrome-Launcher, beides werde ich jetzt auch über NPM installieren. Das ist dann einmal Karma-Jasmine und einmal der Karma-Chrome-Launcher. Beides sind Entwicklungsabhängigkeiten also wird das über save-dev gespeichert. So, was haben wir nun erhalten? Wir haben nun wie wir hier in Visual Studio Code sehen, einen neuen Ordner Node Modules, wir haben eine Package Jason und unter Node Modules haben wir Jasmine Karma und so weiter. Die Karma CLI, die habe ich bereits global auf meinem System installiert dadurch kann ich nun über Karma init ein neues Karma-Projekt initialisieren. Ich nutze als Testrunner Jasmine, ich möchte keine require JS Plugins laden, Chrome ist mein Browser in dem das ganze ausgeführt wird. Meine JavaScript Dateien liegen einmal im Ordner App und dort in einem beliebigen Unterordner und haben die Endung JS. Außerdem habe ich den Ordner Spec beziehungsweise den muss ich gleich noch anlegen und im Ordenr Specs, habe ich dann die Datei mit einem großen oder einem kleinen S und der Endung pack für Spec.js. So den Rest bestätige ich nun einfach so durch, wir haben hier jetzt auch eine Karma conf. Datei bekommen. Innerhalb der Karma conf. Datei sehe ich gerade habe ich ein Anführungszeichen zu viel, das entferne ich schnell und nun könnten wir unsere Tests direkt auf der Kommandozeile starten über... Karma Start Und was Sie hier nun sehen, ist dass wir noch kein Test haben, den muss ich natürlich noch installieren, außerdem möchte ich Karma ganz gerne Hintergrund in Visual Studio Code starten, dazu wechsel ich einmal in die package Jason und trage hier als Test Kommando... Karma Start und dann die Karma. conf.js ein und über command shift t werde ich jetzt einen neuen task anlegen mit dem ich die Tests anschließend sofort starten kann und zwar aus meiner Entwicklungsumgebung heraus. Den entsprechenden Code dazu, den habe ich mir einmal aus der Zwischenablage eingefügt und wenn ich nun Command shift t drücke, dann werden automatisch meine Tests alle durchgeführt, im Hintergrund wurde auch schon der Chrome gestartet und wie wir sehen haben wir aktuell halt noch kein Test. Genau das, das möchte ich jetzt ändern. Dazu lege ich einen Unterordner Spec an. Natürlich eins höher. So und in dem Unterordner Spec, wenn ich jetzt eine neue Datei Sparkonto spec.js anlegen. Und das hier, das sind meine Tests für mein Sparkonto, deshalb nenne ich die Suite auch Sparkonto. Das ganze geht unter Jasmine über die describe Funktion. Anschließend übergebe ich für meine Suite eine Funktion. Innerhalb der Suite habe ich jetzt verschiedene Specs und mein erstes Spec, die wäre, dass Einzahlungen das Guthaben erhöhen. Auch hier übergebe ich wieder eine Funktion un innerhalb dieser Funktion befindet sich jetzt mein eigentlicher Test. Ich schreibe also hier wahr Konto = new Sparkonto, übergebe hier eine beliebige Kontonummer. Und ein Anfangsguthaben von 100 € in meinem Fall. Anschließend werde ich auf meinem Konto eine Einzahlung durchführen. Das gäbe die Funktion Einzahlen, das sehen wir hier auch noch mal, wenn ich die seitlich öffne, sehen wir hier also, dass wir die Funktion Einzahlen und Auszahlen habe, also da gehe ich Einzahlen von 30... Euro zum Beispiel und jetzt erwarte ich, dass... Mein Guthaben... 130 ist, denn das sind ja 100+30. Wenn ich die Datei jetzt speicher, sehen wir unten, dass die Test sofort ausgeführt werden und dass dieser Test auch erfolgreich war. Ich lege gleich noch einen zweiten Test an nämlich nen Test für die Auszahlungen. Dazu habe ich den ersten Test einfach kopiert, nenne das Ganze nun hier Auszahlungen... Verringern das Guthaben. Wir haben wieder 100 € initiale, diesmal möchte ich ganz gerne 30 € auszahlen, so ist die Funktion also hier und dann erwarte ich dass 70 herauskommt, ich lasse es aber jetzt bewusst mal bei 130 damit Sie sehen wie so ein fehlgeschlagener Test ausschaut und nun sehen wir jetzt, er hat die Änderung in der Datei erkannt, anschließend wurden die Tests ausgeführt und einer war erfolgreich. Von 2 insgesamt. Nicht erfolgreich war der Test Auszahlungen verringern das Guthaben. Erwartet wurde 130. Tatsächlich herausgekommen sind jedoch 70, was natürlich das korrekt Ergebnis war. Ich habe hier also einen defekten Test, den behebe ich nun, speichere und anschließend sehe ich, dass nun beide Testfälle erfolgreich waren. Wir haben also diesem Video gesehen, wie wir in einem bestehenden Projekt Jasmine und Karma zum Testen unseres JavaScript-Code nutzen können. Voraussetzung, damit das ganze so gut funktionierte, war, dass die Logik meines JavaScript-Codes vom UI getrennt war, wir haben also hier einen eigenen Bereich der rein die Logik in unserem Fall ist das ja nur eine sehr einfach Addition beziehungsweise Subtraktion, aber diese Logik, die war getrennt vom eigentlichen UI-Code, nämlcih diesem hier, wo ich... Eingabefelder über EventListener mit meinem Logik-Code verbinde. Da diese Voraussetzung erfüllt war, musste ich lediglich über die Kommandozeile ein paar Befehle eintippen, das eine war dass ich über NPM init eine neue package Jason angelegt habe. Anschließend habe ich Karma, Karma Jasmine und den Karma-Chrome-Launcher asl Devdependencies über npm install installiert. Nachdem das erledigt war, konnte ich über npm init eine neue Karma conf. anlegen. In der Karma conf. ist zu beachten, dass ich hier die korrekten Pfade für meinen Logik Code und für meine Tests angeben muss und von der Reihenfolge her, muss ich natürlich erst meine Programmlogik laden danach erst die Tests. Dadurch habe ich mir das Leben ein wenig leichter gemacht, indem ich in der package Jason im Bereich Scripts Test, das Test Kommando auf Karma Start konfiguriert habe und dadurch konnte ich in Visual Studio Code einen Test Task Runner einrichten. Und das habe ich über folgende Script gemacht, ich habe also hier ein NPM command mit dem Task Test. Und dem Argument Test angelegt. Sobald ich jetzt control shift t oder command shift t drücke, werden also all meine Tests ausgeführt und bekomme eine sofortige Rückmeldung, ob mein Code mein Erwartungen entspricht.

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!