Could not load the template HTML file in Karma tests for a Angular directive

Question

Despite some people having the same issues (like [here][1] or [there][2]), I do not succeed to test my directive in my Angular (1.2.25) application.

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 the tests (grunt karma), I get that 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 get what I do wrong in my preprocessor. I've tried a lot of different configuration in the ngHtml2JsPreprocessor, but the error is always the same. I saw in the DEBUG logs that the pre processor is working on my template HTML 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 a module-name, like that:

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

then, in my Jasmine test, I add it:

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

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

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

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