Unit Test der AngularJS-Direktive mit templateUrl
Ich habe eine AngularJS-Direktive, die eine templateUrl
definiert. Ich bin versucht, unit Tests mit Jasmine.
Meine Jasmine JavaScript sieht wie folgt aus, pro die Empfehlung von diese:
describe('module: my.module', function () {
beforeEach(module('my.module'));
describe('my-directive directive', function () {
var scope, $compile;
beforeEach(inject(function (_$rootScope_, _$compile_, $injector) {
scope = _$rootScope_;
$compile = _$compile_;
$httpBackend = $injector.get('$httpBackend');
$httpBackend.whenGET('path/to/template.html').passThrough();
}));
describe('test', function () {
var element;
beforeEach(function () {
element = $compile(
'<my-directive></my-directive>')(scope);
angular.element(document.body).append(element);
});
afterEach(function () {
element.remove();
});
it('test', function () {
expect(element.html()).toBe('asdf');
});
});
});
});
Wenn ich dieses in meine Jasmine spec-Fehler bekomme ich folgende Fehlermeldung:
TypeError: Object #<Object> has no method 'passThrough'
Alles was ich will ist für die templateUrl geladen werden wie es ist - ich möchte nicht respond
. Ich glaube, dass dies möglicherweise im Zusammenhang mit ngMock statt ngMockE2E. Wenn dies der Täter ist, wie verwende ich die letztere statt der ersteren?
Vielen Dank im Voraus!
InformationsquelleAutor der Frage Words Like Jared | 2013-03-05
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ist richtig, dass es um ngMock. Die ngMock Modul automatisch geladen wird für jede Winkel-test, und es initialisiert die mock
$httpBackend
um mit jeder Nutzung der$http
service, bei dem die Vorlage Holen. Das template-system versucht, laden Sie die Vorlage durch$http
und es wird ein "unexpected request" zu spotten.Was Sie benötigen eine Möglichkeit zum vorab-laden der Vorlagen in die
$templateCache
so dass Sie bereits bei der Winkel-bittet für Sie, ohne$http
.Die Bevorzugte Lösung: Karma
Wenn Sie Karma die tests auszuführen (und Sie sein sollte), können Sie so konfigurieren, laden Sie die Vorlagen, die Sie mit der ng-html2js Präprozessor. Ng-html2js liest die HTML-Dateien, die Sie angeben, und wandelt Sie in eine Eckige Modul, pre-lädt die
$templateCache
.Schritt 1: Aktivieren und konfigurieren Sie den Präprozessor in Ihrem
karma.conf.js
Wenn Sie Yeoman zu Gerüst in Ihre app diese config funktioniert
Schritt 2: setzen Sie das Modul in Ihre tests
Für ein vollständiges Beispiel, Blick auf diese das kanonische Beispiel aus Winkel-test-guru Vojta Jina. Es enthält eine ganze setup: karma-Konfiguration, Vorlagen und tests.
Eine Nicht-Karma-Lösung
Wenn Sie nicht mit Karma aus welchem Grund auch immer (ich hatte eine starre build-Prozess im legacy-app) und sind einfach nur testen in einem browser, ich habe festgestellt, dass Sie bekommen können, um ngMock die übernahme
$httpBackend
durch die Verwendung einer raw-XHR zu Holen, die Vorlage für das echte und stecken Sie es in die$templateCache
. Diese Lösung ist viel weniger flexibel, aber es erhält die Arbeit erledigt für heute.Ernst, obwohl. Verwenden Karma. Es dauert ein wenig Arbeit, aber es können Sie alle Ihre tests, in mehreren Browsern auf einmal, von der Befehlszeile aus. So können Sie es als Teil der continuous integration-system, und/oder machen Sie es eine shortcut-Taste aus dem editor. Viel besser als alt-tab-refresh-ad-infinitum.
InformationsquelleAutor der Antwort SleepyMurph
Was ich am Ende dabei war, den template-cache und setzen die anzeigen in dort. Ich habe keine Kontrolle über nicht mit ngMock, es stellt sich heraus:
InformationsquelleAutor der Antwort Words Like Jared
Dieses erste problem kann gelöst werden, indem diese:
Deshalb, weil es versucht, zu finden $httpBackend in ngMock - Modul standardmäßig, und es ist nicht voll.
InformationsquelleAutor der Antwort bullgare
Die Lösung, die ich erreichen muss jasmine-jquery.js und einen proxy-server.
Ich diese Schritte befolgt:
hinzufügen jasmine-jquery.js um Ihre Dateien
fügen Sie einen proxy-server, die server Ihres Betriebs
In deine Skillung
beschreiben('MySpec', function() {
var $scope, Vorlage;
Jasmin.getFixtures().fixturesPath = 'public/partials/'; //benutzerdefinierter Pfad, so dass Sie dienen können, der realen Vorlage, die Sie verwenden, auf die app
beforeEach(function() {
template = angular.element(");
});
Einen server laufen lassen, auf Ihre app ' s root-Verzeichnis
python -m SimpleHTTPServer 3502
Laufen karma.
Es nahm mich eine Weile, um herauszufinden, dass die Suche viele Beiträge, ich denke, die Dokumentation über diese sollte deutlicher sein, als es ist ein so wichtiges Thema.
InformationsquelleAutor der Antwort Tomas Romero
Meine Lösung:
test/karma-utils.js
:karma.config.js
:test:
InformationsquelleAutor der Antwort bartek
Gelöst ich das gleiche problem in einer etwas anderen Weg als die gewählte Lösung.
Ersten, die ich installiert und konfiguriert die ng-html2js plugin für
karma. In der karma.conf.js Datei :
Dann lud ich das Modul erstellt, in der beforeEach.
In Ihrem Spec.js Datei :
Dann habe ich $templateCache.bekommen, um es zu speichern in eine variable.
In Ihrem Spec.js Datei :
Schließlich, getestet habe ich es auf diese Weise.
In Ihrem Spec.js Datei:
InformationsquelleAutor der Antwort glepretre
Wenn Sie mit Grunt, die Sie verwenden können, grunt-angular-Vorlagen. Es lädt Ihre Vorlagen in den templateCache und es durchsichtig ist zu Ihren Spezifikationen Konfiguration.
Meine Beispiel-config:
InformationsquelleAutor der Antwort Tomas Romero
Laden der html-Vorlage dynamisch in $templateCache Sie konnte einfach html2js karma pre-Prozessor, wie bereits erläutert, hier
dieses kocht unten zu Vorlagen hinzufügen '.html", um Ihre Dateien in das conf.js Datei
wie gut
Präprozessoren = {
'.html': 'html2js'
};
und verwenden
in Ihre js-Test-Datei
InformationsquelleAutor der Antwort Lior
wenn Sie mit Karma, ziehen Sie die Verwendung karma-ng-html2js-Präprozessor pre-kompilieren Sie Ihre externe HTML-Vorlagen und vermeiden Sie Eckige versuchen, HTTP-GET-und Sie während der test-Durchführung. Ich kämpfte mit diesem für ein paar von uns - in meinem Fall templateUrl ist teilweise Pfade aufgelöst, während der normalen app-Ausführung, aber nicht bei tests, die aufgrund von unterschieden in der app vs. test dir Strukturen.
InformationsquelleAutor der Antwort Nikita
Wenn Sie die jasmine-maven-plugin zusammen mit RequireJS können Sie die text-plugin zum laden der Vorlage Inhalt in eine variable und setzen Sie ihn dann in den template-cache.
InformationsquelleAutor der Antwort Leonard Brünings
Wenn Sie mit requirejs in den tests können Sie dann die "text" - plugin zu ziehen, in die html-Vorlage und legen Sie es in der $templateCache.
InformationsquelleAutor der Antwort Tim Kindberg
Ich löse dieses Problem mit dem kompilieren alle Vorlagen zu templatecache.
Ich bin mit schlucken, finden Sie ähnliche Lösung für grunt zu.
Meine templateUrls in den Richtlinien, modals sieht aus wie
Hinzufügen eines neuen npm-Paket in mein Paket.json
"gulp-angular-templatecache": "1.*"
In der gulp-Datei hinzufügen templatecache und eine neue Aufgabe:
var templateCache = require('gulp-angular-templatecache');
...
...
gulp.task('compileTemplates', function () {
gulp.src([
'./app/templates/**/*.html'
]).pipe(templateCache('templates.js', {
transformUrl: function (url) {
return '/templates/' + url;
}
}))
.pipe(gulp.dest('wwwroot/assets/js'));
});
Fügen Sie alle js-Dateien in index.html
<script src="/assets/js/lib.js"></script>
<script src="/assets/js/app.js"></script>
<script src="/assets/js/templates.js"></script>
Genießen!
InformationsquelleAutor der Antwort kitolog