[英]Error: Unexpected request: GET views/partials/* for a nested directive even when using html2js in karma/jasmine unit test
I am using Karma and Jasmine for unit testing for my angularjs application. 我正在使用Karma和Jasmine对我的angularjs应用程序进行单元测试。 I have a directive's(say Directive A) template in which another directive(say Directive B) is getting rendered, although it is working fine in application but test case fails to render the Directive B's template.
我有一个指令(比如指令A)模板,其中另一个指令(比如指令B)被渲染,虽然它在应用程序中工作正常,但测试用例无法呈现指令B的模板。 Following is the error I get :-
以下是我得到的错误: -
Error: Unexpected request: GET views/partials/directiveb.html
Expected GET https://my-sandbox.app.com/123456
Below is the directive A's code :- 以下是指令A的代码: -
angular.module('myApp')
.directive('directiveA', function (myservices, myOtherServices) {
return {
controller: function(){
/* ... controller function ... */
},
templateUrl: '/views/partials/directivea.html',
restrict: 'E',
link: function postLink(scope, element, attrs) {
/* ...link function... */
}
};
});
Directive A's template :- 指令A的模板: -
<div>
<div class="col-md-12">
<h4>We <strong>Need</strong></h4>
<div directive-b some-attribute=="true"></div>
</div>
<div directive-b some-attribute=="false"></div>
</div>
Directive A's test case :- 指令A的测试案例: -
'use strict';
describe('Directive: directiveA', function () {
// load the directive's module
beforeEach(module('myApp'));
beforeEach(module('template-module'));
var element, appId, reqResponse, scope, dscope, reqUrl, $httpBackend, $compile;
beforeEach(inject(function ($rootScope, _$httpBackend_) {
scope = $rootScope.$new();
$httpBackend = _$httpBackend_;
appId = "123456";
reqUrl = "https://my-sandbox.app.com/" + appId;
reqResponse = {}
}));
it('should Pass', inject(function (_$compile_) {
$httpBackend.expect('GET', reqUrl).respond(reqResponse);
$compile = _$compile_;
element = angular.element('<directive-a/>');
element = $compile(element)(scope);
scope.$digest();
$httpBackend.flush();
dscope = element.scope();
expect(dscope.myVar).toBe(true);
}));
});
Karma config file :- Karma配置文件: -
// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// generator-karma 0.8.2
module.exports = function(config) {
config.set({
autoWatch: true,
basePath: '../',
frameworks: ['jasmine'],
preprocessors: {
'app/views/**/*.html': 'html2js'
},
ngHtml2JsPreprocessor: {
stripPrefix: "app",
moduleName: "template-module"
},
// list of files / patterns to load in the browser
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-touch/angular-touch.js',
'bower_components/angular-strap/dist/angular-strap.min.js',
'bower_components/angular-strap/dist/angular-strap.tpl.min.js',
'bower_components/ng-file-upload/angular-file-upload-shim.min.js',
'bower_components/ng-file-upload/angular-file-upload.js',
'bower_components/jquery/dist/jquery.js',
'app/scripts/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js',
'app/views/**/*.html'
],
// list of files / patterns to exclude
exclude: ['test/spec/e2e/*'],
// web server port
port: 8080,
browsers: ['PhantomJS'],
// Which plugins to enable
plugins: [
// 'karma-chrome-launcher',
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-ng-html2js-preprocessor'
],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false,
colors: true,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO
// Uncomment the following lines if you are using grunt's server to run the tests
//proxies: {
// '/': 'http://localhost:9000/'
// },
// URL root prevent conflicts with the site root
// urlRoot: '_karma_'
});
};
NOTE : I am already using html2js for $templateCache, and still I am getting this issue. 注意:我已经在$ templateCache中使用了html2js,但我仍然遇到了这个问题。
The directive A's template URL is /views/partials/directivea.html
. 指令A的模板URL是
/views/partials/directivea.html
。 This doesn't cause an HTTP GET to be executed because the template is stored in the cache by the preprocessor: 这不会导致执行HTTP GET,因为预处理器将模板存储在缓存中:
ngHtml2JsPreprocessor: {
stripPrefix: "app",
moduleName: "template-module"
}
But there is a GET request executed for views/partials/directiveb.html
. 但是为
views/partials/directiveb.html
执行了GET请求。 Note the difference with the first URL: it doesn't have a leading /
. 请注意与第一个URL的区别:它没有前导
/
。 The template cache has an entry for the partial, but its URL in the cache is /views/partials/directiveb.html
, not views/partials/directiveb.html
. 模板缓存有一个部分条目,但缓存中的URL是
/views/partials/directiveb.html
,而不是views/partials/directiveb.html
。
Make sure you consistently use absolute or relative paths, and depending on your choice, strip the app
prefix or the app/
prefix in the preprocessor configuration. 确保始终使用绝对路径或相对路径,并根据您的选择,在预处理器配置中去除
app
前缀或app/
前缀。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.