karma directives templateUrl

Question

After a few days of research, and trying many examples, I cannot get a directive with a templateUrl to run in a karma test (the directive behaves as I expect it in the regular application).

Here's what I have:

karma.conf.js :

...

// list of files / patterns to load in the browser
files: [
  'js/vendor/angular/angular.min.js',
  'js/vendor/angular/angular-mocks.js',
  'js/common/module.js',
  'js/common/*Service.js',
  'js/common/*Factory.js',
  'moduleToTest/js/module.js',
  'moduleToTest/js/controller.js',
  'moduleToTest/js/directive.js',
  'moduleToTest/index.html',
  'test/*tests.js'
],

// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
    // karma-ng-html2js-preprocessor for templates in directives
    'moduleToTest/index.html': 'ng-html2js'
},
...

Karma Test :

describe('Directive Tests',function(){
    var $compile, $rootScope, $scope, element;

    //beforeEach(module('./moduleToTest/index.html')); // ???

    beforeEach(inject(
        ['$compile','$rootScope',function($c,$r){
            $compile = $c;
            $rootScope = $r;
            $scope = $r.$new();
            element = angular.element('<module-to-test-dir></module-to-test-dir>');
            $compile(element)($scope);

            //$r.$digest(); // Load the template ???
        }]
    ));

    it('should have N inputs',function(){
        expect(element.html()).not.toBe([]); //element.html()===[] right now
    });
});

moduleToTest/js/directive.js

angular.module('ModuleToTest').directive('moduleToTestDir',moduleToTestDir);
function moduleToTestDir(){
    return {
        restrict: 'E',
        controller: 'moduleToTestCtrl',
        templateUrl: 'moduleToTest/index.html'
    };
};

Any suggestions, questions, clarifications, or answers are welcome!

Answer 1

OK, I am answering my own question, but I hope this helps the next person trying to learn Karma.

karma.conf.js - wrong file order:

// list of files / patterns to load in the browser
files: [
  'js/vendor/angular/angular.min.js',
  'js/vendor/angular/angular-mocks.js',
  'js/common/module.js',
  'js/common/*Service.js',
  'js/common/*Factory.js',
  'moduleToTest/index.html', // --> Needs to come before .js files <--
  'moduleToTest/js/module.js',
  'moduleToTest/js/controller.js',
  'moduleToTest/js/directive.js',
  'test/*tests.js'
],

Karma Test :

describe('module testing', function(){

    beforeEach(module('ModuleToTest'));

    ... // Other component tests on module

    describe('Directive Tests',function(){
        var $compile, $rootScope, $scope, element;

        beforeEach(module('moduleToTest/index.html'));

        beforeEach(inject(
            ['$compile','$rootScope',function($c,$r){
                $compile = $c;
                $rootScope = $r;
                $scope = $r.$new();
                element = angular.element('<module-to-test-dir></module-to-test-dir>');
                $compile(element)($scope);

                $r.$digest(); // Load the template
            }]
        ));

        it('should not be empty',function(){
            expect(element.html()).not.toBe('');
        });
    });

});