AngularJS testing directives with templateUrl

Question

I'm trying to use karma to test AngularJS directives. But I'm running into issues with templateUrls. Using technique described here, it gets even stranger. It seems to work as advertised and loads my template into the $templateCache, but that cache isn't being used by the directive. Here's some code:

This will work just fine

.directive('messageComposer', function($templateCache) {
  return {
    restrict: 'E',
    template: $templateCache.get('partials/message_composer.html'),
    replace: true,
    link: function() {
      console.log('hello world');
    }
  };
});

but as soon as I use a templateUrl, it fails to bind in the tests:

.directive('messageComposer', function() {
  return {
    restrict: 'E',
    templateUrl: 'partials/message_composer.html',
    replace: true,
    link: function() {
      console.log('hello world');
    }
  };
});

Anyone know what's going on here?

Here's my unit test setup:

var $scope;
var $compile;

beforeEach(function() {
    module('partials/message_composer.html');
    module('messageComposer');

    inject(function(_$compile_, $rootScope) {
        $scope = $rootScope.$new();
        $compile = _$compile_;
    });  
});


it("works", function() {
    $scope.message = {};
    elem = angular.element("<message-composer message='message'></message-composer>")
    $compile(elem)($scope);

    console.log(elem);

    expect(true).toBeDefined();
});

thomaux · Accepted Answer · 2014-04-29 07:37:00Z

1

According to the url (http://tylerhenkel.com/how-to-test-directives-that-use-templateurl/), I believe you have run the following command:

npm install karma-ng-html2js-preprocessor --save-dev

Now when you are using the above preprocessor, then this preprocessor will convert HTML files into JS strings and will generate Angular modules. These modules, when loaded, puts these HTML files into the $templateCache and therefore Angular won't try to fetch them from the server.

Hope, the following files will clarify you better:

https://github.com/karma-runner/karma-ng-html2js-preprocessor https://github.com/vojtajina/ng-directive-testing

edited Apr 29, 2014 at 7:37

thomaux

19.8k10 gold badges83 silver badges107 bronze badges

answered Apr 29, 2014 at 7:34

Pulak Kanti Bhattacharyya

4121 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nicholas Over a year ago

That seems to work for the most part, but strangely my directives still don't like the templateUrl. If I use template: $templateCache.get('...'), it works fine tough. Any ideas on what I might be doing wrong?

Sylvain Over a year ago

Do you see GET requests that fail with a 404? Check your basePath setting in your karma config file.

Collectives™ on Stack Overflow

AngularJS testing directives with templateUrl

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related