Testen von Direktiven mit templateUrl

angularjs | Robin Böhm Twitter Logo | 1 Minute

Fast in jedem Projekt nutzen wir Direktiven, die mit Templates arbeiten. Diese verweisen mit dem Parameter templateUrl auf eine Datei, die während der Laufzeit der Anwendung per HTTP-Request nachgeladen wird.

angular.module('angularjsDE')
  .directive('templateUrlDirective', function () {
    return {
      restrict: 'E',
      templateUrl: 'views/TemplateUrlDirective.html'
    };
  });

Möchte man diese Direktive testen, stopelt man relativ schnell über folgenden Fehler:

Error: Unexpected request: GET views/TemplateUrlDirective.html

Zum Testen benutzen wir angular-mock. Dieses Modul bietet uns $httpBackend als Mock-Implementierung zum Testen von $http. Da templateUrl aber intern auch wieder $http nutzt, werden auch diese Aufrufe gemockt.

Zur Lösung könnten wir in diesem Fall unsere Template-Anfragen mocken und das $httpBackend Mock als Response unser Template zurückgeben lassen. Das ist natürlich weder schön, noch wartbar.

Alternativ können wir den Karma-Preprocessor nghtml2js nutzen. Mit diesem werden unsere HTML-Templates automatisch in den Template-Cache geschrieben und in unsere TestSuite geladen. Somit sparen wir uns den HTTP-Request komplett. Weiterhin müssen wir die Templates nur einmal schreiben und auch nicht an verschiedenen Stellen pflegen.

npm install

npm install karma-ng-html2js-preprocessor --save-dev

karma.conf.js

files: [
  [...]
  // Match all templates for nghtml2js
  'src/**/*.html'
],
preprocessors: {
  'src/**/*.html': 'ng-html2js'
},
ngHtml2JsPreprocessor: {
  stripPrefix: 'src/',
  moduleName: 'templates'
}

test/_common/templates.js

beforeEach(module('templates'));

Inhaltsverzeichnis


Email Newsletter

Um alle Neuigkeiten zu erfahren, abonniere hier unseren Newsletter!

Newsletter abonnieren
Robin Böhm

Robin Böhm

Robin beschäftigt sich seit 2012 intensiv mit der Erstellung client-seitiger Web-Applikationen. 2014 hat er das erste deutschsprachige Buch zum Thema AngularJS geschrieben und ist Mitgründer der Platform Angular.DE. Mit seinem Schulungs-Team hat er bereits über 1200 Unternehmen den erfolgreichen Start mit Angular ermöglicht.