Karma erwarten

Dieses Projekt basiert auf James Shore: Lassen Sie uns Code: Test Driven Javascript Lektionen (Kapitel 7, Cross-Browser Testing). Wir werden einen Client-Seite Test-Framework mit Grunt als Aufgabe Starter, Karma als Test-Läufer, Mokka als Test-Framework und erwarten als Behauptung Bibliothek einzurichten.

Karma ist ein Test-Läufer. Sie können Ihren JavaScript-Code auf vielen Browsern gleichzeitig testen. Der Testprozess kann automatisiert werden, und es kann automatisch als Code Wechsel ausgeführt werden. Wie seine Homepage sagt

Karma ist im Wesentlichen ein Werkzeug, das einen Web-Server, der verbunden laicht für jeden der Browser-Quellcode gegen Test-Code ausführt. Die Ergebnisse für jeden Test gegen jeden Browser über die Kommandozeile in den Entwickler, so dass sie sehen können, welche untersucht und angezeigt Browser und Tests bestanden oder nicht bestanden.

Karma läuft auf Node.js. Wenn Sie auf einem Windows-Rechner arbeiten, oder Sie haben nicht Node.js noch verwendet, diesen Beitrag können Sie diese Tools ausprobieren helfen. Ok, also lassen Sie uns Karma installieren.

(Nehmen wir an, dass Sie installiert Node.js und Sie haben eine package.json Datei in Ihrem Arbeitsverzeichnis)

Nach der Installation macht ein Skript, das Karma starten kann:

Laufen Karma ohne Parameter wir diese Meldung erhalten:

Jetzt können wir Karma initialisieren:

Wir müssen installieren Mocha (oder einem anderen Test-Framework) Karma zu verwenden. Neben Mokka, installieren wir Karma-Mokka, einen Adapter für Mocha:

Jetzt können wir Karma-Server starten:

Wie Sie Karma-Server sehen können unter http gestartet: // localhost: 9876 /. Ich Sie einen Browser ausführen, und geben Sie diese URL verbindet das Karma an den Browser:

Sie können so viele Browser verbinden, wie Sie (die verfügbaren Browser hier check out) wollen. Wenn Sie einen Browser von Virtualbox (z IE8 unter Windows) starten möchten, sind hier einige gute Tipps, wie localhost zu adressieren.

Wir haben Karma-Server, aber noch nichts zu testen. Lassen Sie uns installieren Karma erwarten, die Expect.js Adapter zuerst:

Dann müssen wir in dem Rahmen in der Karma-Config-Datei erwarten (karma.conf.js):

Lassen Sie uns einen einfachen Test schreiben, die zwei Strings vergleicht:

Starten Sie nun wieder den Karma-Server (weil wir seine Konfigurationsdatei gerade jetzt geändert haben) und den Test in einem anderen Terminal ausgeführt (und stellen Sie sicher, dass Sie mindestens einen Browser Karma verbunden ist):

Wir werden Grunt für die Automatisierung von Aufgaben zu verwenden. Der Arbeitsablauf ist wie folgt:

  • Start Karma-Server
  • starten Sie den Browser manuell (wenn Sie virtuelle Maschine für einigen exotischen Browser verwenden, die Maschine starten, und starten Sie sich, diesen Browser)
  • verbindet den Browser auf den Karma-Server (siehe oben)
  • Start Grunzen
  • Grunzen läuft Karma Code zu testen, und prüft, ob die Tests bestanden oder nicht bestanden

Zuerst müssen Sie Grunt. Nach der Installation von Grunt lass es laufen:

Wir haben eine einfache Gruntfile erstellen und konfigurieren Karma (oder wenn Gruntfile vorhanden ist, fügen Sie Karma dazu). Wir erreichen dies mit Node.js child_process.exec ():

Grunt arbeitet synchron, aber es kann durch den Aufruf this.async () innerhalb des Task Körpers (für weitere Informationen siehe Grunt Dokumentation) asynchron geschaltet werden.

Vielleicht möchten Sie ein Feedback bekommen, wenn die Tests bestanden. Nach Angaben der Node.js Dokumentation des Fehlerargument - durch den Rückruf bekommen - auf Erfolg null sein. Alles, was wir vergeht falsch an dem getan () -Methode bei Grunt zu signalisieren, wenn die Tests nicht bestanden tun müssen.

Wenn wir Karma-Server starten, unsere Browser starten und schließen Sie sie und führen Sie Grunt, dann können wir folgendes sehen:

Und jetzt nur mit Chrome, mal sehen, was passiert, wenn der Test nicht bestanden:

Unser Ziel war es, einen einfachen Cross-Browser-Test-Framework, mit Karma einzurichten. Wir brauchten ein Test-Framework - es war Mokka - und einige Behauptung Bibliothek (ich wählte Expect.js). Zuerst installiert wir Karma und konfiguriert es, dann installiert Mokka und Expect.js Adapter für Karma. Nach Installationen konnten wir Karma Server und verbinden Browser, um es starten. Wir schrieben einen einfachen Test, ad lief es mit Karma. Wir wollten den Testlauf, mit Grunt, die Aufgabe Läufer automatisieren. Wir konfiguriert ist, eine Aufgabe, die Karma als Kind Prozess zu starten, und prüfen Sie, ob die Tests bestanden oder nicht bestanden.

Als ich den Rahmen für die Einrichtung arbeitete, habe ich versucht, Grunzen-Karma, ein Karma runner-Plugin für Grunt. Es ist wirklich nützlich, können Sie einfach konfigurieren Karma mit diesem. zusätzlichen Browser-Launcher-Plugins Nach der Installation, Sie tun müssen, um Karma nicht zu starten und den Browser manuell verbinden, Grunt macht die Arbeit, es den Server startet, startet die angegebenen Browser, die Tests ausführen, schließt den Browser und den Karma-Server (Single Run-Modus). Darüber hinaus können Sie festlegen, - wenn Ihre Testdateien geändert werden - Karma automatisch ausgeführt wird. Aber ich Schwierigkeiten hatte, als ich versuchte, Browser in der virtuellen Maschine gestartet zu verbinden (Ich brauche vm verschiedene Arten von Internet Explorers zu laufen). Der Karma Läufer kann nicht, dass Browser sehen. Ich habe versucht, ‚node-VirtualBox‘ und viele Plugins, die mit virtuellen Maschinen funktionieren, aber ich konnte nicht stimmen, um sie mit Grunzen-Karma-Plugin zu arbeiten. Nach dem Experimentieren mit Grunzen-karma, verließ ich es und dachte einen Arbeitsablauf aus, dass der Karma-Server und den gegebenen Browser manuell starten muss, aber die Prüfung kann durch Grunt automatisiert werden.


Unit Testing React.js Mit Jasmin und Karma

Ich habe schon mehrmals React.js worden zu erwähnen. Vor kurzem hatte ich Gelegenheit, mit ihm zu spielen eng.

Ich wollte es auch machen von Anfang an. Ich wollte Unit-Tests.

Meine Auswahl an Rahmen ist Jasmine

Schnellsuche für das Arbeitsbeispiel gab nur diese


Code Coverage von Jasmin Tests mit Istanbul und Karma

Für die moderne Web-Anwendungsentwicklung, Dutzende von Unit-Tests, die ist nicht mehr genug. Die tatsächliche Code-Coverage dieser Tests würde zeigen, wenn die Anwendung gründlich beansprucht wird oder nicht. Für schriftliche Tests der berühmte Jasmine Test-Bibliothek, eine einfache Möglichkeit, die Abdeckung Bericht haben, ist über Istanbul und Karma.

Für dieses Beispiel nehmen wir an, dass wir eine einfache Bibliothek sqrt.js haben, die eine alternative Implementierung von Math.sqrt enthält. Beachten Sie, wie auch wird es eine Ausnahme statt Rückkehr NaN für einen ungültigen Eingang werfen.

Mit Jasmin platziert unter Test / lib / Jasmin-1.3.1, können wir einen Test Runner Handwerk, das die folgende Spezifikation beinhaltet:

die Spezifikation Läufer in einem Web-Browser öffnet, wird das erwartete Ergebnis geben:

Karma erwarten

So weit, ist es gut. Nun wollen wir sehen, wie der Code Coverage unserer Testaufbau gemessen werden kann.

Der erste Auftrag des Geschäfts ist Karma zu installieren. Wenn Sie nicht vertraut mit Karma sind, ist es im Grunde ein Test Läufer, die starten und auf eine bestimmte Gruppe von Web-Browsern verbinden, führen Sie Ihre Tests, und dann den Bericht sammeln. Mit Node.js, was wir tun müssen, ist:

Bevor Karma starten, müssen wir seine Konfiguration angeben. Es könnte so einfach sein wie die folgenden my.conf.js (die meisten Einträge selbst erklärt sind). Beachten Sie, dass die Tests ausgeführt werden, unter Verwendung von PhantomJS der Einfachheit halber ist es jedoch ziemlich trivial anderen Web-Browser hinzufügen wie Chrome und Firefox.

Durchführen der Tests, sowie die Durchführung von Code-Coverage zur gleichen Zeit, kann über ausgelöst werden:

was wird Dump die Ausgabe wie:

Wie erwartet (aus dem vorherigen manuellen Aufruf des spec runner), bestand der Test gut. Allerdings ist das besonders interessantes Stück hier ist der Code-Coverage-Bericht, es gespeichert wird (im Standardverzeichnis) unter dem Unterverzeichnis Abdeckung. Öffnen Sie den Bericht in Ihrem Lieblings-Browser und dort werden Sie die Coverage-Analyse-Bericht finden.

Karma erwarten

Hinter den Kulissen wird Karma mit Istanbul, ein umfassenden Code-Coverage-Tool JavaScript (lesen Sie meinen früheren Blog-Eintrag auch auf JavaScript-Code Coverage mit Istanbul). Istanbul analysiert die Quelldatei, in diesem Beispiel sqrt.js, mit Esprima und fügt dann etwas mehr Instrumentierung Welche wird die Ausführungsstatistiken sammeln verwendet werden. Der obige Bericht, den Sie sehen, ist einer der möglichen Ausgänge, Istanbul kann auch lcov Bericht erzeugen, die für viele kontinuierliche Integrationssysteme (Jenkins, Teamcity, usw.) geeignet ist. Eine umfassende Analyse der Berichterstattung Daten sollten auch zukünftige Berichterstattung Regression Besuche meine anderen post Fest Thresholds auf JavaScript-Code Coverage verhindern.

Eine wichtige Sache, über Code Coverage ist Zweigüberdeckung. Wenn Sie die Aufmerksamkeit sorgfältig zahlen, über unseren Test übt immer noch nicht die Situation, in der der Eingang zu My.sqrt negativ ist. Es gibt eine große &# 8220; I&# 8221; in der dritten Zeile der Codemarkierung, dies sagt uns, dass das Istanbul ob Zweig ist überhaupt nicht genommen (für die sonst Zweig, wird es ein &# 8220; E&# 8221; Marker). Sobald diese fehlenden Zweig bemerkt wird, ist es, die Situation zu verbessern ist so einfach wie das Hinzufügen einer weiteren Prüfung der Spezifikation:

Sobald der Test erneut durchgeführt wird, sieht der Code-Coverage-Bericht viel besser und jeder ist glücklich.


Unit Testing mit Karma und Jasmin in Angular 2

Karma erwarten

Angular 2 bietet mehrere Optionen Unit Testing zu unterstützen. In hier decken wir, wie die Einrichtung Jasmin, Karma und einige gemeinsame Unit-Tests für Ihre Angular 2 Anwendungen schreiben.

  • Vorbereiten der package.json für neue Bibliotheken
  • Einführung in die Jasmin und Karma
  • Einrichten von Karma
  • Der erste Karma Test
  • Testen Angular 2 Komponenten mit Jasmin

Um zum Spaß so schnell wie möglich, können wir ein neues Projekt nach den Anweisungen in dem Quickstart starten. Und stellen Sie sicher, dass das Projekt Ordnerstruktur wie folgt aussieht:

Vorbereitung der package.json für neue Bibliotheken

ändern Sie die &# 8220; Skripte&# 8221; Immobilien in der package.json wie folgt:

Wir haben eine Reihe von NPM-Skripte in unseren vorgeschlagenen enthalten package.json gemeinsame Entwicklungsaufgaben zu bewältigen. Hier ist, was diese Skripte zu tun:

  • npm Start - führt die Compiler und einen Server zur gleichen Zeit, sowohl in „Watch-Modus“
  • npm laufen lite - läuft den Lite-Server, ein leichtgewichtige, statischen Dateiserver mit hervorragender Unterstützung für Angular-Anwendungen, die Routing verwenden.
  • npm Lauf post - genannt von npm automatisch, nachdem sie erfolgreich abgeschlossen Paketinstallation. Dieses Skript installiert die Typoskript Definitionsdateien in typings.json definiert.
  • npm Lauftest &# 8211; kompiliert Typoskript Dateien, läuft Unit-Tests und dann den erstellten Bericht öffnen
  • npm Lauf tsc - führt die Typoskript Compiler einmal
  • NPM laufen tsc: w - führt die Typoskript Compiler im Watch-Modus; der Prozess läuft weiter, Änderungen wartet auf Dateien und neu kompilieren Typoskript, wenn er sie sieht
  • npm laufen Typisierungen - führt die Typisierungen Tool separat

Außerdem müssen wir Karma und alle anderen Abhängigkeiten installieren. Wir ändern die &# 8220; devDependencies&# 8221; Eigenschaft wie folgt:

Mit NPM über die Befehlszeile installieren Sie die aufgelisteten Pakete in package.json mit dem Befehl:

Mit einem Terminal-Fenster, werden wir benötigt werden, um in das Verzeichnis zu ändern, arbeiten wir vor den Befehlen

Fehlermeldungen in rot-möglicherweise während der Installation angezeigt werden, und Sie können sehen npm Nachrichten warnen. Solange es keine npm ERR ist! Meldungen am Ende, können Sie Erfolg übernehmen.

Einführung in die Jasmin und Karma

Jasmin ist eine offene Test-Framework Quelle aus Pivotal Labs dass verwendet Verhalten getriebene Notation, was zu einer fließend und verbesserter Testerfahrung.

  • Suites - beschreiben (string, Funktion) Funktionen, nehmen Sie einen Titel und eine Funktion ein oder mehrere Spezifikationen enthalten.
  • Specs - es (string, Funktion) Funktionen, nehmen Sie einen Titel und eine Funktion ein oder mehr Erwartungen enthält.
  • Erwartungen - sind Aussagen, die wahr oder falsch beurteilen. Basic-Syntax liest erwarten (Ist) .toBe (erwartet)
  • Matchers - sind vordefinierte Helfer für allgemeine Behauptungen. Z.B: Tobe (erwartet), toEqual (erwartet). Finden Sie eine komplette Liste hier.

Das Karma Testläufer ist ideal für das Schreiben und Unit-Tests laufen, während die Anwendung zu entwickeln. Es kann ein integraler Bestandteil des Projekts&# 8217; s Entwicklung und kontinuierliche Integrationsprozesse. In diesem Kapitel wird beschrieben, wie mit Karma zu installieren und laufen Tests.

Mit kantigen 2 muss Karma eine Art Initialisierungsdatei, die unsere App-Dateien aus unseren Testdateien diferentiate und es lädt die systemjs.config.js Datei als Teil dieses Prozesses .. Wir werden eine Datei mit dem Namen hinzugefügt werden Karma-Test-shim.js in unserem Stammverzeichnis wie folgt:

Karma muss auch eine Konfigurationsdatei, die legt fest, welche Dateien geladen werden sollen und welche Browser sollten zum Testen verwendet werden. Diese neue Datei mit dem Namen karma.conf.js werden in unserem Stammverzeichnis hinzugefügt werden:

Wir&# 8217; ll mit einem einfachen Test starten, um sicherzustellen, dass das Setup ordnungsgemäß funktioniert. Es&# 8217; s oft besser, einen entsprechenden Ordner für sie in den Tests Verzeichnis zu erstellen. Also wir&# 8217; ll eine neue Datei erstellen aufgerufen 1st.spec.ts in der app / testet Ordner.

Tests in Jasmine geschrieben werden Spezifikationen genannt. Die Dateinamenerweiterung muss sein .spec.ts, die Konvention eingehalten durch karma.conf.js und andere Werkzeuge.

Setzen Sie spec Dateien irgendwo im app / Ordner. Das karma.conf.js es sagt Karma für spec-Dateien zu suchen

Fügen Sie den folgenden Code app / tests / 1st.spec.ts:

Kompilieren Sie und führen Sie es in Karma aus der Kommandozeile.

Nach wenigen Sekunden wird das Karma einen Browser und startet mit der Konsole zu schreiben.

Außerdem können wir die Debug-Modus anzeigen lassen, indem Sie auf die &# 8220; DEBUG&# 8221; Taste; es öffnet sich ein neues Browser-Tab und wieder führt die Tests durch.

Dieser Befehl kompiliert zunächst die Anwendung, dann gleichzeitig erneut kompiliert und betreibt den Karma Test-Läufer. Sowohl die Compiler und die Karma Uhr für die (andere) Dateiänderungen.

Schalten Sie ihn manuell mit Strg-C.

Testen Angular 2 Komponenten mit Jasmin

Wir&# 8217; ll die Datei hinzufügen, benannt app / app.component.spec.ts sitzt im selben Ordner wie die Komponente.

Beginnen Sie mit ES6 Import-Anweisungen Zugriff auf Symbole in der Spezifikation verwiesen zu bekommen:

Hier&# 8217; s das Setup für die von Beobachtungen über die before gefolgt Tests:

Konfigurieren Sie die TestBed nach dem Aufruf create.

Lassen Sie uns nun neu kompilieren und es in Karma von der Kommandozeile aus und die Änderungen aus der Sicht Debug-Modus sehen.

Test-Läufer Ausgabe erscheint im Terminalfenster. Wir können unsere App und unsere Tests in Echtzeit, halte ein Wetter Auge auf der Konsole für Bruchtests aktualisieren. Karma ist gelegentlich verwirrt und es ist oft notwendig, seinen Browser zu schließen oder sogar den Befehl Herunterfahren (Strg-C) und starten Sie ihn neu. Keine Bange; es&# 8217; s ziemlich schnell.

Lassen Sie uns überprüfen wir die folgende Struktur haben:

Das Repository für dieses Projekt ist hier verfügbar.


RunKit + Karma erwarten

Dies ist ein Spielplatz Testcode. Es läuft eine vollständige Umgebung Node.js und hat bereits alle npm ‚s 400.000 Pakete vorinstalliert, einschließlich Karma-erwarten-maptalks mit allen npm Pakete installiert. Versuch es :

Dieser Service wird von RunKit zur Verfügung gestellt und ist nicht mit npm, Inc. oder den Paketautoren dem Unternehmen assoziiert.