Angular testing using passThrough in unit testing

Question

I'm trying to test a Directive in Angular, but I can't get the corresponding template to work.

The directive lists the templateUrl like so

templateUrl: 'directives/listview/view.html'

Now when I write any unit-test, I get

Error: Unexpected request: GET directives/listview/view.html

So I have to use the $httpBackend and respond with something sensible like

httpBackend.whenGET('directives/listview/view.html').respond("<div>som</div>");

But really I want to simply return the actual file, and also do it synchronously, so there's no issues with waits, deferred objects etc. How to do that?

Answer 1

I now use https://github.com/karma-runner/karma-ng-html2js-preprocessor. What it does is reading in all the templates that you use, convert them to Angular templates, and set them on the $templateCache, so when your app needs them, it will retrieve them from cache, and not request them from the server.

In my karma conf file

files: [
    // templates
    '../**/*.html'
],

preprocessors : {
  // generate js files from html templates
  '../**/*.html': 'ng-html2js'
},

ngHtml2JsPreprocessor: {
    // setting this option will create only a single module that contains templates
    // from all the files, so you can load them all with module('templates')
    moduleName: 'templates'
},

And then in the test, do like

// Load templates
angular.mock.module('templates');

And it works!