Ember.js Testen

Als ich vor fast einem Jahr mit Ember.js angefangen habe, hat die Testbarkeitsgeschichte etwas zu wünschen übrig gelassen. Sie können ein Objekt ohne Probleme testen, aber ein Komponententest ist nur eine Möglichkeit, beim Erstellen eines Softwareprodukts Feedback zu erhalten. Neben Unit-Tests wollte ich auch die Integration mehrerer Komponenten überprüfen. Wie die meisten Leute, die reichhaltige JavaScript-Anwendungen testen, griff ich nach der Mutter aller Testwerkzeuge, Selenium.

Bevor ich nun ohne gründliche Einführung darauf eingehen kann, ist es erwähnenswert, dass Selenium eine hervorragende Möglichkeit ist, um zu überprüfen, ob Ihre gesamte Webanwendung mit einer vollständigen, produktionsähnlichen Datenbank und all Ihren Produktionsabhängigkeiten usw. funktioniert. Aus QS-Sicht dieses Werkzeug kann eine großartige Ressource für Teams sein, die End-to-End-UI-Abnahmetests benötigen.

Mit der Zeit kann eine scheinbar kleine Testsuite, die auf Selenium aufgebaut ist, die Geschwindigkeit Ihres Teams auf ein Schneckentempo bringen. Eine einfache Möglichkeit, diesen Schmerz zu reduzieren, besteht darin, zu vermeiden, dass zunächst eine große Anwendung erstellt wird. Wenn Sie stattdessen eine Handvoll kleinerer Webanwendungen erstellen, kann dies dazu beitragen, dass Sie noch ein wenig schwimmen, da kein einzelner Build das Team zerstören wird, wenn Sie wachsen.

Aber selbst bei einem kleinen Projekt besteht das eigentliche Problem bei Selenium darin, dass es nicht Teil des testgetriebenen Entwicklungsprozesses ist. Wenn ich Rot / Grün / Refactor mache, habe ich keine Zeit für langsames Feedback in irgendeiner Form. Ich brauchte eine Möglichkeit, sowohl Unit- als auch Integrationstests zu schreiben, die ein schnelles Feedback lieferten, um die Software, die ich schrieb, iterativer zu gestalten. Wenn Sie eine Version von Ember.js> = RC3 verwenden, haben Sie Glück, weil das Schreiben eines Unit- oder Integrationstests ein Schritt in dem Teil ist.


Test Runner installieren

Nun, da wir JavaScript-Tests für unsere Anwendung schreiben können, wie führen wir sie aus? Die meisten Entwickler verwenden zwar den Browser direkt, aber da ich etwas wollte, das ich in einer CI-Umgebung mit einem reichhaltigen Ökosystem voller Plugins über die Befehlszeile headless ausführen konnte, schaute ich nach Karma.

Was mir an Karma gefallen hat, ist, dass es nur Ihr Testläufer sein will. Es ist egal, welches JavaScript-Test-Framework Sie verwenden oder welches clientseitige MVC-Framework Sie verwenden. Es ist einfach, mit Tests zu beginnen, die für Ihre Ember.js-Produktionsanwendung ausgeführt werden, und ist nur ein paar Konfigurationszeilen.

Aber bevor wir Karma konfigurieren können, müssen wir es mit npm installieren. Ich empfehle die Installation lokal, damit Sie Ihre npm-Module pro Projekt isoliert halten können. Fügen Sie dazu eine Datei mit dem Namen hinzu package.json'an die Wurzel Ihres Projekts, die ungefähr wie folgt aussieht.

 "Abhängigkeiten": "Karma-qunit": "*", "Karma": "0.10.2"

Dieses Beispiel erfordert sowohl Karma als auch ein Plugin für QUnit. Nach dem Speichern der package.json Datei oben, kehren Sie zur Befehlszeile zurück und geben Sie ein npm installieren die erforderlichen Node-Module herunterziehen.

Nach Abschluss der Installation von npm wird jetzt ein neuer Ordner mit dem Namen angezeigt Knotenmodule in der Wurzel Ihres Projekts. Dieser Ordner enthält den gesamten JavaScript-Code, den wir gerade mit npm heruntergezogen haben, einschließlich Karma und dem QUnit-Plugin. Wenn Sie noch weiter drillern node_modules / karma / bin / Sie werden das ausführbare Karma sehen. Wir werden dies verwenden, um den Testläufer zu konfigurieren, Tests über die Befehlszeile auszuführen, usw.


Konfigurieren Sie den Test Runner

Als Nächstes müssen wir Karma konfigurieren, damit es die QUnit-Tests ausführen kann. Art Karma init von der Wurzel des Projekts. Sie werden mit einer Liste mit Fragen aufgefordert. Beim ersten wird gefragt, welches Test-Framework Sie verwenden möchten. Klicken Sie auf Tab bis du siehst qunit, dann schlagen Eingeben. Nächste Antwort Nein auf die Require.js-Frage, da wir sie für diese Beispielanwendung nicht verwenden werden. Tab bis du siehst PhantomJS für die dritte Frage und Sie müssen schlagen Eingeben doppelt, da hier mehrere Optionen möglich sind. Für den Rest belassen Sie sie einfach bei ihrer Standardoption.

Wenn Sie fertig sind, sollten Sie sehen, dass Karma eine Konfigurationsdatei mit dem Namen generiert hat karma.conf.js in der Wurzel oder in Ihrem Projekt. Wenn Sie mehr über die verschiedenen Optionen erfahren möchten, die Karma unterstützt, können die Kommentare hilfreich sein. Für dieses Beispiel habe ich eine vereinfachte Version der Konfigurationsdatei, um die Anfänger freundlich zu halten.

Wenn Sie mitverfolgen möchten, löschen Sie die generierte Konfigurationsdatei und ersetzen Sie sie durch diese.

 module.exports = function (karma) karma.set (basePath: 'js', Dateien: ["vendor / jquery / jquery.min.js"), "vendor / handlebars / handlebars.js", "vendor / ember / ember.js "," vendor / jquery-mockjax / jquery.mockjax.js "," app.js "," tests / *. js "], logLevel: karma.LOG_ERROR, Browser: ['PhantomJS'], singleRun: true, autoWatch: false, frameworks: ["qunit"]); ;

Dies sollte ziemlich ähnlich sein wie das, was Karma zuvor generiert hat. Ich habe einfach alle Kommentare entfernt und ein paar Optionen herausgeschnitten, die uns im Moment egal sind. Um den ersten Unit-Test schreiben zu können, musste ich Karma etwas mehr über die Projektstruktur erzählen.

Oben in der Konfigurationsdatei sehen Sie, dass ich das eingestellt habe basePath zu js weil sich alle JavaScript-Assets unter diesem Ordner im Projekt befinden. Als Nächstes erklärte ich Karma, wo es die JavaScript-Dateien finden kann, die zum Testen unserer einfachen Anwendung erforderlich sind. Dazu gehören jQuery, Handlebars, Ember.js und app.js Datei selbst.


Den ersten Komponententest schreiben

Jetzt können wir die erste Unit-Testdatei zum Projekt hinzufügen. Erstellen Sie zuerst einen neuen Ordner mit dem Namen Tests und nisten es unter js Mappe. Fügen Sie eine Datei in diesem neuen Verzeichnis hinzu unit_tests.js das sieht so aus.

 Test ('Hallo Welt', Funktion () Gleich (1, 1, ""););

Dieser Test macht noch nichts Wertvolles, aber er wird uns helfen zu überprüfen, dass wir alles mit Karma verbunden haben, um es richtig auszuführen. Beachten Sie im Karma Dateien Abschnitt haben wir bereits hinzugefügt Js / Tests Verzeichnis. Auf diese Weise zieht Karma alle JavaScript-Dateien ein, mit denen wir unsere Anwendung testen werden.

Nachdem wir Karma nun korrekt konfiguriert haben, führen Sie die Qunit-Tests von der Befehlszeile aus mit aus ./ node_modules / karma / bin / karma start.

Wenn Sie alles richtig eingestellt haben, sollte Karma einen Test ausführen, der erfolgreich verläuft. Vergewissern Sie sich, dass der gerade geschriebene Test ausgeführt wurde, indem Sie die Gleichheitsaussage ändern. Sie können beispielsweise Folgendes tun:

 test ('Hallo Welt', Funktion () Gleich (1, 2, "Boom"););

Wenn Sie dies nicht schaffen und es erneut bestehen lassen können, ist es an der Zeit, einen Test mit etwas mehr Zweck zu schreiben.


Die Beispielanwendung

Bevor wir jedoch anfangen, wollen wir die in diesem Beitrag verwendete Beispielanwendung diskutieren. In der Abbildung unten sehen Sie ein sehr einfaches Raster von Benutzern. In der HTML-Tabelle wird jeder Benutzer mit dem Vornamen und einer Schaltfläche zum Löschen des Benutzers angezeigt. Oben in der Anwendung sehen Sie eine Eingabe für den Vornamen, den Nachnamen und schließlich eine Schaltfläche, die einen weiteren Benutzer zur Tabelle hinzufügt, wenn Sie darauf klicken.

https://dl.dropboxusercontent.com/u/716525/content/images/2013/pre-tuts.png

Die Beispielanwendung hat drei Probleme. Zunächst möchten wir den Vor- und Nachnamen des Benutzers und nicht nur den Vornamen anzeigen. Wenn Sie anschließend auf eine Schaltfläche "Löschen" klicken, wird der Benutzer nicht wirklich entfernt. Wenn Sie einen Vornamen, einen Nachnamen hinzufügen und auf Hinzufügen klicken, wird kein weiterer Benutzer in die Tabelle eingefügt.

Oberflächlich betrachtet scheint die vollständige Namensänderung die einfachste zu sein. Es hat sich auch als ein hervorragendes Beispiel erwiesen, das zeigt, wann Sie einen Komponententest, einen Integrationstest oder beides schreiben sollten. In diesem Beispiel erhalten Sie am schnellsten Feedback, indem Sie einen einfachen Komponententest schreiben, in dem das Modell eine berechnete Eigenschaft hat vollständiger Name.


Einheitstest der berechneten Eigenschaft

Das Testen eines Glutobjekts ist einfach, erstellen Sie einfach eine neue Instanz des Objekts und fragen Sie nach vollständiger Name Wert.

 test ('fullName-Eigenschaft gibt sowohl den ersten als auch den letzten zurück') function () var person = App.Person.create (firstName: 'toran', lastName: 'billups'); var result = person.get ('fullName' ); gleich (Ergebnis, 'toran billups', "fullName was" + result););

Weiter, wenn Sie zur Befehlszeile zurückkehren und ausführen ./ node_modules / karma / bin / karma start, Es sollte einen fehlgeschlagenen Test mit einer hilfreichen Beschreibung anzeigen vollständiger Name derzeit undefiniert. Um dies zu beheben, müssen wir die öffnen app.js Datei und fügen Sie dem Modell eine berechnete Eigenschaft hinzu, die eine Zeichenfolge der kombinierten Werte für den ersten und letzten Namen zurückgibt.

 App.Person = Ember.Object.extend (firstName: ", lastName:", fullName: function () var firstName = this.get ('firstName'); var lastName = this.get ('lastName'); Rückgabe firstName + "+ lastName; .property ());

Wenn Sie zur Befehlszeile zurückkehren und ausführen ./ node_modules / karma / bin / karma start Sie sollten jetzt einen Bestandenprüfungstest sehen. Sie können dieses Beispiel erweitern, indem Sie einige andere Unit-Tests schreiben, um zu zeigen, dass sich die berechnete Eigenschaft ändern sollte, wenn entweder der erste oder der letzte Name im Modell aktualisiert wird.

 test ('fullName-Eigenschaft gibt sowohl den ersten als auch den letzten zurück') function () var person = App.Person.create (firstName: 'toran', lastName: 'billups'); var result = person.get ('fullName' ); gleich (Ergebnis, 'toran billups', "fullName was" + result);); test ('fullName-Eigenschaft wird aktualisiert, wenn firstName geändert wird') function () var person = App.Person.create (firstName: 'toran', lastName: 'billups'); var result = person.get ('fullName' ); gleich (Ergebnis, 'toran billups', "fullName war" + Ergebnis); person.set ('firstName', 'wat'); result = person.get ('fullName'); gleich (Ergebnis, 'wat billups ', "fullName was" + Ergebnis);); test ('fullName-Eigenschaft wird aktualisiert, wenn lastName geändert wird') function () var person = App.Person.create (firstName: 'toran', lastName: 'billups'); var result = person.get ('fullName' ); gleich (Ergebnis, 'toran billups', "fullName war" + Ergebnis); person.set ('lastName', 'tbozz'); result = person.get ('fullName'); gleich (Ergebnis, 'toran tbozz ', "fullName was" + Ergebnis););

Wenn Sie diese beiden zusätzlichen Tests hinzufügen und alle drei von der Befehlszeile aus ausführen, sollten zwei Tests fehlschlagen. Damit alle drei Tests bestanden werden, müssen Sie die berechnete Eigenschaft so ändern, dass sowohl der Vorname als auch der Nachname auf Änderungen überprüft werden. Wenn du jetzt rennst ./ node_modules / karma / bin / karma start Von der Befehlszeile aus sollten Sie drei bestandene Tests bestehen.

 App.Person = Ember.Object.extend (firstName: ", lastName:", fullName: function () var firstName = this.get ('firstName'); var lastName = this.get ('lastName'); Rückgabe firstName + "+ lastName; .property ('firstName', 'lastName'));

Fügen Sie den Karma-Ember-Präprozessor hinzu und konfigurieren Sie ihn

Da wir nun eine berechnete Eigenschaft für das Modell haben, müssen wir uns die Vorlage selbst ansehen, da wir die neue zurzeit nicht verwenden vollständiger Name Eigentum. In der Vergangenheit müssten Sie alles selbst verkabeln oder mit Selenium überprüfen, ob die Vorlage korrekt gerendert wird. Mit Ember-Testing können Sie dies jetzt testen, indem Sie ein paar Zeilen JavaScript und ein Plugin für Karma hinzufügen.

Öffnen Sie zuerst die package.json Datei und fügen Sie die Karma-Ember-Präprozessor-Abhängigkeit hinzu. Nachdem Sie das aktualisiert haben package.json Datei tun npm installieren von der Kommandozeile aus, um dies herunterzuziehen.

 "Abhängigkeiten": "Karma-Ember-Präprozessor": "*", "Karma-Qunit": "*", "Karma": "0.10.2"

Nachdem Sie den Vorprozessor installiert haben, müssen wir Karma auf die Vorlagendateien aufmerksam machen. In dem Dateien Abschnitt Ihrer karma.conf.js Fügen Sie folgende Datei hinzu, um Karma über die Vorlagen für Lenker zu informieren.

 module.exports = function (karma) karma.set (basePath: 'js', Dateien: ["vendor / jquery / jquery.min.js"), "vendor / handlebars / handlebars.js", "vendor / ember / ember.js "," vendor / jquery-mockjax / jquery.mockjax.js "," app.js "," tests / *. js "," templates / *. handlebars "], logLevel: karma.LOG_ERROR, Browser: ['PhantomJS'], singleRun: true, autoWatch: false, frameworks: ["qunit"]); ;

Als Nächstes müssen wir Karma mitteilen, was mit diesen Lenkerdateien zu tun ist. Technisch möchten wir, dass jede Vorlage vorkompiliert wird, bevor sie an PhantomJS übergeben wird. Fügen Sie die Präprozessor-Konfiguration hinzu und zeigen Sie etwas mit der Dateierweiterung von *.Lenker beim Glut-Präprozessor. Außerdem müssen Sie die Plugins-Konfiguration hinzufügen, um den Ember-Vorprozessor zu registrieren (zusammen mit einigen anderen, die normalerweise in der Standardkonfiguration von Karma enthalten sind)..

 module.exports = function (karma) karma.set (basePath: 'js', Dateien: ["vendor / jquery / jquery.min.js"), "vendor / handlebars / handlebars.js", "vendor / ember / ember.js "," vendor / jquery-mockjax / jquery.mockjax.js "," app.js "," tests / *. js "," templates / *. handlebars "], logLevel: karma.LOG_ERROR, Browser: ['PhantomJS'], singleRun: true, autoWatch: false, Frameworks: ["qunit"], Plugins: ['karma-qunit', 'karma-chrome-launcher', 'karma-ember-preprocessor', 'karma- phantomjs-launcher '], Präprozessoren: "** / *. handlebars":' ember '); ;

Integration Testen der datengebundenen Vorlage

Nachdem wir nun die Karma-Konfiguration für den Integrationstest eingerichtet haben, fügen Sie eine neue Datei mit dem Namen hinzu integration_tests.js unter dem Tests Mappe. In diesem Ordner müssen wir einen einfachen Test hinzufügen, um zu beweisen, dass wir die gesamte Ember.js-Anwendung fehlerfrei aufstellen können. Fügen Sie einen einfachen Qunit-Test hinzu, um zu sehen, ob wir das treffen können '/' routen und das grundlegende HTML zurückgeben. Für den ersten Test behaupten wir nur, dass Tabelle Das Tag ist im generierten HTML-Code vorhanden.

 test ('Hallo Welt', Funktion () App.reset (); Besuch ("/"). Dann (Funktion () OK (existiert ("Tabelle"));););

Beachten Sie, dass wir ein paar Helfer verwenden, die in Ember-Testing integriert sind Besuch und finden. Das Besuch helper ist eine emberfreundliche Methode, um der Anwendung mitzuteilen, in welchem ​​Zustand sie sich während der Ausführung befinden soll. Dieser Test beginnt am '/' route, weil hier die People-Modelle an die Vorlage gebunden werden und unsere HTML-Tabelle generiert wird. Das finden helper ist eine schnelle Methode, um Elemente im DOM mithilfe von CSS-Selektoren nachzuschlagen, wie Sie es mit jQuery tun würden, um etwas über das Markup zu überprüfen.

Bevor wir diesen Test ausführen können, müssen wir eine Testhilfedatei hinzufügen, in die die Testhelfer eingefügt werden und ein generisches Stammelement festgelegt wird. Fügen Sie den folgenden Code zu einer Datei mit dem Namen hinzu integration_test_helper.js im gleichen Tests Verzeichnis. Dadurch wird sichergestellt, dass unsere Anwendung die Testhelfer zur Ausführungszeit hat.

 document.write ('
'); App.rootElement = '# ember-testing'; App.setupForTesting (); App.injectTestHelpers (); Funktion existiert (Selektor) return !! find (Selektor) .length;

Jetzt sollten Sie von der Befehlszeile aus den oben genannten Integrationstest ausführen können. Wenn Sie einen Bestanden-Test bestanden haben, entfernen Sie die Tabelle aus der Lenkervorlage, damit sie fehlschlägt (nur um zu zeigen, dass Ember den HTML-Code mit dieser Vorlage generiert)..

Jetzt, da wir die Integrationstests eingerichtet haben, ist es an der Zeit, den zu schreiben, der besagt, dass wir jeden Benutzer zeigen vollständiger Name anstatt ihrer Vorname. Wir möchten zunächst behaupten, dass wir zwei Reihen erhalten, eine für jede Person.

 test ('Hallo Welt', Funktion () App.reset (); Besuch ("/"). Dann (Funktion () Var Zeilen = Finden ("Tabelle Tr"). Länge; Gleich (Zeilen, 2, Zeilen );););

Hinweis: Die Anwendung gibt derzeit hartcodierte Daten zurück, um im Moment alles einfach zu halten. Wenn Sie neugierig sind, warum wir zwei Leute bekommen, hier ist das finden Methode am Modell:

 App.Person.reopenClass (people: [], find: function () var first = App.Person.create (firstName: 'x', lastName: 'y'); var last = App.Person.create (firstName: 'x', lastName: 'y'); this.people.pushObject (first); this.people.pushObject (last); return this.people;);

Wenn wir die Tests jetzt durchführen, sollten wir immer noch alles bestanden haben, da zwei Personen wie erwartet zurückkehren. Als Nächstes müssen wir die Tabellenzelle abrufen, die den Namen der Person zeigt, und die Verwendung der vollständiger Name Eigentum statt nur Vorname.

 test ('Hallo Welt', Funktion () App.reset (); Besuch ("/"). Dann (Funktion () Var Zeilen = Finden ("Tabelle Tr"). Länge; Gleich (Zeilen, 2, Zeilen var varName = find ("Tabelle tr: eq (0) td: eq (0)"). text (); gleich (fullName, "xy") "Die erste Tabellenzeile hatte fullName:" + fullName); ;);

Wenn Sie den obigen Test ausführen, sollte ein fehlgeschlagener Test angezeigt werden, da die Vorlage noch nicht aktualisiert wurde vollständiger Name. Nachdem wir einen fehlgeschlagenen Test haben, aktualisieren Sie die zu verwendende Vorlage vollständiger Name und führen Sie die Tests mit ./ node_modules / karma / bin / karma start. Sie sollten jetzt eine Reihe passender Einheiten- und Integrationstests haben.


Sollte ich Unit- oder Integrationstests schreiben??

Wenn Sie sich fragen, "wann sollte ich einen Komponententest vs. einen Integrationstest schreiben?", Lautet die Antwort einfach: Was wird weniger schmerzhaft sein? Wenn das Schreiben eines Komponententests schneller ist und das Problem besser erklärt als ein viel größerer Integrationstest, dann schreibe ich den Komponententest. Wenn die Komponententests weniger wertvoll erscheinen, weil Sie grundlegende CRUD durchführen und das tatsächliche Verhalten in der Interaktion zwischen Komponenten liegt, sage ich den Integrationstest. Da die mit Ember-Testing geschriebenen Integrationstests extrem schnell sind, sind sie Teil des Entwickler-Feedback-Zyklus und sollten, wenn sinnvoll, ähnlich wie ein Unit-Test verwendet werden.

Um einen CRUD-ähnlichen Integrationstest in Aktion zu zeigen, schreiben Sie den folgenden Test, um den Test zu beweisen hinzufügen Mit der Schaltfläche wird die Person in die Sammlung aufgenommen und eine neue Zeile wird in der Lenkervorlage dargestellt.

 test ('add fügt eine weitere Person an die html-Tabelle an') function () App.Person.people = []; App.reset (); visit ("/"). then (function () var rows = find ("Tabelle tr"). Länge gleich (Zeilen, 2, "die Tabelle hatte" + Zeilen + "Zeilen"); fillIn (". firstName", "foo"); fillIn (". lastName", "bar") ; zurück klicken (". absenden");). dann (function () gleich (find ("Tabelle tr"). Länge 3, "die Tabelle der Personen war nicht vollständig"); gleich (find ("Tabelle tr: eq (2) td: eq (0) "). text ()," foo bar "," der fullName der Person war falsch ");););

Beginnen Sie damit, dem Test mitzuteilen, mit welchem ​​Status Sie arbeiten möchten, und verwenden Sie dann die ergänze Helfer, fügen Sie einen Vornamen und Nachnamen hinzu. Wenn Sie jetzt auf klicken einreichen Taste sollte diese Person der HTML-Tabelle hinzufügen, also in der Rückgabe dann Wir können behaupten, dass drei Personen in der HTML-Tabelle vorhanden sind. Führen Sie diesen Test aus und es sollte fehlschlagen, da der Ember-Controller nicht vollständig ist.

Um den Test bestanden zu haben, fügen Sie die folgende Zeile in das Feld ein PeopleController

 App.PeopleController = Ember.ArrayController.extend (actions: addPerson: function () var person = firstName: this.get ('firstName'), lastName: this.get ('lastName'); App.Person .add (Person););

Wenn Sie nun die Tests mit ausführen ./ node_modules / karma / bin / karma start Im gerenderten HTML-Code sollten drei Personen angezeigt werden.

Der letzte Test ist das Löschen. Beachten Sie, dass wir die Schaltfläche für eine bestimmte Zeile finden, und klicken Sie darauf. Im Folgenden dann Wir überprüfen lediglich, dass eine Person weniger in der HTML-Tabelle angezeigt wird.

 test ('delete löscht die Person für eine bestimmte Zeile') function () App.Person.people = []; App.reset (); visit ("/"). then (function () var rows = find ("Tabelle tr"). Länge; gleich (Zeilen 2, "die Tabelle hatte" + Zeilen + "Zeilen"); zurückkehren ("Tabelle .delete: first");). dann (function () gleich (find ("Tabelle tr"). Länge, 1, "Die Tabelle der Personen war nicht vollständig););")))

Um diese Passage zu erhalten, fügen Sie einfach die folgende Zeile zu dem hinzu PeopleController:

 App.PeopleController = Ember.ArrayController.extend (actions: addPerson: function () var person = firstName: this.get ('firstName'), lastName: this.get ('lastName'); App.Person .add (Person);, deletePerson: Funktion (Person) App.Person.remove (Person););

Führen Sie die Tests über die Befehlszeile aus, und Sie sollten erneut eine bestandene Testserie haben.


Fazit

Damit ist unsere Beispielanwendung abgeschlossen. Fühlen Sie sich frei, Fragen in den Kommentaren zu stellen.

Bonus: Aber ich benutze schon Grunt…

Wenn Sie es vorziehen, Grunt anstelle des Karma-Ember-Präprozessors zu verwenden, entfernen Sie einfach die Konfiguration der Plug-Ins und des Präprozessors. Auch entfernen Vorlagen / *. Lenker Aus dem Dateibereich muss Karma die Vorlagen nicht vorkompilieren. Hier ist eine vereinfachte karma.conf.js Das funktioniert, wenn Sie Grunt verwenden, um die Lenkervorlagen vorkompilieren zu können.

 module.exports = function (karma) karma.set (basePath: 'js', Dateien: ["lib / deps.min.js", // von Ihrer Grunt-Task "tests / *. js" erstellt]], logLevel : karma.LOG_ERROR, Browser: ['PhantomJS'], singleRun: true, autoWatch: false, Frameworks: ["qunit"]); ;

Und das ist es!