I'm using Karma with Jasmine Framework to test my AngularJS v1 app. I've set up ng-html2js plugin to convert partials into a module. I can access partials using $templateCache
.
When I try to compile the directive, I don't get anything though. The template for the url is specified using templateUrl
.
My project structure is as such.
project
|--index.php
|--karma.conf.js
|--assets
|--app
|--controllers
|--directives
|--my-directive.js
|--partials
|--my_directive.html
|--tests
|--directive-test.js
karma.conf.js
...
preprocessors: {
"assets/app/partials/**/*.html": ['ng-html2js']
},
files: [
...
'assets/app/controllers/**/*.js',
'assets/app/directives/**/*.js',
'assets/app/partials/**/*.html',
'assets/app/tests/**/*.js',
],
ngHtml2JsPreprocessor: {
moduleName: 'my.partials'
},
...
directive-test.js
describe('Test My Directive', function () {
var $compile, $rootScope;
beforeEach(function () {
module('myapp');
module('my.partials');
inject(function (_$compile_, _$rootScope_, _$templateCache_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$templateCache = _$templateCache_;
// This prints the template to the console
console.log($templateCache.get('assets/app/partials/my_directive.html'));
});
});
it('check if directive compiles', function () {
var scope = $rootScope.$new();
var template = $compile('<my-directive></my-directive>')(scope);
scope.$digest();
var templateAsHtml = template.html();
// This doesn't print the template to the console
console.log('templateAsHtml', templateAsHtml);
expect(templateAsHtml).toContain("Lorem ipsum");
});
});
my-directive.js
myapp.directive('myDirective', function() {
return {
replace:true,
restrict:'E',
templateUrl: 'assets/app/partials/my_directive.html',
link: function (scope, element, attrs) {
console.log('my directive');
}
}
});
assets/app/partials/directives/my_directive.html
<div><h2>Test Directive</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et enim non sem bibendum maximus. Nunc at urna sit amet.</p></div>
I solved it this way - thanks to cues from @Aaron Pool. Using
templateUrl
in directives makes an asynchronous request / AJAX calls to fetch the template. $http AJAX calls can be intercepted using $httpBackend. Capture the AJAX call and respond with the template from the$templateCache
. Here's the modified code assuming$httpBackend
was injected in thebeforeEach()
block.