在花了最后一天试图做这项工作后,我发现我回到了同样的错误,我在开头有:
错误:意外请求:GET test-directive.html
我使用Karma和Jasmine来测试Angular中的指令。我已经看过类似的问题,在StackOverflow,但发现,在其他示例中尝试过的一切是无济于事。
代码结构
测试应用程序
-src
– 电源
–lib
–js
– 模块
— testDir
—- test.js
—- test-directive.html
– – 测试
—– test.spec.js
-测试
–config
— karma.conf.js
–e2e
Karma配置
'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. }); }); });
缩短了几个文件,以坚持到问题所在。在调用beforeEach(module(‘dir-templates’))时,应该将所有匹配的.html文件加载到$ templateCache中,并阻止GET请求抛出错误。
任何帮助将不胜感激,因为它真的一直驱动我坚果。如果您有任何其他问题,请发表评论。
所以,一个痛苦的头痛,似乎是一个两线修复。在Chrome中打开Karma(而不是PhantomJS)并查看源文件后,我注意到当ng-html2js将指令附加到$ templateCache时,它使用整个路径,而不是指令定义中提供的路径。
简而言之,’src / modules / test / test-directive.html.js’!==’test-directive.html.js’。
为了实现这一点,修改karma.conf.js文件ngHtml2JsProcessor如下:
ngHtml2JsPreprocessor: { stripPrefix: 'src/',moduleName: 'dir-templates' },
和指令声明的templateUrl看起来像:
templateUrl: 'modules/test/test-directive.html'