如何在 Chutzpah 的无头浏览器中使用 templateUrl 测试指令

有谁知道如何让像 Chutzpah 的 Visual Studio 测试适配器这样的无头浏览器允许指令访问其 .html 模板文件？ Chutzpah 使用 PhantomJS 作为无头浏览器，这似乎限制了我的选择。

我正在使用 Chutzpah Test Adapter 2.5 和 AngularJS 1.2.0-r.2。

我收到错误：

意外请求：GET myApp/directives/template.html

这是由于 Angular 尝试使用 $http 服务访问我的指令模板引起的。

我发现了一些不同的解决方法：

1. 手动使用 XMLHttpRequest 导入模板。 https://stackoverflow.com/a/18368287/545680
2. 使用 Grunt 等实用程序将模板内联到指令的 JS 代码中。 https://github.com/vojtajina/ng-directive-testing
3. $httpBackend.when('GET', 'myApp/directives/template.html').passThrough()- 这只适用于 e2e 测试，不适用于单元测试。
4. 将模板直接放入测试代码中。 https://stackoverflow.com/a/15231422/545680

这些选择都没有让我特别满意。我希望能够让指令透明地加载其模板，以便我可以将其作为组件进行测试。有什么办法可以让这个场景发挥作用吗？

示例代码：

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!");
    });
}

你可以使用 Chutzpah 的“模板”参考

http://matthewmanela.com/blog/chutzpah-2-4-2/ http://matthewmanela.com/blog/chutzpah-2-4-2/

/// <template path="../../MvcAngularJs1_3/ScriptsApp/directives/Templates/testTemplate.html" />
/// <reference path="../../mvcangularjs1_3/scripts/jquery-2.1.1.js" />
/// <reference path="../../mvcangularjs1_3/scripts/angular.js" />
/// <reference path="../../mvcangularjs1_3/scripts/angular-mocks.js" />
...

在参考文献下，Chutzpah 将 HTML 直接包含在测试 HTML 文件中。我为我的模板提供了一个独特的 css 类来查找它们并手动将它们放入模板 AngularJS 模板缓存中。

我的 HTML 模板

<div class="row templateTestTemplate">
   <div class="col-lg-12">
       <h1>Tempalte Test</h1>
   </div>
</div>

该指令

angular.module("testTemplateDirective", [])
    .directive("testTemplate", function() {
        return {
           restrict: 'A',
           replace: true,
           templateUrl: 'ScriptsApp/directives/Templates/testTemplate.html'
       }
});

在我的单元测试中，我使用 jQuery 查找模板并将其添加到模板缓存中。 Angular 首先查看模板缓存，并且不进行 HTTP 调用。

var template = jQuery(".templateTestTemplate")[0].outerHTML;
$templateCache.put("ScriptsApp/directives/Templates/testTemplate.html", template);

到目前为止效果很好，但仅适用于 chutzpah，当您使用 Resharper 运行此测试时，测试将失败，因为 resharper 不会将模板复制到测试 HTML 中。

我还在 Chutzpah GitHub 页面上打开了一个请求，用脚本标签和 ID 包围 HTML，这样您就不需要扩展模板https://github.com/mmanela/chutzpah/issues/330 https://github.com/mmanela/chutzpah/issues/330