有谁知道如何获得像 Chutzpah 的 Visual Studio 测试适配器这样的无头浏览器来允许指令访问其 .html 模板文件?Chutzpah 使用 PhantomJS 作为无头浏览器,这似乎限制了我的选择。
我正在使用 Chutzpah 测试适配器 2.5 和 AngularJS 1.2.0-r.2。
我得到错误:
意外请求:GET myApp/directives/template.html
这是由 Angular 尝试使用 $http 服务来访问我的指令模板引起的。
我发现了一些不同的解决方法:
- 手动使用 XMLHttpRequest 导入模板。
- 使用像 Grunt 这样的实用程序将模板内联到指令的 JS 代码中。
$httpBackend.when('GET', 'myApp/directives/template.html').passThrough()
- 这仅适用于 e2e 测试,不适用于单元测试。- 将模板直接放入测试代码中。
这些选项都没有让我特别满意。我希望能够让指令透明地加载其模板,以便我可以将其作为组件进行测试。有没有办法让这个场景工作?
示例代码:
angular.module('myDirective', []).directive('myDirective', function() {
return {
restrict: 'E',
transclude: true,
templateUrl: 'myApp/directives/template.html',
// Some other options, omitted for brevity.
};
});
模板.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!");
});
}