我正在使用Karma和Jasmine进行angularjs应用程序的单元测试。 我有一个指令(比如指令A)模板,其中另一个指令(比如指令B)正在呈现,虽然它在应用程序中工作正常,但测试用例无法呈现指令B的模板。 以下是我得到的错误: -
Error: Unexpected request: GET views/partials/directiveb.html
Expected GET https://my-sandbox.app.com/123456
以下是指令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... */
}
};
});
指令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>
指令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配置文件: -
// 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_'
});
};
注意:我已经在$ templateCache中使用了html2js,但我仍然遇到了这个问题。
答案 0 :(得分:6)
指令A的模板网址为/views/partials/directivea.html
。这不会导致执行HTTP GET,因为预处理器将模板存储在缓存中:
ngHtml2JsPreprocessor: {
stripPrefix: "app",
moduleName: "template-module"
}
但是为views/partials/directiveb.html
执行了GET请求。请注意与第一个网址的区别:它没有前导/
。模板缓存有一个部分条目,但缓存中的URL为/views/partials/directiveb.html
,而不是views/partials/directiveb.html
。
确保始终使用绝对或相对路径,并根据您的选择,在预处理器配置中删除app
前缀或app/
前缀。