Wie Einrichten von Karma und Jasmin mit webpack

Ich habe Sinn worden zu bloggen, um wieder und ich dachte, das ein gutes Thema war zu decken.

Nachdem in letzter Zeit Reagieren Kurse durch einige gehen, hat webpack schnell ein unverzichtbares Werkzeug für mich geworden. Es lädt und transpiles alles, und macht ein schönes ordentlich Bündel. Es ist meine go-to-Tool für neue Projekte jetzt.

Wenn die Unit-Tests für meine GitHub-Pull-Request-Dashboard einrichten, waren die Dinge nicht ganz so glatt wie mit einigen meiner früheren Projekten. Für Versprechen-poller, Ich habe gerade Jasmin, schrieb die Spezifikationen und lief sie mit dem Jasmin-Befehl. Schön und einfach.

Aber mit einem Projekt reagieren, müssen Sie möglicherweise einige JSX in Ihren Tests schreiben. Oder vielleicht möchten Sie einfach voll ES2015 Syntax verwenden. So ist das Einrichten der Testinfrastruktur in diesem Fall nicht ganz so einfach (aber immer noch einfach).

Ich konnte nicht herausfinden, wie man nur Jasmin mit webpack laufen, aber das Hinzufügen Karma den Trick schön war. Hier ein kurzer Überblick darüber, wie sie aufstehen und laufen.

Erstens, ich werde Sie schon davon ausgehen, für Ihre Anwendung eine webpack Konfigurationsdatei haben. Sie werden in diesen später im Prozess tippen müssen.

Es gibt ein paar Entwicklung Abhängigkeiten Sie installieren benötigen:

Sie können die meisten von ihnen in einem Rutsch installieren:

Karma-cli wird separat installiert, da es global installiert wird:

Nun, da alle Pakete installiert sind, erzeugen eine Karma-Konfiguration mit zu beginnen:

Dies wird fragen Sie ein paar Fragen zu Ihrem Karma Testaufbau. Stellen Sie sicher, dass Sie es sagen, Sie verwenden Jasmin. Wenn Sie fertig sind, sollten Sie etwas wie dieses:

Jetzt müssen Sie nur in Ihrer webpack Konfiguration ziehen. An der Spitze der Config-Datei, erfordert es in:

Als nächstes einen webpack Abschnitt zu Ihrer Karma-Konfiguration hinzufügen:

Dies wird Ihre webpack Konfiguration Karma aus.

Schließlich fügen Sie einen Preprozessoren Abschnitt:

Auf diese Weise können Karma wissen, dass, bevor die Tests ausgeführt werden, die sie benötigen, indem sie durch webpack laufen vorverarbeitet werden.

Die endgültige Karma Konfiguration sollte wie folgt aussehen:

Das einzige, was in Ihrer Karma Konfiguration unterscheiden ist der Reporter. Ich ziehe es Karma-Mokka-Reporter, so dass das, was ich in meiner Konfiguration bin mit.

Von hier aus sind Sie gut zu gehen. Gehen Sie weiter und schreiben Sie Ihre Tests mit JSX oder ES2015. Um Ihre Tests zu laufen, starten Sie einfach Karma von der Kommandozeile:


Laufen Karma JS-Tests als Teil eines Maven CI bauen mit Webjars

Ich verbrachte mehrere Stunden bei der Arbeit kürzlich versucht, dieses Problem zu lösen. Die Lösung hat einige bewegliche Teile, um es, so dachte ich, ich&# 8217; d ein paar Notizen aufschreiben, um es einfacher auf mir und anderen in der Zukunft.

An meinem Arbeitsplatz haben wir einen etablierten Maven / Java Workflow Tooling in Platz für CI Ausführung baut und Bereitstellung gebaut Artefakte unserer DEV / TEST / ART-Umgebungen usw. Vor einiger Zeit angenommen wir Webjars als eine Möglichkeit, statische Web-Ressourcen über das Maven zu verwalten Dependency Management-Mechanismus.

Da wir mehr Front-End schwer und als die Menge an Business-Logik in unserem Front-End-Code geworden zugenommen hat, hat es immer wichtiger geworden, Javascript-Einheit und e2e-Tests in unserem Build-Prozesse zu integrieren.

Nach ein paar Optionen Auswertung entschieden wir uns für das Karma Test Runner. Dies ist ein leistungsfähiger Test-Runner, die Cross-Browser-Test, mehrere Berichtsformate und unterstützt die Möglichkeit zu &# 8216; beobachten&# 8217; Projektdateien und automatisch neu durchgeführte Tests, wenn eine Änderung erkannt wird (sehr cool!). Der einfachste Weg, Karma zum Laufen zu bringen ist auf NodeJS, die wir didn&# 8217; t haben in unserer Umgebung eingerichtet.

Wie können wir Karma getriebene Tests an einem Projekt zu integrieren, die Webjar Abhängigkeiten verwendet, so dass die Tests lokal ausgeführt werden kann und als Teil eines Maven CI bauen unsere bestehenden Werkzeuge verwenden?

Wenn Sie im Voraus überspringen wollen, ist ein voll funktionsfähiges Projekt auf Github verfügbar. Werfen Sie einen Blick auf die Readme zu beginnen.

Zunächst einige Hintergrund auf die verschiedenen Tools und Bibliotheken für alle, die nicht vertraut mit ihnen verwendet werden.

Maven ist ein Abhängigkeitsmanagement und Projekt Build-Management-System. Es hat sich eine de-facto-Standard für Java-Projekte werden. Es unterstützt eine Vielzahl von Plug-in, die zusammen verwendet werden können, beliebig komplexe Build-Prozesse auszuführen.

Webjars ist eine Konvention für die Verpackung von clientseitigen Web-Bibliotheken als JAR-Abhängigkeiten, so dass sie über Java-orientierte Tools wie Maven verwaltet werden. Sie haben die schöne Eigenschaft, dass sie aufgenommen werden können und als Projektabhängigkeit in der gleichen Art und Weise verwaltet, dass jede reguläre JAR-Bibliothek kann.

Karma ist ein Test-Runner-Bibliothek für JS-Tests ausgeführt werden. Die Tests können in verschiedenen Browsern und auf mehreren Geräten ausgeführt werden.

Wenn Sie don&# 8217; t wollen in die Details zu bekommen, der Zusammenbruch der Lösung ist wie folgt:

  1. Setup webjar Abhängigkeiten
  2. Host webjars die Jetty Maven Plugin verwenden, wenn sie lokal entwickeln
  3. Setup Karma laufen lokal die gehosteten Webjar Abhängigkeiten mit
  4. Verwenden Sie das Maven Dependency Plugin Webjar Abhängigkeiten während eines CI Build auspacken
  5. Erstellen Sie eine CI-spezifische Karma-Konfiguration, die die entpackten Abhängigkeiten anstatt die gehosteten die während eines CI Build verwendet
  6. Verwenden Sie die Frontend-Maven-Plugin NodeJS und Karma lokal für das Projekt während eines CI Build zu installieren und die Karma-Tests ausführen
  7. (Optional) Fügen Sie Berichts JUnit Stil, so dass die Karma Testergebnisse von CI Tooling werden kann, wie Jenkins berichtet usw.

Richten Sie Ihr Projekt Webjars zu verwenden

Dieser Teil ist einfach. Webjar Abhängigkeiten können zu Ihrem POM wie jede andere Abhängigkeit hinzugefügt werden.

Die Webjars Dokumentation hat Anweisungen für das Erhalten Webjars auf einer Reihe von Plattformen ausgeführt werden. Zur Erleichterung der Einrichtung wir&# 8217; ll einen Servlet 3.0-Container verwenden (siehe nächster Abschnitt).

Der einfachste Weg, die webjar Abhängigkeiten verfügbar ist über einen Servlet 3.0 Behälter wie Jetty zu machen. Ich benutzte die Jetty Maven Plugin, das Sie ein vollständig konfiguriertes Jetty Container mit Maven starten können.


Karma-SetupKarma-0.8.6.5-setup.exe 0.8.6.5

Dateigröße: 7.17 mb.

Datum: 2014.07.27 13.15

Karma-Setup

Dateiversion: 0.8.6.5

Produktname: Karma

Übergeordnetes Titel: Official Karma Gemeinschaft | Startseite | Karma

Karma-0.8.6.5-setup.exe gratis Download.

Wenn Sie einen Fehler Karma-0.8.6.5-setup.exe fehlenden erhalten:

- Sie können versuchen, diese Datei herunterladen und im Verzeichnis einfügen, wo es fehlt

Wenn Sie einen Fehler in der Datei Karma-0.8.6.5-setup.exe erhalten:

- Versuchen Sie es mit diesem zu ersetzen.

Wenn Sie keine Windows-Verzeichnis versuchen finden:

1. Drücken und Windows-Taste auf Ihrer Tastatur halten, drücken Sie Taste R.

2. Geben Sie den Befehl "cmd" und drücken Sie die Eingabetaste

3. Geben Sie in einem Befehlsfenster geben Sie den Befehl "Set systemroot" und drücken Sie die Eingabetaste. Es wird Systemverzeichnis angezeigt werden soll.