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

Sten Muchow · Accepted Answer · 2014-03-16 18:06:50Z

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, 2014 at 18:06

answered Mar 16, 2014 at 17:48

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

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

6 Comments

user730009 Over a year ago

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.

Sten Muchow Over a year ago

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.

user730009 Over a year ago

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.

Sten Muchow Over a year ago

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...

user730009 Over a year ago

Meanwhile I will accept your answer and work with this. Thanks.

|

BKM · Accepted Answer · 2014-03-13 04:27:16Z

1

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

answered Mar 13, 2014 at 4:27

BKM

7,0797 gold badges32 silver badges47 bronze badges

Collectives™ on Stack Overflow

Unit testing an Angular Directive

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related