Karma 'Unexpected Request' when testing angular directive, even with ng-html2js
So, a painstaking headache for what seems to be a two line fix. After opening Karma in Chrome (instead of PhantomJS) and looking at the source files, I noticed that when ng-html2js attaches the directive to the $templateCache it uses the entire path, not the one provided in the directive definition.
In short, 'src/modules/test/test-directive.html.js' !== 'test-directive.html.js'
.
To achieve this, modify the karma.conf.js file ngHtml2JsProcessor to read like:
ngHtml2JsPreprocessor: {
stripPrefix: 'src/',
moduleName: 'dir-templates'
},
And the directive declaration's templateUrl to look like:
templateUrl: 'modules/test/test-directive.html'
Related videos on Youtube
dmaloney.calu
UI Designer/Developer & Web Application Developer HTML5, CSS3, JavaScript, jQuery Numbered Lists http://jsfiddle.net/FXAC7/6/ Vertical Aligned Multiline Text http://jsfiddle.net/peBKe/6/ Cancelling Angular $http Requests http://jsfiddle.net/vkdxpacs/2/
Updated on June 04, 2022Comments
-
dmaloney.calu almost 2 years
After spending the last day trying to make this work, I've found that I've circled back around to the same error I was having at the beginning:
Error: Unexpected request: GET test-directive.html
I'm using Karma and Jasmine to test directives in Angular. I've looked through similar questions on StackOverflow, but find that everything that has been tried in the other examples is to no avail.
Code structure
Test-App
-src
--bower
--lib
--js
--modules
---testDir
----test.js
----test-directive.html
----test
-----test.spec.js
-test
--config
---karma.conf.js
--e2eKarma Config
'use strict'; module.exports = function(config){ config.set({ basePath: '../../', frameworks: ['jasmine'], files: [ // Angular 'src/bower/angular/angular.js', // Mocks 'src/bower/angular-mocks/angular-mocks.js', // Libraries 'src/lib/**/*.js', // App 'src/js/*.js', 'src/modules/*/*.js', // Tests 'src/modules/**/test/*spec.js', // Templates 'src/modules/**/*.html' ], autoWatch: false, singleRun: true, reporters: ['progress'], browsers: ['PhantomJS'], preprocessors: { 'src/modules/**/*.html': 'ng-html2js' }, ngHtml2JsPreprocessor: { moduleName: 'dir-templates' }, plugins: [ 'karma-jasmine', 'karma-ng-html2js-preprocessor', 'karma-phantomjs-launcher', 'karma-chrome-launcher', 'karma-junit-reporter' ] }); };
test.js
'use strict'; angular.module('modules.test', []). directive('testDirective', [function() { return { restrict: 'E', templateUrl: 'test-directive.html', link: function($scope, $elem, $attrs) { $scope.someFn = function() { angular.noop(); }; } }; }]);
test-direct.html
<span>Hello World</span>
test.spec.js
'use strict'; describe('test module', function() { beforeEach(module('modules.test')); /* -- DIRECTIVES------------------ */ describe('directives', function() { var $compile, $scope, elm; beforeEach(module('dir-templates'); beforeEach(inject(function($compile, $rootScope) { $scope = $rootScope.$new(); elm = angular.element('<test-directive></test-directive>'); $compile(elm)($scope); $scope.$digest(); })); it('should have one span tag', function(){ //Jasmine test here to check for one span tag. }); }); });
Have shortened a couple of files to stick to just where the issue is. In calling
beforeEach(module('dir-templates'))
, it should be loading all of the matched .html files into the $templateCache and preventing the GET request that is throwing the error.Any help would be appreciated as it's really been driving me nuts. Please comment if you have any additional questions.
-
Admin over 8 yearsTo be more specific, the case defaults to the file system only if when you are using a match based on wildcards in your karma.conf. So if your directory was named "Templates" and your karma.conf referenced "src/templates/*.html" then the cache key would still use "templates" for that part of the path, but if your karma.conf referenced "src/**/*.html" then the path used in the cache key would be "Templates".