Как я могу проверить директиву с помощью шаблонаUrl в браузере без головного мозга Chutzpah

Ответ 1

Мне удалось заставить его работать, используя опцию Chutzpah compile. Я поместил karma-ng-html2js-preprocessor в PowerShell script, а затем позвонил из Chutzpah, чтобы скомпилировать HTML в файлы JS.

Добавлен PowerShell script рядом с файлом настроек chutzpah.json(ниже script содержит непроверенную поддержку 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'));

Ответ 2

вы можете использовать ссылку "шаблон" из Chutzpah

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, чтобы найти их и поместить их вручную в шаблон Template AngularJS Template Cache.

мой 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 для поиска Шаблона и добавления его в Template Cache. Angular firsts смотрит в кэш Template и не делает HTTP-вызов.

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

который отлично работает до сих пор, но работает только с chutzpah, когда вы запускаете этот тест с помощью Resharper, тест завершится неудачно, потому что resharper не копирует шаблон в тестовый HTML.

Я также просматриваю запрос на странице Chutzpah GitHub, чтобы окружить HTML тегами Script и идентификатором, чтобы вам не нужно было расширять шаблон https://github.com/mmanela/chutzpah/issues/330

Ответ 3

У меня была аналогичная проблема, пытающаяся проверить мои директивы. Я нашел решение, используя шаблон из https://github.com/vojtajina/ng-directive-testing.

Шаг 1: используйте плагин ng-html2js для компиляции шаблона angular в javascript Шаг 2: сделайте так, как ответил предыдущий ответ, и включите его в качестве модуля в вашем перед каждым.

ng-html2js также позволяет выполнять пользовательские манипуляции с "url", который он ожидает, что может быть полезно, если ваш тестовый каталог не совпадает с вашим каталогом приложений.

Ответ 4

Используя ng-html2js, это отличное видео, в котором показано, как получить все настройки для проверки директивы templateUrl. Я не уверен, насколько это применимо к Chutzpah, поскольку это пример Karma, но он может получить вас в правильном направлении!

https://vimeo.com/90876119

Ответ 5

Вы можете использовать jasmine-jquery для загрузки содержимого из файла или http в $templateCache. Он работает в Chutzpah без каких-либо изменений.

Сначала добавьте jasmine-jquery в ваш проект и добавьте chutzpah.json Ссылки:

(из моего кода)

"References" : [
    {"Path" : "vendor/jasmine-jquery-2.1.0.js"}
]

Затем в вашем тесте введите $templateCache и загрузите его "живым" контентом через jasmine.getFixtures() следующим образом:

beforeEach(inject(function ($templateCache) {
    //Loading template from live develop server
    jasmine.getFixtures().fixturesPath = "http://localhost:47152";
    var templateUrl = "/myApp/directives/template.html";
    $templateCache.put(templateUrl, jasmine.getFixtures()  
        .getFixtureHtml_(templateUrl));
}));

Если вы загружаете через http и используете Chrome для своих тестов, вы должны добавить поддержку CORS на сервере.

Ответ 6

Убедитесь, что вы включили свой шаблон в инжектор, прежде чем он будет создан. Так что попробуйте,

beforeEach(module('myApp/directives/template.html');