Testen von Direktiven mit templateUrl

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.

💡 Keine Lust zu lesen?

Nicht jeder lernt am besten aus Büchern und Artikeln. Lernen darf interaktiv sein und Spaß machen. Wir bieten dir auch Angular Intensiv-Schulungen an, um dich möglichst effektiv in das Thema Angular zu begleiten. Im Kurs kannst du die Fragen stellen, die du nur schlecht googeln kannst, z.B. "Besserer Weg, um meine Applikation zu strukturieren?". Wir können sie dir beantworten.

• ✔ Öffentliche Termine verfügbar
• ✔ Vor Ort, als auch Remote
• ✔ Deutsch/Englisch möglich

Mehr Informationen zur Angular-Schulung

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/',

[[cta:training-bottom]]

  moduleName: 'templates'
}

test/_common/templates.js

beforeEach(module("templates"));