Testing ng-if using $compile

Question

I'm attempting to test an ng-if in one of my templates by compiling the view against a pre-defined scope and running $scope.$digest.

I'm finding that the compiled template is coming out the same regardless of whether my condition is truthy or falsy. I would expect the compiled html remove the ng-if dom elements when falsy.

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

Here's a plunkr attempting to show what's happening (not sure how to test in plunkr, so I've done it in a controller) http://plnkr.co/edit/Kjg8ZRzKtIlhwDWgB01R?p=preview

Answer 1

One possible problem arises when the ngIf is placed on the root element of the template.
ngIf removes the node and places a comment in it's place. Then it watches over the expression and adds/removes the actual HTML element as necessary. The problem seems to be that if it is placed on the root element of the template, then a single comment is what is left from the whole template (even if only temporarily), which gets ignored (I am not sure if this is browser-specific behaviour), resulting in an empty template.

If that is indeed the case, you could wrap your ngIfed element in a <div>:

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

---

See, also, this short demo.

---

Another possible error is ending with a blank template, because it is not present in the $templateCache. I.e. if you don't put it into the $templateCache exlicitly, then the following code will return undefined (resulting into an empty element):

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