Karma-Tutorial: Testen von Front-End-Einheiten mit Karma Test Runner

karma tutorial front end unit testing using karma test runner

In diesem Tutorial wird erklärt, wie Sie Karma einrichten und Front-End-Unit-Tests mithilfe von Karma automatisieren, grundlegende Konfigurationsoptionen für die Datei Karma.conf.js usw.:

In diesem Tutorial wird das Verfahren zum Automatisieren des Komponententests des Frontends der Software mithilfe von Karma und einigen zugehörigen Tools erläutert.

Wir beginnen mit Webanwendungen, die mit der JavaScript-Bibliothek entwickelt wurden: 'Jquery' und JavaScript-Laufzeit: 'NodeJS'; und später werden wir uns einige JavaScript-Frameworks wie AngularJS und ReactJS ansehen.

=>RUNTERSCROLLENum die gesamte Liste der Karma-Tutorials zu sehen

Was du lernen wirst:

• Liste der Karma-Tutorials
• Übersicht der Karma-Tutorials in dieser Reihe
• Was ist Front-End-Unit-Test?
• Was ist Karma Test Runner?
  • Wie funktioniert Karma als Testrunner?
• Was ist NodeJS?
  • Was ist Node Package Manager (Npm)?
• Wie installiere ich Karma?
  • Übersicht über die Dateikonfigurationsoptionen von Karma.conf.js
• Karma init Fragen
  • Anderer karma.conf.js-Dateiinhalt
  • Karma Browser Launchers
• Fazit
  • Literatur-Empfehlungen

Liste der Karma-Tutorials

Tutorial Nr. 1: Karma-Tutorial: Testen von Front-End-Einheiten mit Karma Test Runner
Tutorial # 2: Jasmine Framework Tutorial mit Jasmine Jquery und Beispielen
Tutorial # 3: Beispielprojekt zum Testen von Front-End-Einheiten mit KARMA und JASMINE

Übersicht der Karma-Tutorials in dieser Reihe

Was ist Front-End-Unit-Test?

Das Front-End eines jeden Softwaresystems ist einfach die Schnittstelle, über die der Benutzer auf alle vom System bereitgestellten Funktionen zugreift. Um die bestmögliche Benutzererfahrung zu gewährleisten, muss sichergestellt werden, dass die Front-End-Entwickler das Front-End codiert haben, indem alle Benutzeranforderungen berücksichtigt werden.

Die einzige Möglichkeit, dies durchzusetzen, besteht darin, Tests über die Codes des Entwicklers zu schreiben und auszuführen. Das Ergebnis sollte nur dann als qualitativ hochwertiger Front-End-Code / Feature akzeptiert werden, wenn sich alle diese Testergebnisse im Status 'Bestanden' befinden.

Unit-Tests sind eine Art Software-Testmethode, bei der jeder einzelne und unabhängige Teil des Quellcodes getestet wird, um festzustellen, ob er für die Verwendung gut genug ist.

Wenn wir Führen Sie diesen Komponententest auf dem Front-End (Client-Seite) der Software durch. Dies wird als Front-End-Komponententest bezeichnet. Das Gegenteil von Front-End-Tests sind Back-End-Tests (serverseitig).

Front-End-Unit-Tests können manuell oder automatisch durchgeführt werden. Automatisierte Front-End-Unit-Tests liegen heutzutage im Trend, da sie effektiver und zeitsparender sind. Für Front-End-Unit-Tests auf verschiedenen Programmierplattformen stehen verschiedene Tools zur Verfügung.

AngularJS und ReactJS sind zwei beliebte Front-End-JavaScript-Frameworks, obwohl ReactJS ziemlich neu ist.

Um Unit-Tests für eine Anwendung durchzuführen, werden die Front-Ends verwendet, die mit diesen Front-End-Frameworks erstellt wurden, oder sogar diejenigen, die ohne die Frameworks erstellt wurden. Bestimmte Automatisierungstest-Tools wie Karma, Mokka, Jasmin, Scherz, Enzym usw. werden verwendet.

Zuerst würden wir lernen, wie man Front-End-Unit-Tests mit Karma und Jasmine durchführt, und später können wir uns auch die anderen Tools ansehen.

Wir beginnen mit der Ausführung von Front-End-Unit-Tests mit Fixtures für Front-Ends, die ohne eines der JavaScript-Frameworks für Front-Ends erstellt wurden. Insgesamt werden wir unsere Erkenntnisse in dieser Reihe in drei Tutorials aufteilen.

In diesem allerersten Tutorial würden wir versuchen, einen Überblick über die Einrichtung von Karma zu bekommen. Das zweite Tutorial erklärt Jasmine im Detail. Im dritten Tutorial werden wir uns schließlich mit seiner praktischen Anwendung befassen.

Was ist Karma Test Runner?

Karma ist ein knotenbasiertes Testtool, mit dem Sie Ihre JavaScript-Codes in mehreren echten Browsern testen können. Ein knotenbasiertes Tool ist ein Tool, für dessen Ausführung die Nodejs-Engine installiert sein muss und auf das über den Node Package Manager (npm) zugegriffen (installiert) werden kann.

Karma ist ein Tool, mit dem unsere testgetriebene Entwicklung schnell, unterhaltsam und einfach ist. Es wird technisch als Testläufer bezeichnet. Es ist bemerkenswert zu erwähnen, dass Karma vom Angular-Team entwickelt wurde.

Wie funktioniert Karma als Testrunner?

Als Testläufer macht Karma drei wichtige Dinge:

• Es startet einen Webserver und stellt Ihre JavaScript-Quell- und Testdateien auf diesem Server bereit.
• Lädt alle Quell- und Testdateien in der richtigen Reihenfolge.
• Schließlich werden Browser gestartet, um die Tests auszuführen.

Was kann Karma sonst noch tun?

Abgesehen von den oben aufgeführten Funktionen von Karma gibt es noch einige andere Dinge, für die Karma konfiguriert werden kann. Beispielsweise, Codetestabdeckung zu veröffentlichen coveralls.io ;; Transpilieren Sie einen Code vom es6-Format in es5, bündeln Sie mehrere Dateien zu einer Datei und generieren Sie Quellkarten.

In unseren nachfolgenden Tutorials werden wir sehen, wie einige dieser Dinge funktionieren.

Voraussetzungen für den Einstieg in Karma

Um mit Karma beginnen zu können, müssen Sie mit NodeJS und Node Package Manager vertraut sein.

Was ist NodeJS?

Nodejs löst die Blockierungsnatur von asynchronen JavaScript-Aufrufen, d. H. Wenn auf eine asynchrone Funktion in JavaScript zugegriffen wird, wird verhindert, dass die anderen Teile des Codes ausgeführt werden, bis der asynchrone Aufruf zurückkehrt. Mit NodeJS können jedoch asynchrone nicht blockierende Funktionsaufrufe durchgeführt werden.

In technischer Hinsicht kann NodeJS als asynchrone ereignisgesteuerte JavaScript-Laufzeit bezeichnet werden, die das Erstellen skalierbarer Netzwerkanwendungen einfach und möglich macht.

Erste Schritte mit NodeJS

Sie müssen lediglich das NodeJS-Framework installieren. Alles was Sie tun müssen, ist ihre zu besuchen Webseite Abhängig von Ihrem Betriebssystem müssen Sie das Installationsprogramm herunterladen und den Anweisungen auf der Website zur Installation folgen.

Was ist Node Package Manager (Npm)?

Der Node Package Manager (npm) ist ein JavaScript-Paketmanager, der zum Installieren anderer vorgefertigter knotenbasierter Anwendungen oder Module verwendet wird, die Sie möglicherweise in Ihrer eigenen Anwendung wiederverwenden möchten.

Npm wird installiert, wenn Sie NodeJS installieren, aber npm wird schneller aktualisiert als der Knoten. Daher müssen Sie möglicherweise irgendwann Ihre npm aktualisieren. Um die neueste Version von npm zu installieren, müssen Sie diesen Befehl über Ihre Befehlszeile ausführen: npm installiere npm @ latest -g

Der obige Befehl gibt an, dass Sie die Betriebssystem-Shell auffordern, die Anwendung npm auszuführen, und dass die Anwendung die Installation des Pakets npm durchführen soll. @latest gibt an, dass die neueste Version des Pakets installiert werden soll. Die Option -g gibt an, dass das Paket global installiert werden soll.

Weitere Details zu npm finden Sie hier Hier .

Es gibt zwei wichtige Dinge, die hier erwähnt werden sollten, d. H. Das Installieren eines Pakets mit den Optionen –save und –save-dev.

Während der Tests sollte jedes installierte Paket mit der Option –save-dev installiert werden, d. H. Um den Paketmanager anzuweisen, das Paket als Entwicklungsabhängigkeit und nicht als Projektabhängigkeit zu installieren (wenn ich –save verwende).

Die Entwicklungsabhängigkeit sollte gewählt werden, da dieses Paket von der Anwendung während der Produktionsphase nicht benötigt wird, sondern nur während der Entwicklungsphase zur Qualitätssicherung.

Wie installiere ich Karma?

Um mit Karma zu beginnen, müssen Sie einen Ordner für das Projekt erstellen, für das Sie die Komponententests schreiben möchten. Sie können es wie 'basicUT' nennen. Ich verwende Visual Studio Code als Texteditor, daher empfehle ich Ihnen auch, ihn herunterzuladen und zu installieren. Du kannst es finden Hier .

Öffnen Sie das in Visual Studio Code integrierte Terminalfenster, klicken Sie auf das Menü 'Ansicht' und wählen Sie das integrierte Terminal-Untermenü aus.

Geben Sie im Terminalfenster 'npminit' ein, wie in der folgenden Abbildung gezeigt. Mit diesem Befehl können Sie automatisch die Datei 'package.json' einrichten, die jede knotenbasierte Anwendung haben muss.

In der Datei package.json werden Informationen zu Ihrer Anwendung gespeichert, z. B. Name, Versionsnummer, Autor, Anwendungsabhängigkeiten, Entwicklungsabhängigkeiten, Testbefehl oder Skript und Skript, um die Anwendung zu starten oder die App in eine ausführbare Form zu erstellen.

Klicken Hier Weitere Informationen finden Sie in der Datei 'package.json'.

Screenshot der Initialisierung einer package.json-Datei mit npminit

Wie oben beschrieben, müssen Sie zur Installation von Karma nur den Befehl ausführen npm installiere Karma @ latest –save-dev . Ich hoffe, dass Sie jetzt interpretieren können, was dieser Befehl impliziert.

Jetzt haben wir Karma erfolgreich installiert. Was müssen Sie als Nächstes tun, um Karma für Ihre Front-End-Unit-Tests zu verwenden?

Alles, was Sie tun müssen, ist die Konfigurationsdatei dafür zu schreiben, und die Datei wird normalerweise als Karma.conf.js für JavaScript bezeichnet. Bei CoffeeScript ist dies jedoch anders. Klicken Hier um mehr über die Karma-Konfigurationsdatei zu erfahren.

Übersicht über die Dateikonfigurationsoptionen von Karma.conf.js

Die Konfigurationsdatei von Karma.conf.js sollte die Setup-Anweisung enthalten, die Karma befolgen muss, um die drei wichtigen Funktionen von Karma auszuführen.

Diese Konfigurationsdatei kann manuell oder automatisch mit dem Befehl 'karma init' erstellt werden, mit dem verschiedene Fragen angezeigt werden, die Sie beantworten müssen. Karma verwendet die von Ihnen angegebenen Antworten zum Einrichten der Konfigurationsdatei.

Sie hätten inzwischen festgestellt, dass das Ausführen des Befehls 'karma init' den Fehler ausgibt '' 'Karma' wird nicht als internes oder externes befehlsfähiges Programm oder Batch-Datei erkannt ”.

Dies liegt daran, dass Karma lokal und nicht global in dem Projekt installiert wurde, an dem Sie arbeiten. Daher kann Ihre Betriebssystem-Shell die Anwendung Karma in ihren Pfadumgebungseinstellungen nicht finden, wenn Sie Windows verwenden, oder in der Datei .bash_profile, wenn Sie einen Mac verwenden.

Um diesen Fehler zu beheben, müssen wir Karma global installieren. Nicht nur Karma, sondern das Paket, das speziell entwickelt wurde, um die Verwendung von Karma über die Befehlszeile Karma-cli zu ermöglichen. Führen Sie einfach den Befehl aus, 'Npm install -g karma-cli' .

Führen Sie nun den Befehl karma-init erneut aus, und Sie können die Fragen wie in der folgenden Abbildung gezeigt sehen. Wenn Sie jede Frage beantworten und die EINGABETASTE drücken, wird die nächste Frage angezeigt.

Ausführen des Karma init-Befehls in der Befehlszeile.

In der folgenden Tabelle finden Sie eine Liste der Fragen, deren Bedeutung sowie Ihre Antwort im Kontext dieses Lernprogramms.

Karma init Fragen

F # 1) Welches Testframework möchten Sie verwenden?

Erläuterung: Ein Testframework ist ein Paket, das die Funktionen und Routinen bereitstellt, die zur Automatisierung des Codierungsprozesses von Tests für jedes Softwareprodukt einer bestimmten Sprache erforderlich sind. Zum Beispiel, Jasmin und Mokka testen Frameworks für JavaScript-Softwarepakete, Junit und JTest testen Frameworks für Java Dies für mehr Details.

Antworten: In einer Anweisung werden Sie aufgefordert, auf der Registerkarte andere verfügbare Testframeworks für eine knotenbasierte Anwendung anzuzeigen. Standardmäßig wird jedoch Jasmin angezeigt. Klicken Sie einfach auf die Eingabetaste.

F # 2) Möchten Sie Require.js verwenden?

Erläuterung: Require.js ist ein JavaScript-Datei- und Modullader. Sie fragen sich vielleicht: Warum benötigen Sie einen Datei- oder Modullader? Lesen Dies

Antworten: In dem Code, den wir schreiben werden, würde ich require.js nicht verwenden, also antworte einfach nein. Die Frage ist, was würden wir verwenden? Um die require-Anweisungen verwenden zu können, um externe Dateien in eine andere Datei einzufügen, benötigen wir einen Modullader, sodass wir uns für Browserify entscheiden würden. Weitere Details finden Sie weiter unten.

F # 3) Möchten Sie Browser automatisch erfassen?

Erläuterung: Denken Sie daran, dass Karma ein Tool ist, mit dem Sie Ihr Front-End in verschiedenen Browsern testen können. Daher sollten Sie mit dieser Frage die Browser auswählen, die Sie gerne jedes Mal starten würden, wenn Sie den Test mit Karma-Start ausführen.

Antworten: Wählen Sie für diese Lektion Chrome, Firefox und Phantomjs aus. Die Frage ist nun, was ist PhantomJS? PhantomJS ist ein kopfloser Webbrowser, der für kopflose Website-Tests, Bildschirmaufnahmen, Seitenautomatisierung und Netzwerküberwachung gedacht ist. Sie können Details sehen Hier .

Eine andere Frage, was ist ein kopfloser Webbrowser? Ein kopfloser Webbrowser ist ein Browser ohne grafische Benutzeroberfläche. Die Codes werden in einer konsolenähnlichen Umgebung ausgeführt.

F # 4) Wo befinden sich Ihre Quell- und Testdateien?

Erläuterung: Diese Frage soll den Pfad offenlegen, in dem Sie die Front-End-Dateien und die Testdateien speichern, mit denen Unit-Tests durchgeführt werden.

Antworten: Geben Sie für dieses Projekt public / js / *. Js als Pfad für die Quelldateien und test / * Spec.js als Pfad für die Testdateien ein. Die * Spec.js gibt an, dass alle Testdateien beliebig aufgerufen werden können, aber am Ende Spec mit der Dateierweiterung .js enthalten müssen.

F # 5) Sollte eine der in den vorherigen Mustern enthaltenen Dateien ausgeschlossen werden?

Erläuterung: Manchmal kann es erforderlich sein, dass bestimmte Quelldateien und Testdateien nicht geladen werden. Diese Frage dient dazu, solche Dateien anzugeben, die von Karma nicht in den Browser geladen werden sollen.

Antworten: Geben Sie einfach eine leere Zeichenfolge ein, indem Sie die Eingabetaste drücken. Haben Sie die Aussage „Sie können Glob-Muster verwenden? Zum Beispiel, '** / *. Swp'. ' Glob-Muster werden verwendet, um eine Reihe von Dateinamen in einer Unix-ähnlichen Umgebung mithilfe des Platzhalterzeichens anzugeben.
In unserem Fall steht public / js / *. Js für jede Datei mit einem beliebigen Zeichensatz, wie durch (*) angegeben, hat die Dateierweiterung .js und befindet sich im Pfad public / js. Weiterlesen Hier

F # 6) Möchten Sie, dass Karma alle Dateien überwacht und die Tests bei Änderungen ausführt?

Erläuterung: Wenn ein Task- / Test-Runner Ihre Dateien überwacht, bedeutet dies lediglich, dass jedes Mal, wenn Sie die Dateien während der Entwicklung bearbeiten, der Test- / Task-Runner die Datei neu lädt oder erneut ausführt, die Funktion für die Datei erneut ausgeführt wird, ohne dass Sie manuell danach fragen müssen es, um es wieder zu tun.

Antworten: Also einfach mit Ja antworten.

Anderer karma.conf.js-Dateiinhalt

# 1) basePath : Diese Konfiguration trägt den Namen eines Ordners, der zum Auflösen der für Test- und Quelldateien bereitgestellten Pfadinformationen verwendet werden soll.

# 2) Präprozessoren : Dies trägt den Namen der Programmdateien, die zum Verarbeiten von Quell- und Testdateien verwendet werden sollen, bevor sie in den Browser geladen werden.

Warum wird das benötigt?

Mit dem Aufkommen des ES6-Codierungsstils, der von den Browsern noch nicht verstanden wird, muss der Code vom ES6-Format in ES5 transpiliert werden, was der Browser verstehen kann. Daher kann der Babel-Präprozessor für Karma angegeben werden, der zum Transpilieren des Codes verwendet werden soll Code von ES6 nach ES5, bevor er in den Browser geladen wird.

Es gibt andere Verwendungszwecke eines Präprozessors. Z.B. Veröffentlichung von Codetest-Coverage auf coveralls.io, siehe Hier für mehr Details.

# 3) Reporter : Diese Konfigurationsoption gibt das Paket an, mit dem die Testergebnisse gemeldet werden sollen. Es gibt mehrere Reporter für die Berichterstattung über Codetests. Z.B. Abdeckung. Standardmäßig ist es jedoch auf Fortschritt eingestellt. Beachten Sie, dass es sich um ein Array handelt. Daher können Sie auch andere Reporter hinzufügen.

# 4) Port : Dies gibt den Port an, auf dem der Browser gedreht wird.

# 5) Farben : Gibt an, ob die Reporter die Berichte mit Farben erstellen sollen.

# 6) logLevel : Gibt die Protokollierungsstufe an. Standardmäßig ist config.LOG_INFO eingestellt, was bedeutet, dass nur die Informationen protokolliert werden.

# 7) singleRun : Dies gibt an, ob Karma nach einmaligem Ausführen des Tests beendet werden soll. Wenn true festgelegt ist, führt Karma den Test aus und beendet ihn mit dem Status 0 oder 1, je nachdem, ob der Test fehlgeschlagen oder bestanden wurde. Andernfalls hört Karma nicht auf.

Diese Konfiguration ist für Testzwecke zur kontinuierlichen Integration mit Tools wie TravisCI und CircleCI erforderlich.

# 8) Parallelität : Dies gibt an, wie viele Browser Karma gleichzeitig starten soll. Standardmäßig ist es auf unendlich eingestellt.

Klicken Hier Ausführliche Informationen zu den Karma-Konfigurationsoptionen.

Wenn Sie ein aufmerksamer Lernender sind, müssen Sie diese drei Linien gesehen haben.

Lassen Sie uns dies im folgenden Abschnitt untersuchen.

Karma Browser Launchers

Karma-Firefox-Launcher, Karma-Chrome-Launcher und Karma-Phantomjs-Launcher können allgemein als Browser-Starter für Karma bezeichnet werden.

Karma muss diese unabhängigen Browseranwendungen hochfahren. Daher muss eine Drittanbieteranwendung eine Schnittstelle zu Karma bereitstellen, um den Shell-Befehl auszuführen, mit dem die Browser in jedem Betriebssystem hochgefahren werden, auf dem Karma einen Test ausführt.

Somit sind sie Karma-Browser-Starter für Firefox, Chrome und Phantomjs. Karma zeigt diese Anweisungen an, um uns über die Unfähigkeit zu informieren, diese Anforderungen zu installieren, und fordert uns dann auf, sie manuell selbst zu installieren.

Dazu verwenden wir den Node Package Manager und führen diese Befehle über die Befehlszeile aus: npm installiere Karma-Chrome-Launcher Karma-Firefox-Launcher Karma-Phantomjs-Launcher-Save-Dev

Wir alle müssen Chrome- und Firefox-Browser installiert haben, Phantomjs nicht installiert. Wenn dies zutrifft, müssen Sie es installieren Hier für Details und klicken Sie auf Hier für eine Kurzanleitung.

Fazit

In diesem Tutorial haben wir versucht zu verstehen, worum es beim Testen von Front-End-Einheiten geht. Wir haben auch ein wichtiges Front-End-Tool zum Testen von Einheiten für JavaScript-Software namens Karma eingeführt, ein knotenbasiertes Tool. Wir haben auch die grundlegenden Konfigurationsoptionen für die Datei Karma.conf.js und deren Bedeutung vorgestellt.

einfaches Java-Programm zum Sortieren von Zahlen in aufsteigender Reihenfolge

Imbissbuden

• Unit-Tests sind eine Art Software-Testmethode, bei der jeder einzelne und unabhängige Teil des Quellcodes getestet wird, um festzustellen, ob er für die Verwendung gut genug ist.
• Wenn wir diesen Komponententest auf dem Front-End (Client-Seite) der Software durchführen, wird er als Front-End-Komponententest bezeichnet.
• Karma ist ein knotenbasiertes Testtool, mit dem Sie Ihre JavaScript-Codes in mehreren echten Browsern testen können. Daher wird es als Testläufer bezeichnet.
• Nodejs ist ein asynchrones ereignisgesteuertes Laufzeit-JavaScript, das das Erstellen skalierbarer Netzwerkanwendungen einfach und möglich macht.
• Der Node Package Manager (npm) ist ein JavaScript-Paketmanager, der zum Installieren anderer vorgefertigter knotenbasierter Anwendungen oder Module verwendet wird, die Sie möglicherweise in Ihrer eigenen Anwendung wiederverwenden möchten.

Nächstes Tutorial

Karma allein kann das Testen von JavaScript-Anwendungen im Front-End-Bereich nicht automatisieren. Es muss auch mit anderen Testtools wie einem Testframework zusammenarbeiten, das das Schreiben unserer Testfälle erleichtert.

In unserem nächsten Tutorial werden wir uns mit Jasmine und dem Jasmine-Jquery-Paket befassen, das die Funktionalität von Jasmine erweitert, um HTML-Fixtures testen zu können, die die JavaScript-Bibliothek verwenden: Jquery.

Literatur-Empfehlungen

• 20 beliebtesten Unit-Testing-Tools im Jahr 2021
• Schlüssel zum erfolgreichen Testen von Einheiten - Wie testen Entwickler ihren eigenen Code?
• TOP 45 JavaScript-Interviewfragen mit detaillierten Antworten
• AngularJS Tutorial für absolute Anfänger (mit Installationsanleitung)
• Unterschied zwischen Winkelversionen: Winkel gegen WinkelJS
• Testabdeckung beim Testen von Software (Tipps zur Maximierung der Testabdeckung)
• 48 Top AngularJS Interview Fragen und Antworten (2021 LIST)
• So richten Sie das Node.js-Testframework ein: Node.js-Lernprogramm