Unit Testing AngularJS-Direktive mit templateUrl

Ich habe eine AngularJS-Direktive, die eine templateUrldefinierte hat. Ich versuche es mit Jasmine zu testen.

Mein Jasmine JavaScript sieht wie folgt aus , gemäß der Empfehlung von dieser :

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 dies in meinem Jasmine-Spezifikationsfehler ausführe, wird der folgende Fehler angezeigt:

TypeError: Object #<Object> has no method 'passThrough'

Ich möchte nur, dass die templateUrl so geladen wird, wie sie ist - ich möchte sie nicht verwenden respond. Ich glaube, dies hängt möglicherweise damit zusammen, dass ngMock anstelle von ngMockE2E verwendet wird . Wenn dies der Schuldige ist, wie verwende ich letzteres anstelle des ersteren?

Danke im Voraus!

Sie haben Recht, dass es mit ngMock zusammenhängt. Das ngMock-Modul wird automatisch für jeden Angular-Test geladen und initialisiert den Mock $httpBackend, um jede Verwendung des $httpDienstes zu handhaben , einschließlich des Abrufs von Vorlagen. Das Vorlagensystem versucht, die Vorlage durchzuladen, $httpund es wird eine "unerwartete Anforderung" an den Mock.

Was Sie brauchen, um die Vorlagen vorab in das zu laden, $templateCachedamit sie bereits verfügbar sind, wenn Angular sie anfordert, ohne sie zu verwenden $http.

Die bevorzugte Lösung: Karma

Wenn Sie Karma zum Ausführen Ihrer Tests verwenden (und dies sollten Sie auch tun ), können Sie es so konfigurieren, dass die Vorlagen mit dem Präprozessor ng-html2js für Sie geladen werden . Ng-html2js liest die von Ihnen angegebenen HTML-Dateien und konvertiert sie in ein Angular-Modul, das die vorinstalliert $templateCache.

Schritt 1: Aktivieren und konfigurieren Sie den Präprozessor in Ihrem karma.conf.js

// karma.conf.js

preprocessors: {
    "path/to/templates/**/*.html": ["ng-html2js"]
},

ngHtml2JsPreprocessor: {
    // If your build process changes the path to your templates,
    // use stripPrefix and prependPrefix to adjust it.
    stripPrefix: "source/path/to/templates/.*/",
    prependPrefix: "web/path/to/templates/",

    // the name of the Angular module to create
    moduleName: "my.templates"
},

Wenn Sie Yeoman als Gerüst für Ihre App verwenden, funktioniert diese Konfiguration

plugins: [ 
  'karma-phantomjs-launcher', 
  'karma-jasmine', 
  'karma-ng-html2js-preprocessor' 
], 

preprocessors: { 
  'app/views/*.html': ['ng-html2js'] 
}, 

ngHtml2JsPreprocessor: { 
  stripPrefix: 'app/', 
  moduleName: 'my.templates' 
},

Schritt 2: Verwenden Sie das Modul in Ihren Tests

// my-test.js

beforeEach(module("my.templates"));    // load new module containing templates

Ein vollständiges Beispiel finden Sie in diesem kanonischen Beispiel des Angular-Test-Gurus Vojta Jina . Es enthält ein komplettes Setup: Karma-Konfiguration, Vorlagen und Tests.

Eine Nicht-Karma-Lösung

Wenn Sie Karma aus irgendeinem Grund nicht verwenden (ich hatte einen unflexiblen Erstellungsprozess in der Legacy-App) und nur in einem Browser testen, habe ich festgestellt, dass Sie die Übernahme von ngMock umgehen können, indem Sie $httpBackenddie Vorlage mithilfe eines rohen XHR abrufen und legen Sie es in die $templateCache. Diese Lösung ist viel weniger flexibel, erledigt aber die Aufgabe vorerst.

// my-test.js

// Make template available to unit tests without Karma
//
// Disclaimer: Not using Karma may result in bad karma.
beforeEach(inject(function($templateCache) {
    var directiveTemplate = null;
    var req = new XMLHttpRequest();
    req.onload = function() {
        directiveTemplate = this.responseText;
    };
    // Note that the relative path may be different from your unit test HTML file.
    // Using `false` as the third parameter to open() makes the operation synchronous.
    // Gentle reminder that boolean parameters are not the best API choice.
    req.open("get", "../../partials/directiveTemplate.html", false);
    req.send();
    $templateCache.put("partials/directiveTemplate.html", directiveTemplate);
}));

Aber im Ernst. Benutze Karma . Das Einrichten erfordert ein wenig Arbeit, aber Sie können alle Ihre Tests in mehreren Browsern gleichzeitig über die Befehlszeile ausführen. Sie können es also als Teil Ihres kontinuierlichen Integrationssystems verwenden und / oder es zu einer Tastenkombination in Ihrem Editor machen. Viel besser als Alt-Tab-Refresh-Ad-Infinitum.

Am Ende habe ich den Vorlagen-Cache abgerufen und die Ansicht dort abgelegt. Ich habe keine Kontrolle darüber, ob ich ngMock nicht benutze. Es stellt sich heraus:

beforeEach(inject(function(_$rootScope_, _$compile_, $templateCache) {
    $scope = _$rootScope_;
    $compile = _$compile_;
    $templateCache.put('path/to/template.html', '<div>Here goes the template</div>');
}));

Dieses anfängliche Problem kann gelöst werden, indem Folgendes hinzugefügt wird:

beforeEach(angular.mock.module('ngMockE2E'));

Dies liegt daran, dass standardmäßig versucht wird, $ httpBackend im ngMock- Modul zu finden, und dass es nicht voll ist.

Die Lösung, die ich erreicht habe, benötigt jasmine-jquery.js und einen Proxyserver.

Ich habe diese Schritte befolgt:

1. In der karma.conf:

Fügen Sie jasmine-jquery.js zu Ihren Dateien hinzu

files = [
    JASMINE,
    JASMINE_ADAPTER,
    ...,
    jasmine-jquery-1.3.1,
    ...
]

Fügen Sie einen Proxyserver hinzu, der Ihre Geräte verwaltet

proxies = {
    '/' : 'http://localhost:3502/'
};

2. In Ihrer Spezifikation

   beschreiben ('MySpec', function () {var $ scope, template; jasmine.getFixtures (). fixturesPath = 'public / partials /'; // benutzerdefinierter Pfad, damit Sie die reale Vorlage bereitstellen können, die Sie in der App vor jeder Funktion verwenden () {template = angle.element ('');

       module('project');
       inject(function($injector, $controller, $rootScope, $compile, $templateCache) {
           $templateCache.put('partials/resources-list.html', jasmine.getFixtures().getFixtureHtml_('resources-list.html')); //loadFixture function doesn't return a string
           $scope = $rootScope.$new();
           $compile(template)($scope);
           $scope.$apply();
       })
   });

   });

3. Führen Sie einen Server im Stammverzeichnis Ihrer App aus

   Python -m SimpleHTTPServer 3502

4. Führen Sie Karma.

Ich habe eine Weile gebraucht, um das herauszufinden, da ich viele Beiträge durchsuchen musste. Ich denke, die Dokumentation dazu sollte klarer sein, da es sich um ein so wichtiges Thema handelt.

Meine Lösung:

test/karma-utils.js::

function httpGetSync(filePath) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/base/app/" + filePath, false);
  xhr.send();
  return xhr.responseText;
}

function preloadTemplate(path) {
  return inject(function ($templateCache) {
    var response = httpGetSync(path);
    $templateCache.put(path, response);
  });
}

karma.config.js::

files: [
  //(...)
  'test/karma-utils.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
],

der Test:

'use strict';
describe('Directive: gowiliEvent', function () {
  // load the directive's module
  beforeEach(module('frontendSrcApp'));
  var element,
    scope;
  beforeEach(preloadTemplate('views/directives/event.html'));
  beforeEach(inject(function ($rootScope) {
    scope = $rootScope.$new();
  }));
  it('should exist', inject(function ($compile) {
    element = angular.element('<event></-event>');
    element = $compile(element)(scope);
    scope.$digest();
    expect(element.html()).toContain('div');
  }));
});

Wenn Sie Grunt verwenden, können Sie Grunt-Angular-Templates verwenden. Es lädt Ihre Vorlagen in den templateCache und ist unabhängig von Ihrer Spezifikationskonfiguration.

Meine Beispielkonfiguration:

module.exports = function(grunt) {

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    ngtemplates: {
        myapp: {
          options: {
            base:       'public/partials',
            prepend:    'partials/',
            module:     'project'
          },
          src:          'public/partials/*.html',
          dest:         'spec/javascripts/angular/helpers/templates.js'
        }
    },

    watch: {
        templates: {
            files: ['public/partials/*.html'],
            tasks: ['ngtemplates']
        }
    }

  });

  grunt.loadNpmTasks('grunt-angular-templates');
  grunt.loadNpmTasks('grunt-contrib-watch');

};

Ich habe das gleiche Problem auf eine etwas andere Weise gelöst als die gewählte Lösung.

1. Zuerst habe ich das ng-html2js Plugin für Karma installiert und konfiguriert . In der Datei karma.conf.js:

   preprocessors: {
     'path/to/templates/**/*.html': 'ng-html2js'
   },
   ngHtml2JsPreprocessor: {
   // you might need to strip the main directory prefix in the URL request
     stripPrefix: 'path/'
   }

2. Dann habe ich das in beforeEach erstellte Modul geladen. In Ihrer Spec.js-Datei:

   beforeEach(module('myApp', 'to/templates/myTemplate.html'));

3. Dann habe ich $ templateCache.get verwendet, um es in einer Variablen zu speichern. In Ihrer Spec.js-Datei:

   var element,
       $scope,
       template;
   
   beforeEach(inject(function($rootScope, $compile, $templateCache) {
     $scope = $rootScope.$new();
     element = $compile('<div my-directive></div>')($scope);
     template = $templateCache.get('to/templates/myTemplate.html');
     $scope.$digest();
   }));

4. Schließlich habe ich es so getestet. In Ihrer Spec.js-Datei:

   describe('element', function() {
     it('should contain the template', function() {
       expect(element.html()).toMatch(template);
     });
   });

Um die Vorlage HTML dynamisch in $ templateCache zu laden, können Sie einfach den Karma-Vorprozessor html2js verwenden, wie hier erläutert

Dies läuft darauf hinaus, Ihren Dateien in der Datei conf.js Vorlagen ' .html' sowie Präprozessoren hinzuzufügen = {' .html': 'html2js'};

und verwenden

beforeEach(module('..'));

beforeEach(module('...html', '...html'));

in Ihre js Testdatei

Wenn Sie Karma verwenden, sollten Sie karma-ng-html2js-preprocessor verwenden , um Ihre externen HTML-Vorlagen vorkompilieren zu können, und vermeiden, dass Angular versucht, sie während der Testausführung per HTTP abzurufen . Ich hatte einige Probleme damit - in meinem Fall wurden die Teilpfade von templateUrl während der normalen App-Ausführung, aber nicht während der Tests aufgelöst - aufgrund von Unterschieden in den Strukturen von App und Testverzeichnis.

Wenn Sie das Jasmin-Maven-Plugin zusammen mit RequireJS verwenden, können Sie das Text-Plugin verwenden , um den Vorlageninhalt in eine Variable zu laden und ihn dann in den Vorlagen-Cache zu legen.

define(['angular', 'text!path/to/template.html', 'angular-route', 'angular-mocks'], function(ng, directiveTemplate) {
    "use strict";

    describe('Directive TestSuite', function () {

        beforeEach(inject(function( $templateCache) {
            $templateCache.put("path/to/template.html", directiveTemplate);
        }));

    });
});

Wenn Sie in Ihren Tests requirejs verwenden, können Sie das 'text'-Plugin verwenden, um die HTML-Vorlage abzurufen und in den $ templateCache einzufügen.

require(["text!template.html", "module-file"], function (templateHtml){
  describe("Thing", function () {

    var element, scope;

    beforeEach(module('module'));

    beforeEach(inject(function($templateCache, $rootScope, $compile){

      // VOILA!
      $templateCache.put('/path/to/the/template.html', templateHtml);  

      element = angular.element('<my-thing></my-thing>');
      scope = $rootScope;
      $compile(element)(scope);   

      scope.$digest();
    }));
  });
});

Ich behebe dieses Problem beim Kompilieren aller Vorlagen in den Vorlagencache. Ich benutze Schluck, Sie können ähnliche Lösung auch für Grunzen finden. Meine templateUrls in Direktiven, Modalitäten sehen aus wie

`templateUrl: '/templates/directives/sidebar/tree.html'`

1. Fügen Sie ein neues npm-Paket in meiner package.json hinzu

   "gulp-angular-templatecache": "1.*"

2. Fügen Sie in der Gulp-Datei den Vorlagencache und eine neue Aufgabe hinzu:

   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')); });

3. Fügen Sie alle js-Dateien in index.html hinzu

   <script src="/assets/js/lib.js"></script> <script src="/assets/js/app.js"></script> <script src="/assets/js/templates.js"></script>

4. Genießen!