How can I utilise my templateCache module in my Jasmine tests?

Question

I do NOT want to use karma-ng-html2js-preprocessor or $httpBackend. I have a templateCache module which I created dynamically.

app.js

angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ui.router', 'appTemplates']);

templates.js

(function(){

'use strict';

angular.module('appTemplates', []).run(['$templateCache',
    function($templateCache) {
        $templateCache.put('js/Templates/datetimepicker.html', '<div>My html here</div>');
    }
]);
})();

And a directive

datetimepicker.js

angular.module('myApp').directive('datetimepicker',
    function () {
        return {
            restrict: 'A',
            replace: false,
            templateUrl: 'js/Templates/datetimepicker.html'
        };
    }
);

The problem is, my test does not seem to want to use the templateCache when I compile a directive.

test.js

(function () {

"use strict";

describe("Datetimepicker directive tests", function () {

    var scope, templateCache, element;

    // load the directive's module
    beforeEach(module('myApp'));

    beforeEach(inject(function ($rootScope, $templateCache) {
        scope = $rootScope;
        templateCache = $templateCache;


    }));

    it('should exist', inject(function ($compile) {

       //this console.log prints out the correct HTML from cache
  //console.log(templateCache.get('js/Templates/datetimepicker.html'));

        element = angular.element('<div data-datetimepicker></div>');
        element = $compile(element)(scope);
        // this logs the element
        console.log(element);
        //this $digest call throws the error
        scope.$digest();

        console.log(element);

        expect(element.html()).toContain('div');
    }));
});
})();

I get:

Error: Unexpected request: GET template/datepicker/datepicker.html

No more request expected at $httpBackend in my console when I run the test.

Any help appreciated. Thanks

The clue was in the error. The datetimepicker directive contains an Angular-UI directive called datepicker. It is this that is causing the error. I guess my directive is not unit testable. — colincclark, Sep 09 '15 at 07:52

score 2 · Answer 1 · answered Sep 08 '15 at 14:03

2

Either directive module should reference the template cache module as a dependency :

angular.module('myApp', ['appTemplates']).directive('datetimepicker',

Or load the module manually in your test :

// load the directive's module
beforeEach(module('myApp'));
beforeEach(module('appTemplates'));

Otherwise the template cache module run method would not execute, and as such, no templates in cache.

answered Sep 08 '15 at 14:03

mathieu

30,974
4
64
90

As you can see from my original code, the appTemplates module is injected as a dependency in my application (app.js). The templateCache is being run, as my comment in test.js attests. The templateCache.get works! Your solution SHOULD work, but my test is not recognising it, and that is still the problem. – colincclark Sep 09 '15 at 07:46

score 0 · Answer 2 · answered Sep 08 '15 at 13:59

Use the $httpBackend mock service, for requests.

//expect a GET request to a url.
$httpBackend.expectGET('whatever url you want');
//...place your code.

//flush pending requests.
$httpBackend.flush();

For more information see the official angular $httpBackend service page.

score 0 · Answer 3 · answered Sep 09 '15 at 08:18

The clue was in the error. The datetimepicker directive contains an Angular-UI directive called datepicker. It is this that is causing the error. I guess my directive is not unit testable, and I will focus on E2E tests for this one. The question is therefore misleading, as the template actually contained more HTML than I posted here. Thanks anyway, SO! Hopefully this answer will help people who are getting the same error though!

How can I utilise my templateCache module in my Jasmine tests?

3 Answers3