angularjs - 如何在 Chutzpah 的 headless 浏览器中使用 templateUrl 测试指令

Question

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

我正在使用 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.
    };
});

模板.html:

<div><div ng-transclude></div></div>

Jasmine 测试示例:

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

Answer 1

我设法让它工作，使用 Chutzpah 的 编译选项。我移植了karma-ng-html2js-preprocessor进入 PowerShell 脚本，然后从 Chutzpah 调用该脚本以将 HTML 编译为 JS 文件。

在 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 文件添加到 References(可以从测试文件中添加引用，但我更喜欢使用 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)'"
    }
}

在您的测试文件中，加载模块，在我的情况下，它们都在"template"模块中

beforeEach(module('templates'));
// or alternatively
beforeEach(module('/path/to/templates/foo.html'));