[英]karma/jasmine/angular – Trouble unit-testing directives AngularJS that use templateUrl
指令的模板未加载。
现在我得到:
$ karma start test/config/karma.config.js
INFO [karma]: Karma v0.10.10 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 35.0.1916 (Mac OS X 10.9.4)]: Connected on socket PC84tuDRk52x9Cq4G_xp
Chrome 35.0.1916 (Mac OS X 10.9.4) Directive pagination test has the number of the page as text in each page item FAILED
Error: Unexpected request: GET static/src/partials/pagination.tpl.html
我试图对一个简单的指令进行单元测试。 在directives.js中声明的指令。
angular.module('app.directives', [])
.directive('pagination', function() {
return {
restrict: "E",
scope: {
numPages: "=",
currentPage: "="
},
templateUrl: 'static/src/partials/pagination.tpl.html',
replace: true,
link: function(scope) {
// ...
}
};
});
;
目录结构:
static
├── Gruntfile.js
├── bower.json
├── node_modules
├── package.json
├── src
│ ├── app.js
│ ├── controllers.js
│ ├── directives.js
│ ├── partials
│ │ ├── add.tpl.html
│ │ ├── edit.tpl.html
│ │ ├── list.tpl.html
│ │ ├── pagination.tpl.html
│ │ ├── secpage.tpl.html
│ │ └── toolbar.tpl.html
│ └── services.js
├── test
│ ├── config
│ │ └── karma.config.js
│ └── unit
│ ├── button-directive.test.js
│ ├── pagination-directive.test.js
│ └── t1.test.js
└── vendor
测试文件pagination-directive.test.js
describe('Directive pagination test', function () {
var $rootScope,
$compile,
element,
lis;
beforeEach(angular.mock.module('app.directives'));
beforeEach(angular.mock.module('templates'));
beforeEach(inject(function (_$rootScope_, _$compile_) {
$rootScope = _$rootScope_;
$compile = _$compile_;
$rootScope.numPages = 5;
$rootScope.currentPage = 3;
element = $compile('<pagination num-pages="numPages" current-page="currentPage"></pagination>')($rootScope);
$rootScope.$digest();
lis = function() {return element.find('li');};
}));
it('has the number of the page as text in each page item', function() {
for (var i=1; i<=$rootScope.numPages; i++) {
expect(lis().eq(i).text()).toEqual(''+i);
}
});
});
和业力配置:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'../../vendor/angular/angular.js',
'../../vendor/angular-mocks/angular-mocks.js',
'../../vendor/angular-cookies/angular-cookies.js',
'../../vendor/angular-route/angular-route.js',
'../../vendor/angular-resource/angular-resource.js',
'../../src/*.js',
'../../src/partials/*.html',
'../unit/*.test.js',
],
exclude: [],
preprocessors: {
"../../src/**/*.html": "ng-html2js"
},
ngHtml2JsPreprocessor: {
stripPrefix: "../../",
prependPrefix: "static/",
moduleName: "templates"
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
请帮帮我。
尝试这个 :
将karma.config.js移到静态文件夹下。
static
├── karma.config.js
karma.config.js
files: [
'vendor/angular/angular.js',
'vendor/angular-mocks/angular-mocks.js',
'vendor/angular-cookies/angular-cookies.js',
'vendor/angular-route/angular-route.js',
'vendor/angular-resource/angular-resource.js',
'src/*.js',
'src/partials/*.html',
'test/unit/*.test.js',
],
preprocessors: {
"src/**/*.html": "ng-html2js"
},
ngHtml2JsPreprocessor: {
stripPrefix: "src/",
moduleName: "templates"
},
指令
templateUrl: 'partials/pagination.tpl.html',
希望这可以帮助。
巨大的配置,而不是./static/node_modules/karma/bin/karma start static/test/config/karma.config.js
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '../../',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'./vendor/angular/angular.js',
'./vendor/angular-mocks/angular-mocks.js',
'./vendor/angular-cookies/angular-cookies.js',
'./vendor/angular-route/angular-route.js',
'./vendor/angular-resource/angular-resource.js',
'./src/*.js',
'./src/partials/*.html',
'./test/unit/*.test.js',
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
"./src/partials/*.html": "ng-html2js"
},
ngHtml2JsPreprocessor: {
moduleName: "templates"
}
});
};
出于某种原因, ng-html2js无法理解interpolateProvide提供程序的更改
.config(["$interpolateProvider", function($interpolateProvider){
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.