有没有人知道如何获得一个无头浏览器,如Chutzpah的Visual Studio测试适配器,以允许一个指令访问其.html模板文件？ Chutzpah使用PhantomJS作为无头浏览器,似乎限制了我的选择.
我使用的是Chutzpah测试适配器2.5和AngularJS 1.2.0-r.2.
我得到错误：
Unexpected request: GET myApp/directives/template.html
这是由Angular尝试使用$http服务访问我的指令的模板引起的.
我找到了几个不同的解决方法：
> Manually using XMLHttpRequest to import the templates.
> Using a utility like Grunt to inline the template into your directive’s JS code.
> $httpBackend.when(‘GET’,’myApp / directives / template.html’).passThrough() – 这只适用于e2e测试,而不是单元测试.
> Put the template directly into the test code.
这些选项都不是特别满足我的.我更愿意让该指令透明地载入其模板,以便我可以将其作为组件进行测试.有办法可以让这个场景工作吗？
示例代码：
angular.module('myDirective',[]).directive('myDirective',function() {
return {
restrict: 'E',transclude: true,templateUrl: 'myApp/directives/template.html',// Some other options,omitted for brevity.
};
});
template.html：
<div><div ng-transclude></div></div>
示例茉莉花测试：
describe('myDirective',function() {
// Assign $scope using inject(),load module etc.
// Insert workaround for $httpBackend loading my templateUrl here.
it('should transclude content',function() {
var element = $compile("<my-directive>Look Mom,I'm in my directive!</my-directive>")($scope);
$scope.$digest();
expect(element.text().trim()).toBe("Look Mom,I'm in my directive!");
});
}
我设法使它使用Chutzpah的编译选项.我将
karma-ng-html2js-preprocessor移植到PowerShell脚本中,然后从Chutzpah调用该脚本将HTML编译成JS文件.
原文链接：https://www.f2er.com/angularjs/142884.html在chutzpah.json设置文件旁边添加PowerShell脚本(以下脚本包含对PreprendPrefix和StripSuffix的未经测试的支持)
# PowerShell port of https://github.com/karma-runner/karma-ng-html2js-preprocessor
Param (
[parameter(Mandatory=$true)] [string] $Path,[string] $Module = '',[string] $StripPrefix = '',[string] $PrependPrefix = '',[string] $StripSuffix = ''
)
Function EscapeContent($content) {
$content -replace "\\","\\\\" -replace "'","\'" -replace "`r?`n","\n' +`n '"
}
Function Rename($fileName) {
"$PrependPrefix" + ("$fileName" -replace "$StripPrefix",'' -replace "$StripSuffix",'' -replace "\\","/")
}
$Template = If ("$Module" -eq "") {
"angular.module('{0}',[]).run(function(`$templateCache) {{`n" `
+ " `$templateCache.put('{0}',`n '{2}');`n" `
+ "}});`n"
} Else {
"(function(module) {{`n" `
+ "try {{`n" `
+ " module = angular.module('{1}');`n" `
+ "}} catch (e) {{`n" `
+ " module = angular.module('{1}',[]);`n" `
+ "}}`n" `
+ "module.run(function(`$templateCache) {{`n" `
+ " `$templateCache.put('{0}',`n '{2}');`n" `
+ "}});`n" `
+ "}})();`n"
}
Get-ChildItem $Path -Recurse -Filter *.html | Foreach-Object {
$content = Get-Content $_.FullName | Out-String
$content = EscapeContent $content
$fileName = Rename "$($_.FullName)"
("$Template" -f "$fileName","$Module","$content") | Set-Content "$($_.FullName).js"
}
将编译配置添加到chutzpah.json,并将“编译”的JS文件添加到引用(该参考可以从测试文件中添加,但我更喜欢使用chutzpah.json来管理所有引用)
{
"References": [
{ "Path": "./path/to/templates/","Include": "*.html.js" },],"Compile": {
"Extensions": [".html"],"ExtensionsWithNoOutput": [".html.js"],"SourceDirectory": "./path/to/templates","OutDirectory": "./path/to/templates","Executable": "%powershellexe%","Arguments": "-NoProfile %chutzpahsettingsdir%\\chutzpah-ng-html2js-compiler.ps1 -Path '/path/to/templates/' -Module 'templates' -StripPrefix '.+(?=\\\\templates)'"
}
}
在测试文件中,加载模块,在我的情况下,它们都在“模板”模块中
beforeEach(module('templates'));
// or alternatively
beforeEach(module('/path/to/templates/foo.html'));
