CODEWITHSUNDEEP
angularjsangularjs-directivekarma-runnerkarma-jasmine
timmy
timmy

Reputation: 1758

Karma Test Not Finding Cached Template

I am trying to test a directive that pulls its template from a URL.

I am using Karma's html2js pre-processor. The following is the relevant config from my karma.conf.js:

    // list of files / patterns to load in the browser
files: [
    'angular/jquery-1.9.1.min.js',
    'angular/angular.js',
    'angular/angular-*.js',
    'angular/ui-bootstrap-0.6.0.min.js',
    'angular/healthpro-ng-commons.js',
    '../../main/webapp/js/app.js',
    '../../main/webapp/js/**/*.js',
    '../../main/webapp/js/templates/**/*.html',
    'unit/**/*.js'
],

preprocessors: {
    //location of templates
    '../../main/webapp/js/templates/**/*.html': 'html2js'
}

Here is a portion of my Karma test:

describe('NoteDirective', function() {

var fixture, scope, $compile, $rootScope, template;

beforeEach(function() {
module('CrossReference');
});

beforeEach(inject(function($templateCache, _$compile_, _$rootScope_) {
  template = $templateCache.get('../../main/webapp/js/templates/Note.html');
  console.log('Template......', template);
  $templateCache.put('/CrossReference-portlet/js/templates/Note.html', template);   

  $compile = _$compile_;
  $rootScope = _$rootScope_;
}));

});

Logging the template shows that it is undefined. Any tips?

I've also tried tweaking the preprocess like so:

 ngHtml2JsPreprocessor: {
    stripPrefix: '../../main/webapp',
    prependPrefix: '/CrossReference-portlet'
}

Followed by loading up the template as a module:

beforeEach(module('/CrossReference-portlet/js/templates/Note.html'));

No luck. Any ideas?

Upvotes: 2

Views: 2419

Answers (3)

aliotta
aliotta

Reputation: 1

Relative File paths were not working for me as well but I was able to get it working by modifying this section of the karma config file.

ngHtml2JsPreprocessor: { 
    // define a custom transform function
    // - cacheId returned is used to load template
    //   module(cacheId) will return template at filepath
cacheIdFromPath: function(filepath) {
    // admin was where I wanted to point to
    var split = filepath.split('admin');
    var out = '/admin' + split[1];
    return out;
},
    moduleName: 'app.templates'
}

Doing this allowed me to access the files a wanted with $templateCache.get('/admin/path_to_file/template.html')

Upvotes: 0

DarthVanger
DarthVanger

Reputation: 1183

For those who's still struggling with this:
You may try adding a moduleName to your html2js preprocessor config in karma config

// karma config file
...
ngHtml2JsPreprocessor: {
    // the name of the Angular module to create
    moduleName: "myApp.templates"
}

And then in your test you need to load this module alongside with your main module, so it adds templates to the cache

// in your test spec
beforeEach(module('myApp'));
beforeEach(module('myApp.templates'));
beforeEach(inject(function($templateCache) {
    $templateCache.get('path/to/your/file.html');
});

This worked for me.

Upvotes: 5

Mathew Berg
Mathew Berg

Reputation: 28750

template = $templateCache.get('../../main/webapp/js/templates/Note.html');

Upvotes: 1

Related Questions