Accessing compiled template in unit tests

Question

Most of the Angular tutorials talk about using end to end tests with Protractor to test whether the compiled template came out as expected. I'm wondering if it's possible to do this with unit tests at all.

Most of the tutorials that do talk about referencing HTML code in unit tests describe compiling your own written code in the test, for example, to make sure a directive is being accessed correctly:

describe('some function', function () {
  it('should do something', inject(function ($compile, $rootScope) {
    var element = $compile('<div id = "foo" ng-hide = "somecondition">Bar</div>')($Scope);
    $rootScope.digest();
    //Search for a given DOM element and perform some test here
  }));
});

But let's say I want to test the code in the actual template file. Like if I wanted to test whether ng-hide was successfully set. I want to be able to do something like:

describe('some function', function () {
  it('should do something', function () {
    //Get the div with ID 'foo' in the compiled template
    var elm = $('#foo');
    expect(elm.css('display')).toEqual('none');
  });
});

This doesn't work when I do it. elm gets set to some HTML/Javascript code, but not the template's code, and elm.css('display') comes back as undefined.

Is there a way to unit test this with the Jasmine/Angular set up?

Answer 1

Load your HTML templates into Angular's $templateCache using ng-html2js so that they are available in your tests.

Retrieve your specific template in your tests:

var template = $templateCache.get('my/template.html');

Wrap the template in a jqLite/jQuery object that's easier to work it:

var element = angular.element(template);

Then you can select elements within your template:

var fooEl = element.find('#foo');

For asserting, you don't want to test that display: none is set on the element, that's testing the internal implementations of ng-hide. You can trust that the Angular team have their own tests that cover setting CSS properties. Instead, you want to test that you've written the template correctly, so it's more appropriate test for the existence of the ng-hide attribute on the element, and that it is supplied with the right scope property to bind to:

expect(fooEl.attr('ng-hide')).toBe('isFooElHidden');

Answer 2

In addition to the correct answer of @user2943490 :

• it's good practice to define dedicated scope and not use $rootScope var scope = $rootScope.$new(); var element = $compile(template)(scope);

• in most cases you want to test properties from the inner directive's scope. You could define it in your beforeEach method like this and access it in all your tests: var isolatedScope = element.isolateScope(); expect(isolatedScope.property).toEqual(value);