I want to test an angular directive with karma and jasmine. The directive uses an external template named complete.html.
I try to get the html template with the following code:
describe('directive', function () {
beforeEach(module('sampleapp'));
it('test',
function(){
inject(function ($rootScope, $compile) {
var $scope = $rootScope.$new();
var element = $compile(angular.element('<auto-complete></auto-complete>'))($scope);
$scope.$digest();
var textarea = element.find('textarea');
expect(textarea.length).toBe(1);
});
}
); });
I then receive this error:
Error: Unexpected request: GET test/complete.html
I searched for a solution for my problem and found this post: Unit Testing AngularJS directive with templateUrl
I followed the instructions for the karma-solution. My karma.conf.js looks like the following:
plugins : [
'karma-ng-html2js-preprocessor',
'karma-chrome-launcher',
'karma-jasmine'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'../complete.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
moduleName: "complete.html"
},
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'../src/main/web/bower_components/jquery/dist/jquery.min.js' ,
'../src/main/web/bower_components/angular/angular.min.js' ,
'../src/main/web/bower_components/angular-route/angular-route.js',
'../src/main/web/bower_components/angular-mocks/angular-mocks.js',
'../complete.html',
'../src/main/web/scripts/application.js',
'../src/main/web/scripts/main.js',
'../src/main/web/scripts/service.js',
'../src/main/web/scripts/plz.json',
'tests.js'
],
(I cropped out the unnecessary parts obviously)
Then as instructed i try to load the generated module complete.html in my test file:
describe('directive', function () {
beforeEach(module('sampleapp'));
beforeEach(module('complete.html'));
it('test',
function(){
inject(function ($rootScope, $compile) {
var $scope = $rootScope.$new();
var element = $compile(angular.element('<auto-complete></auto-complete>'))($scope);
$scope.$digest();
var textarea = element.find('textarea');
expect(textarea.length).toBe(1);
});
}
);});
But i still get the error Error: Unexpected request: GET test/complete.html
I feel like I miss to do an important part but cant find a complete solution for the situation I am in. How do i correctly use the generated module so I dont get the error?
I would be very thankful for some help.