JavaScript: Unit-Testing

Karma konfigurieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Karma Test Runner, der vom AngularJS-Team entwickelt wurde, ermöglicht nicht nur die Ausführung in mehreren Browsern gleichzeitig, sondern auch ein automatisches Starten der Tests bei Code-Änderungen. Wie Sie Ihn mit Jasmine nutzen und in Visual Studio Code konfigurieren, zeigt dieses Video.
13:40

Transkript

Jasmine Tests können über die Konsole, über die Eingabe des Jasmine Befehls ausgeführt werden oder über einen Webbrowser. Noch komfortabler geht es jedoch wenn Sie einen externen Testrunner nämlich den Karma Test Runner benutzen. Diesen finden Sie unter karmarunner.github.io. Wie Sie hier sehen können kommt Karma vom Angular JS Team und der wird dort intern für die Entwicklung des Angular JS Frameworks genutzt. Karma bietet einige interessante Features. Zum einen ist Karma dazu in der Lage Ihre Tests in einem (inaudible) Browser auszuführen im Gegensatz zum Jasmine command line Runner wird tatsächlich ein Browser gestartet, beziehungsweise es können sogar mehrere Browser gestartet werden und in diesen werden Ihre Test ausgeführt. Das hat einen großen Vorteil, dass sie relativ schnell erkennen, ob ihr Code vielleicht bestimmte Browser Funktionalitäten nutzt die in einigen Browser nicht funktionieren. Außerdem bringt Karma einen Watcher mit, der ist ihm erlaubt Ihre Tests sofort auszuführen sobald sich Ihre Dateien ändern. Schauen wir uns einmal an wie wir mit Karma starten können. Dazu wechsle ich zurück ins Terminal und innerhalb des Terminals gehe ich nun in einem Verzeichnis, dass ich bereits vorbereitet habe. Und in diesem Verzeichnis habe ich eine Standard Jasmine Installation. In dieser Installation sehen wir also, dass wir zum einen das Jasmine Framework in der Version 2.4.1 installiert haben, dass ich hier die Beispiele für den Player drin habe, inklusive der Specs und der Specc Helfer für den Player. Was ich nun machen möchte ist, ich möchte gerne Karma installieren und Karma dazu nutzen meine Test ständig im Hintergrund ausführen. Das erste was ich dazu benötige ist eine Node Package Jason Datei. Diese bekomme ich am einfachsten indem ich NPM init eingebe. Ich werde nun gefragt wie mein Projekt heißen soll, ich nenne das ganze Projekt Karma Demo und den Rest bestätige ich ganz einfach jeweils mit der Enter-Taste. Das ist meinem Fall jetzt gar nicht so wichtig, was in dieser Datei drin steht, ich muss sie nur haben. Wie wir jetzt sehen können, habe ich nun eine neue Datei Package.Jason. Und in dieser package.jason sehen wir genau der Inhalt den wir hier sehen. Diese Datei ist Voraussetzung dafür dass ich Node Pakete installieren kann über den Node Package Manager und ich möchte nun ganz gerne Karma installieren, dazu gebe ich einen NPM install Karma save-dev. Was nun passiert, ist dass Karma Framework wird heruntergeladen und als Node Modul in meiner Ordnerstruktur lokal eingefügt. Sie sehen, dass wenn ich jetzt gleich hier einmal tree eingebe dann sehen wir, wenn ich hier hoch scrolle dass ich hier nun eine relativ umfangreiche Ordnerstruktur habe, die irgendwo wenn ich weiter hochscrollen würde ein Node Modules Ordner hat, außerdem wenn ich einmal den Inhalt der package Jason ausgebe, sehen wir hier, dass nun eine Devdependency auf das Karma Framework haben. Das nächste was ich nun als Hilfsfunktion machen möchte ist, ich möchte mir das Karma Modul global installieren, das hat den Vorteil, dass ich es anschließend icht immer qualifiziert auf der Kommandozeile aufrufen muss. Dazu Installiere ich das Modul Karma CLI mit dem g-flag also global. Der Karma Test, wie bereits gesagt in einem Browser ausgeführt werden muss ich noch einen Adapter installieren, das in meinem Fall der Karma Chrome Launcher. Und darüber hinaus möchte ich noch gerne den Firefox Launcher installieren, um Ihnen zu zeigen wie in zwei Browsern gleichzeitig getestet werden kann und das geht über die Installation des Karma Firefox Launcher Plugins. Als Testframework benutze ich in meinem Fall Jasmine heißt, ich muss auch hier noch den entsprechenden Adapter installieren. Wenn Sie ein anderes Testframework wie zum Beispiel Mocha benutzen, gibt es auch hierfür entsprechende Adapter. So jetzt ist soweit alles installiert, dass ich loslegen kann. Das nächste Kommando was ich nun eingebe lautet Karma init und ich drücke nun Enter und werde nun durch die Anlage einer Karma Konfigurationsdateien geführt, als erstes werde ich gefragt welches Testframework ich gerne benutzen möchte, in meinem Fall ist das Jasmine und dafür habe ich ja auch bereits den Adapter installiert. Nur werde ich gefragt ob ich require.js für das Abhängigkeitsmanagement benutze, in meinem Fall mache ich das nicht, also auch hier Enter, nun werde ich gefragt, in welchen Browsern die Ausgabe getestet werden soll. Zum einen wird hier Chrome vorgeschlagen, das übernehme ich. Ich habe aber auch den Firefox Adapter installiert. Den werde ich dann gleich noch einfügen. Nun werde ich gefragt, welche Dateien ich gerne laden möchte. Dazu benötige ich zunächst jetzt im Ordner source all meine JavaScript-Dateien. Das waren also die Playerr und ich Song JS, dann habe ich im Unterordner Spec... Noch ein paar Helfer Dateien. Ich gebe also auch hier ein Pattern ein. Und das Pattern schaut so aus, dass ich wahlweise ein großes oder ein kleines H habe und es dann mit elpa.js weitergeht, außerdem habe ich natürlich noch meine Specs und dieser starten mit einem großen S oder einem kleinen und gehen anschließend mit pack.js weiter. Ich werde nun gefragt, ob es Dateien gibt die ich ganz gerne ausschließen möchte dass es in meinem Fall nicht so. Außerdem wird hier gefragt, ob auf Änderungen gelauscht werden soll und das bejae ich und nun wurde mir eine Karma Config Datei angelegt. Die sehen wir wenn ich hier die Karma Conf JS einmal ausgebe. Mit den entsprechend von mir gewählten Inhalten. Ich werde nun folgendes machen: Ich starte meinen Code Editor, den ich benutze mein Fall ist das Visual Studio Code. Den starte ich im aktuellen Verzeichnis und hier sehe ich auch noch mal genau, das, was wir eben gesehen haben, ich habe hier die Player JS, die Song JS. Ich habe ja meine Specs. Und hier meine package.jason, die mir... vom Node Package Manager angelegt worden ist und meine Karma Konfigurationsdatei in der ich nun noch als Browser hier unten den Firefox hinzufügen werde. Das nächste, was ich jetzt hier auf der Konsole machen kann, ist ich kann Karma starten, und was Sie hier sehen jetzt ist, dass Karma hier im Hintergrund zum einen den Chrome gestartet zum anderen wurde bei mir auf meinem zweiten Bildschirm automatisch der Firefox gestartet, den ziehe ich auch einmal hier rüber und sie sehen die Ausgabe sieht relativ unspannend aus, hier steht lediglich drin, dass Chrome und Firefox gestartet worden sind und aktuell nichst zu tun haben. Auf der Konsole sehen wir allerdings, dass meine 5 Tests in beiden Browsern ausgeführt worden sind. Nämlich einmal im Chrom und einmal im Firefox und dass alles erfolgreich war. Da Karma jetzt automatisch auf Änderungen lauscht, kann ich eine beliebige JavaScript Datei verändern zum Beispiel in der Player JS baue ich einen Fehler ein, indem ich hier einfach mal true auf false ändere. Und das ganze speichere und achten Sie mal jetzt hier auf das Konsolenfenster im Hintergrund, sobald ich jetzt Speicher, werden hier meine Test direkt ausgeführt und ich bekomme direkte Rückmeldung dass 4 Tests fehlgeschlagen sind und 6 erfolgreich waren. Wir sehen natürlich nicht nur, dass die fehlgeschlagen sind ich sehe auch, welche fehlgeschlagen sind: "resume shoudl throw an exception" der ist fehlgeschlagen, und ich sehe, dass "Player should be able to play Song" fehlgeschlagen ist. Das Ganze kann ich relativ einfach beheben indem ich das hier zurück auf true ändere. Speichere und nach dem Speichern sind alle Tests wieder automatisch gestartet worden und alles ist Grün. Das ist soweit schon ganz gut. Allerdings möchte ich nicht immer parallelen in ein Konsolenfenster hereinschauen müssen. Was ich nun machen kann, ist ich stopp das ganze mal über control C und wechsel in die Datei Package Jason. Jetzt kann ich in der Package Jason, kann ich nun nämlich folgendes machen, ich kann hier im Bereich scripts ein Test Kommando angeben. Und das Test Kommando lautet Karma Start. Für die Datei karmaconf.js. Und nachdem ich das konfiguriert habe, kann ich nun über NPM Test Karma auch Direkt über NPM starten hier ist ein Fehler drinnen, die Datei heißt natürlich karma.conf nicht karmaconfg. So und jetzt werden meine Test gestartet. Auch hier haben wir noch nicht so viel gewonnen an der Stelle. Ich habe jetzt nur ein anderes Kommando Das tolle ist allerdings ich kann nun in meiner Entwicklungsumgebung, ich nutze jetzt hier als Editor Visual Studio Code, relativ einfach das ganze automatisieren, dazu drücke ich in Visual Studio Code Control shift t oder auf einem Mac command shift t und nun wird Visual Studio mir sagen, dass es aktuell noch keinen konfigurierten Task Runner gibt. Das ganze konfiguriere ich, nun jetzt bekomme ich hier eine relativ umfangreiche Beispieldatei nämlich vscodetask.jason und in der kann ich jetzt verschiedene Tasks konfigurieren. All das was hier drin ist das lösche ich. Zum großen Teil wieder. So. Und editiere nur diesen oberen Bereich an der Stelle. Zum einen braucht mein Task eine Versionsnummer zum anderen braucht er einen command in meinem Fall ist das command NPM für den Node Package Manager. Das Ganze ist ein Shell Script. Die Ausgabe möchte ich immer sehen. An Args brauche ich nichts zu übergeben. Aber ich muss Tasks anlegen, also sage ich hier Tasks. Und das ist ein neues Array und in diesem Array habe ich aktuell ein Element und zwar ein Element mit dem ich teste. Dazu gebe ich meinem Task einen Namen: Task name = Test. Und ich sage, das ist kein Bildcommand. Sondern das ist ein Testcommand. Ich möchte immer die Ausgabe sehen. Und nun muss ich noch... Meine Argumente angeben. Und meine Argumente sind... Einfach die Ausführung des Skriptes Test, was ich hier in der Package Jason konfiguriert habe. Was ich jetzt machen kann ist, ich kann nun Wieder command shift t oder Control shift t drücken. Anschließend werden jetzt meine Test gestartet, Sie sehen das hier im Hintergrund öffnen sich der Browser, hier unten sehe ich die Ausgabe und die sehe ich jetzt dauernd in meinem Visual Studio Code. Sobald ich also hingehe und eine Datei editiere,... Sehen Sie hier unten, die Tests sind ausgeführt worden, außerdem bekomme ich die Rückmeldung, dass 4 Tests fehlgeschlagen sind und 6 erfolgreich waren. So ich behebe das wieder und danach laufen meine Tests sofort. Wir haben also in diesem Video folgendes gesehen: Neben der Möglichkeit Jasmine Test über einen Web Browser oder über dem mitgelieferten Consolen Runner laufen zu lassen, können wir Jasmine Tests auch über einen externen Testrunner zum Beispiel über Karma vom Angular JS Team ausführen. Karma hat den großen Vorteil, dass Karma zum einen Tests in Browsern und zwar in mehreren Browsern gleichzeitig ausführen kann. Außerdem kann Karma auf Änderungen im Dateisystem lauschen und sobald eine Änderung auftritt, werden automatisch alle Tests ausgeführt. Wenn ich jetzt dazu nicht ständig ein Konsolenfenster geöffnet haben möchte, sondern die Ausgabe der Test direkt in meiner Entwicklungsumgebungb sehen möchte, dann kann ich das in den meisten Entwicklungsumgebungen auch direkt konfigurieren. Ich habe ihn das hier am Beispiel von Visual Studio Code gezeigt, indem ich mir eine neue Datei nämlich die Tasks Jason angelegt habe. In der task Jason habe ich NPM als Kommando hinterlegt und dann den Test Task konfiguriert. Ausführen konnte ich den Test dann einmalig über Command shift t oder Control shift t und das Ergebnisse sehe ich fortlaufend bei jeder Code-Änderung.

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!