Блог

Я пытаюсь протестировать 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

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

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

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

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

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

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