Failed to load HTML template file in Karma tests for Angular directive

Question

Despite the fact that some people have the same problems (for example, [here] [1] or [there] [2]), I am not able to check my directive in an Angular application (1.2.25).

Here is my project structure:

myapp +- src/main/java/resources/META-INF/resources/workflow/directives | +- directives.js | +- *.html (all templates) +- src/test/javascript +- karma.conf.js +- spec/directives +- text-input.spec.js 

(yes, not a good structure, but my Angular application is stuck in a Java project)

My karma configuration:

 // Karma configuration module.exports = function (config) { config.set({ ... // base path, that will be used to resolve files and exclude basePath: '', // testing framework to use (jasmine/mocha/qunit/...) frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ // Third parties dependencies: jQuery, Angular, Angular modules, Angular mocks '../../main/resources/META-INF/resources/workflow/bower_components/...', // My directives '../../main/resources/META-INF/resources/workflow/directives/*.html', '../../main/resources/META-INF/resources/workflow/directives/*.js', // My application '../../main/resources/META-INF/resources/workflow/scripts/*.js', '../../main/resources/META-INF/resources/workflow/app/**/*.js', // My Test files 'spec/directives/*.js' ], // list of files / patterns to exclude exclude: [], // web server port port: 8888, browsers: [ 'Chrome' ], // Which plugins to enable plugins: [ 'karma-ng-html2js-preprocessor', 'karma-chrome-launcher', 'karma-jasmine' ], preprocessors: { '../../main/resources/META-INF/resources/workflow/directives/*.html': [ 'ng-html2js' ] }, ngHtml2JsPreprocessor: { // Not sure what to put here... }, ... }); }; 

My test:

 describe('directive: text-input', function() { var element, scope; beforeEach(module('myApp')); beforeEach(inject(function($rootScope, $compile) { scope = $rootScope.$new(); element = '<div my-input-text data-label="Foo" data-model="bar"></div>'; element = $compile(element)(scope); scope.$digest(); })); describe('basics tests', function() { it('should be editable', function () { expect(element.text()).toBe('Foo'); }); }); }); 

And the directive itself:

 var myDirs = angular.module('my-directives', []); // Text input myDirs.directive('myInputText', function () { return { replace: true, templateUrl: 'directives/text-input.html', scope: { label: '=', readOnly: '=', code: '=', model: '=' } }; }); 

When running tests ( grunt karma ) I get this error:

 Chrome 31.0.1650 (Windows 7) directive: text-input basics tests should be editable FAILED Error: Unexpected request: GET directives/text-input.html No more request expected 

I still don't understand what I'm doing wrong in my preprocessor. I tried many different configurations in ngHtml2JsPreprocessor , but the error is always the same. I have seen in DEBUG logs that the preprocessor is working on my HTML template files:

 DEBUG [preprocessor.html2js]: Processing "d:/dev/my-app/src/main/resources/META-INF/resources/workflow/directives/text-input.html". 

Thanks.

Answer 1

I finally found a solution. In my karma.conf.js I set module-name , for example:

  ngHtml2JsPreprocessor: { moduleName: 'my-directives' }, 

then in my jasmine test i add it:

 beforeEach(module('myApp')); beforeEach(module('my-directives')); 

Another solution is to directly install the HTML file as a module without changing karma.conf.js :

 beforeEach(module('directives/text-input.html')); 

But not a good solution, as I have a dozen directives/*.html ...