AngularJS& Karma-Jasmine - 如何忽略templateUrl以避免“意外请求：GET ... /。html” [英] AngularJS & Karma-Jasmine - How to ignore templateUrl to avoid "Unexpected request: GET .../.html"
问题描述
我正在使用ES6开发一个AngularJS应用程序，所以在迁移到AngularJS 2.0时，我将尽可能少的工作。
但是我发现这是一个点击更复杂的单元测试。
所以我想做的是测试指令的控制器（loginSidebarCtrl）
这是我的代码：（LoginSidebar .js）
class LoginSidebar {
constructor（loginSidebarService）{
this.loginSidebarService = loginSidebarService;
}
/ *
...一些方法...
* /
}
LoginSidebar。$ inject = ['loginSidebarService'];
export default function（）{
return {
scope：{}，
templateUrl：'path / to / loginSidebar.tpl.html'，
替换：true，
控制器：LoginSidebar，
controllerAs：'loginSidebarCtrl'
};
};
我的app.js看起来像这样
/ *
...
import ...
...
* /
从./js/path/to/LoginSidebar.js导入loginSidebar;
从./js/path/to/LoginSidebarService.js导入loginSidebarService;
angular.module（'myModule'，[
'ngNewRouter'，
'ngAnimate'
]）
/ *
..
.directive（...）
....
* /
.directive（loginSidebar，loginSidebar）
/ *
...
.service（...）
....
* /
.service（loginSidebarService loginSidebarService）
/ *
.config（...）;
* /
angular.module（'booking'，[
'ngNewRouter'，
'ngAnimate'，
'cross.ui'，
'agenda.booking'
]）
.directive（alerts，alerts）
.directive（breadcrumbs，breadcrumbs）
.directive （topHeader，topHeader）
.directive（loginSidebar，loginSidebar）
.service（loginHandler，loginHandler）
.service（userHandler，userHandler）
.service（familyMembersService，familyMembersService）
.service（loginSidebarService，loginSidebarService）
.service（alertsHandlerService，alertsHandlerService）
//组件名称路径dir和className
.config（function（$ componentLoaderProvider）{
$ componentLoaderProvider.setTemplateMapping（function（name）{
return'page / booking /'+ dotCase （name）+'.html';
}）;
$ componentLoaderProvider.setCtrlNameMapping（f unction（name）{
return name [0] .toUpperCase（）+ name.substr（1）+'Ctrl';
}）;
}）
//漂亮的URL
.config（function（$ locationProvider）{
$ locationProvider.html5Mode（true）;
}）;
函数dotCase（str）{
return str.replace（/（[AZ]）/ g，function（$ 1）{
return'。'+ $ 1.toLowerCase ）;
}）;
}
这是我的spec.js（Jasmine）
describe（Test，function（）{
var el，scope;
beforeEach {
module（'myModule'）;
inject（function（$ compile，$ rootScope）{
el = angular.element（< login-sidebar> /
$ b $ compile（el）（$ rootScope。$ new（））;
$ rootScope。$ digest（）;
scope = el .isolateScope（）|| el.scope（）;
}）;
}）;
它（test function（）{
console.log（scope）;
}））;
}）;
当我运行它时会收到错误
< blockquote>
意外请求：GET ... /。html
但是当我不使用 templateUrl （当我删除它或评论它）它的工作原理。
我怎么能忽略templateUrl，所以当我想测试我的应用程序时，我不必在每个文档中注释 templateUrl
这可能不是最好的解决方案，但您可以通过将有问题的模板放入 $ templateCache 手动测试前。因为在模板缓存中找到模板，所以不需要GET请求。
在实际的源文件中，引入一个子模块依赖关系：
angular.module（'myApp'，['myApp.templates']）;
然后在每次测试之前运行这个
<$ p $（$ templateCache）{
$ templateCache.put（'url / of / template.html'，''） ;
}）;
还有其他方法可以使用模板缓存来实现，但这使您的主要应用程序主要是干净的测试代码。
I'm working on an AngularJS app using ES6, so I will have as little work as possible when migrating to AngularJS 2.0
But I found out that it's a bit more complicated to do unit tests.
So what I want to do is to test directive's "controller" (loginSidebarCtrl) Here is my code: (LoginSidebar.js)
class LoginSidebar {
constructor(loginSidebarService) {
this.loginSidebarService = loginSidebarService;
}
/*
... SOME METHODS ...
*/
}
LoginSidebar.$inject = ['loginSidebarService'];
export default function() {
return {
scope: {},
templateUrl: 'path/to/loginSidebar.tpl.html',
replace: true,
controller: LoginSidebar,
controllerAs: 'loginSidebarCtrl'
};
};
My app.js looks like this
/*
...
import ...
...
*/
import loginSidebar from "./js/path/to/LoginSidebar.js";
import loginSidebarService from "./js/path/to/LoginSidebarService.js";
angular.module('myModule', [
'ngNewRouter',
'ngAnimate'
])
/*
...
.directive(...)
....
*/
.directive("loginSidebar", loginSidebar)
/*
...
.service(...)
....
*/
.service("loginSidebarService", loginSidebarService)
/*
.config(...);
*/
angular.module('booking', [
'ngNewRouter',
'ngAnimate',
'cross.ui',
'agenda.booking'
])
.directive("alerts", alerts)
.directive("breadcrumbs", breadcrumbs)
.directive("topHeader", topHeader)
.directive("loginSidebar", loginSidebar)
.service("loginHandler", loginHandler)
.service("userHandler", userHandler)
.service("familyMembersService", familyMembersService)
.service("loginSidebarService", loginSidebarService)
.service("alertsHandlerService", alertsHandlerService)
// name path to components dir and className
.config(function ($componentLoaderProvider) {
$componentLoaderProvider.setTemplateMapping(function (name) {
return 'page/booking/' + dotCase(name) + '.html';
});
$componentLoaderProvider.setCtrlNameMapping(function (name) {
return name[0].toUpperCase() + name.substr(1) + 'Ctrl';
});
})
// pretty URL
.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
});
function dotCase(str) {
return str.replace(/([A-Z])/g, function ($1) {
return '.' + $1.toLowerCase();
});
}
And this is my spec.js (Jasmine)
describe("Test", function(){
var el, scope;
beforeEach(function () {
module('myModule');
inject(function($compile, $rootScope){
el = angular.element("<login-sidebar></login-sidebar>");
$compile(el)($rootScope.$new());
$rootScope.$digest();
scope = el.isolateScope() || el.scope() ;
});
});
it("test", inject(function() {
console.log(scope);
}));
});
When I run it I get an error
"Unexpected request: GET .../.html"
But when I don't use the templateUrl (when I delete it or comment it) it works as expected.
How can I somehow ignore the templateUrl so when I want to test my app I don't have to comment the templateUrl in each document ?
This might not be the best solution but you can get around the issue by putting the problematic templates inside the $templateCache manually before testing. Because the template is then found in the template cache no GET request is necessary.
In your actual source file, introduce a submodule dependency:
angular.module('myApp', ['myApp.templates']);
Then run this before each test
angular.module('myApp.templates').run(function($templateCache) {
$templateCache.put('url/of/template.html', '');
});
There are other ways you could implement this using template cache, but this keeps your main app mostly clean of test code.
这篇关于AngularJS& Karma-Jasmine - 如何忽略templateUrl以避免“意外请求：GET ... /。html”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
