Jasmine tests AngularJS Directives with templateUrl

Question

I'm writing directive tests for AngularJS with Jasmine, and using templateUrl with them: https://gist.github.com/tanepiper/62bd10125e8408def5cc

However, when I run the test I get the error included in the gist:

Error: Unexpected request: GET views/currency-select.html

From what I've read in the docs I thought I was doing this correctly, but it doesn't seem so - what am I missing here?

Thanks

Answer 1

If you're using ngMockE2E or ngMock:

all HTTP requests are processed locally using rules you specify and none are passed to the server. Since templates are requested via HTTP, they too are processed locally. Since you did not specify anything to do when your app tries to connect to views/currency-select.html, it tells you it doesn't know how to handle it. You can easily tell ngMockE2E to pass along your template request:

$httpBackend.whenGET('views/currency-select.html').passThrough();

Remember that you can also use regular expressions in your routing paths to pass through all templates if you'd like.

The docs discuss this in more detail: http://docs.angularjs.org/api/ngMockE2E.$httpBackend

Otherwise use this:

You'll need to use the $injector to access the new backend. From the linked docs:

var $httpBackend;
beforeEach(inject(function($injector) {
  $httpBackend = $injector.get('$httpBackend');
  $httpBackend.whenGET('views/currency-select.html').respond(200, '');
}));

Answer 2

the Karma way is to load the template html dynamically into $templateCache. you could just use html2js karma pre-processor, as explained here

this boils down to adding templates '.html' to your files in the conf.js file as well preprocessors = { '.html': 'html2js' };

and use

beforeEach(module('..'));

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

into your js testing file