Unit Testing AngularJS directive with templateUrl

Question

Using AngularJS.

Have a directive.

Directive defines templateUrl.

Directive needs unit testing.

Currently unit testing with Jasmine.

This recommends code like:

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

        });
    });
});

Running code in Jasmine.

Getting error:

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

templateUrl needs loading as-is

Cannot use respond

May be related to ngMock use rather than ngMockE2E use.

I haven't used .passThrough(); in that way, but from the docs, have you tried something like: $httpBackend.expectGET('path/to/template.html'); // do action here $httpBackend.flush(); I think this fits your usage better - you're not wanting to catch the request, i.e. whenGet(), but instead check it is sent, and then actually send it? — Alex Osborn
Thanks for the reply. I don't think that expectGET sends requests...at least out of the box. In the docs their example with /auth.py has a $httpBackend.when prior to the $httpBackend.expectGET and $httpBackend.flush calls. — Jesus is Lord
That's correct, expectGet is just checking whether a request was attempted. — Alex Osborn
Ah. Well I need a way to tell the $httpBackend mock to actually use the URL provided in the directive under templateUrl and go get it. I thought passThrough would do this. Do you know of a different way to do this? — Jesus is Lord
Hmm, I haven't done much e2e testing yet, but checking the docs - have you tried using the e2e backend instead - I think that's why you got no method passThrough - docs.angularjs.org/api/ngMockE2E.$httpBackend — Alex Osborn

SleepyMurph SleepyMurph · Accepted Answer · 2013-08-21T21:48:17

You're correct that it's related to ngMock. The ngMock module is automatically loaded for every Angular test, and it initializes the mock $httpBackend to handle any use of the $http service, which includes template fetching. The template system tries to load the template through $http and it becomes an "unexpected request" to the mock.

What you need a way to pre-load the templates into the $templateCache so that they're already available when Angular asks for them, without using $http.

The Preferred Solution: Karma

If you're using Karma to run your tests (and you should be), you can configure it to load the templates for you with the ng-html2js preprocessor. Ng-html2js reads the HTML files you specify and converts them into an Angular module that pre-loads the $templateCache.

Step 1: Enable and configure the preprocessor in your 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"
},

If you are using Yeoman to scaffold your app this config will work

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

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

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

Step 2: Use the module in your tests

// my-test.js

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

For a complete example, look at this canonical example from Angular test guru Vojta Jina. It includes an entire setup: karma config, templates, and tests.

A Non-Karma Solution

If you do not use Karma for whatever reason (I had an inflexible build process in legacy app) and are just testing in a browser, I have found that you can get around ngMock's takeover of $httpBackend by using a raw XHR to fetch the template for real and insert it into the $templateCache. This solution is much less flexible, but it gets the job done for now.

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

Seriously, though. Use Karma. It takes a little work to set up, but it lets you run all your tests, in multiple browsers at once, from the command line. So you can have it as part of your continuous integration system, and/or you can make it a shortcut key from your editor. Much better than alt-tab-refresh-ad-infinitum.

Unit Testing AngularJS directive with templateUrl

12 Answers

The Preferred Solution: Karma

A Non-Karma Solution