Тестирование ng - при использовании компиляции $

Я пытаюсь протестировать ng-if в одном из моих шаблонов, компилируя представление против предварительно заданной области и запуская $scope. $digest.

Я нахожу, что скомпилированный шаблон выходит одинаково независимо от того, является ли мое условие правдивым или ложным. Я ожидаю, что скомпилированный html удалит элементы ng-if dom при ложности.

beforeEach(module('templates'));
beforeEach(inject(function($injector, $rootScope){
    $compile = $injector.get('$compile');
    $templateCache = $injector.get('$templateCache');
    $scope = $rootScope.$new();
    template = angular.element($templateCache.get('myTemplate.tpl.html'));
}));

afterEach(function(){
    $templateCache.removeAll();
});

it ('my test', function(){
    $scope.myCondition = true;
    $compile(template)($scope);
    $scope.$digest();


    expect(template.text()).toContain("my dom text");
    // true and false conditions both have the same effect
});

Здесь plunkr пытается показать, что происходит (не уверен, как тестировать в plunkr, поэтому я сделал это в контроллере) http://plnkr.co/edit/Kjg8ZRzKtIlhwDWgB01R?p=preview

Ответы

Ответ 1

Одна возможная проблема возникает, когда ngIf помещается в корневой элемент шаблона.
ngIf удаляет node и помещает комментарий в него. Затем он наблюдает за выражением и добавляет/удаляет фактический элемент HTML по мере необходимости. Проблема заключается в том, что если она помещается в корневой элемент шаблона, то один комментарий - это то, что осталось от всего шаблона (даже если только временно), который игнорируется (я не уверен, что это браузер, специфическое поведение), в результате чего создается пустой шаблон.

Если это действительно так, вы можете обернуть ваш элемент ngIf ed в <div>:

<div><h1 ng-if="test">Hello, world !</h1></div>

См. также эту короткую демонстрацию.

Другая возможная ошибка заканчивается пустым шаблоном, потому что она отсутствует в $templateCache. То есть если вы не выложите его в $templateCache неявно, тогда следующий код вернет undefined (в результате получится пустой элемент):

$templateCache.get('myTemplate.tpl.html')