AngularJS Directive testing with external html templates.

karma.conf.js

//...

files = [
  JASMINE,
  JASMINE_ADAPTER,
  'main/webapp/app/lib/jquery-1.8.1.js',
  'main/webapp/app/lib/jquery.autotab-1.1b.js',
  'main/webapp/app/lib/jquery.placeholder.min.js',
  'main/webapp/app/lib/date.js',
  'main/webapp/app/lib/angular/angular.js',
  'test/js/lib/angular/angular-mocks.js',
  'main/webapp/js/**/*.js',
  'test/js/unit/**/*.js',

  //include the directory where directive templates are stored.
  'main/webapp/templates/**/*.htm'
];

// generate js files from html templates to expose them during testing.
preprocessors = {
  'main/webapp/templates/**/*.htm': 'html2js'
};

//...

ssn.js

directivesModule.directive('ssn', function()
{
	return {
		restrict: 'A',
		replace: true,
		require:'ngModel',
		scope: {
			ssn: '=ngModel',
			disabled:'=ngDisabled'
		},
		//templateUrl points to an external html template.
		templateUrl: '/myApp/templates/ssnControl.htm', 
		
	//...

ssnControl.htm

<div class="ssnContainer">
	<input type="text" tabindex="{{tabIndex1}}" name="ssn1" class="ssn1" ng-disabled="disabled"
	       placeholder="XXX"  maxlength="3" ng-model="ssn1"/>
	<input type="text" tabindex="{{tabIndex2}}" name="ssn2" class="ssn2" ng-disabled="disabled"
	       placeholder="XX"  maxlength="2" ng-model="ssn2"/>
	<input type="text" tabindex="{{tabIndex3}}" name="ssn3" class="ssn3" ng-disabled="disabled"
	       placeholder="XXXX" maxlength="4" ng-model="ssn3"/>
</div>

ssnControlSpec.js

describe("ssnControl Directive", function() {

	var $compile, $rootScope, template;


	//load all modules, including the html template, needed to support the test
	beforeEach(module('directives',
		'main/webapp/templates/ssnControl.htm'));

	beforeEach(inject(function($templateCache,_$compile_,_$rootScope_) {

		//assign the template to the expected url called by the directive and put it in the cache
		template = $templateCache.get('main/webapp/templates/ssnControl.htm');
		$templateCache.put('/myApp/templates/ssnControl.htm',template);

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


	it("should display 3 text input fields, populated with ssn data", function() {

		var ssn1 = '123';
		var ssn2 = '45';
		var ssn3 = '6789';

		$rootScope.ssn = ssn1 + ssn2 + ssn3;

		//create the element angularjs will replace with the directive template
		var formElement = angular.element('<div ssn ng-model="ssn"></div>');
		var element = $compile(formElement)($rootScope);
		$rootScope.$digest();

		expect(element.find('input').length).toEqual(3);

		//use jquery to find the sub elements.
		expect($('input:first-child',element).val()).toEqual(ssn1);
		expect($('input:nth(1)',element).val()).toEqual(ssn2);
		expect($('input:nth(2)',element).val()).toEqual(ssn3);



	})

});

karma.conf is obsolete, anyway:

running karma:

Error: No module: 'main/webapp/templates/ssnControl.htm'

How do you make it working?

https://github.com/karma-runner/karma-ng-html2js-preprocessor