Unit testing an Angular Directive

Question

I'm trying to unit test all the directives using karma and jasmine. When I try to load a directive, which has a template called header.html, I get the following error: Error: Unexpected request: GET header.html No more request expected

http://plnkr.co/edit/YTUFXCMdK5JFEwMzzXaR?p=preview

Update: I have the following config in karma.conf.js:

files: [
      'test/client/specs/main.js',
      // 'WebContent/modules/common/header/**/*.html',
      {pattern: 'WebContent/libs/**/*.js', included: false},
      {pattern: 'WebContent/modules/**/*.js', included: false},
      {pattern: 'WebContent/modules/common/header/tmpl/*.html', included: false},
      {pattern: 'test/client/specs/**/*spec.js', included: false}
    ],


    // generate js files from html templates
    preprocessors: {
      'WebContent/modules/common/header/**/*.html': ['ng-html2js']
    },


    ngHtml2JsPreprocessor: {
      'moduleName': 'Templates',
      cacheIdFromPath: function(filepath) {
        return filepath.match(/\/WebContent\/modules\/common\/header\/.*\.html/);
      }
    },

I'm trying to load it by:

beforeEach(function() {
      module("Templates");
    });

Now i get the following errors:

Error: [$injector:modulerr] Failed to instantiate module Templates due to:
    Error: [$injector:nomod] Module 'Templates' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    http://errors.angularjs.org/1.2.12/$injector/nomod?p0=Templates

score 1 · Answer 1 · answered Mar 13 '14 at 04:27

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

Sten Muchow · Accepted Answer · 2014-03-16T18:06:50.020

1

I solved this in my unit tests by injecting the $templateCache into the test and then putting the html into the cache.

http://plnkr.co/edit/btgYfiiRzacS6MfPFlbv?p=preview

I researched a few different approaches, and we settled on putting the html into the directive.

template: "<div>This is the template</div>"

It makes it much easier to test as you no longer need to update the templateCache in the unit test, which is a pain in the ass and error prone when you have a big piece of html in your directive.

edited Mar 16 '14 at 18:06

answered Mar 16 '14 at 17:48

Sten Muchow

6,623
4
36
46

Yea but I want to test all of my external templates. Sometimes I end up changing my templates when working with my source code. I don't want to put all of my templates in my unit test code. – user730009 Mar 16 '14 at 18:11
Like I said then the least painful way is to put them in the directive directly (no pun intended). Feels a bit shitty though to put the html and JS together, but the benefits from unit testing seems to out weigh the other bad points. – Sten Muchow Mar 16 '14 at 18:20
I agree with you. At least I have it working right now. I was wondering what if I use $http to fetch the templates and put them in $templateCache in my unit test code one template at a time. – user730009 Mar 16 '14 at 18:37
Could be an idea... I havent tried something like that, but it def seems to make the unit tests a bit more complex having to deal with asynchronous issues... – Sten Muchow Mar 16 '14 at 18:42
Meanwhile I will accept your answer and work with this. Thanks. – user730009 Mar 17 '14 at 14:38
So far for us its worked great! When I find the even cleaner solution I will be sure to share it with you! – Sten Muchow Mar 17 '14 at 17:58

Unit testing an Angular Directive

2 Answers2