4

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?

A. Duff
  • 4,097
  • 7
  • 38
  • 69

2 Answers2

7

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');
user2943490
  • 6,900
  • 2
  • 22
  • 38
  • Can you provide more details about "Load your HTML templates into Angular's $templateCache"? I'm injecting that service into my tests, but no templates are loaded so they're coming back as undefined. – A. Duff Nov 20 '14 at 18:37
  • You need to use `ng-html2js` which is linked above. It's a Karma plugin that will retrieve .html files and insert them into Angular's `$templateCache` for you. Alternatively, you can do this manually with `$templateCache.put` but it will likely be tedious. $templateCache API: https://docs.angularjs.org/api/ng/service/$templateCache – user2943490 Nov 20 '14 at 22:32
3

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

boyomarinov
  • 615
  • 4
  • 12
  • 1
    When I try to access element.isolateScope() as you suggest, I get undefined. My directive does define an isolate scope, but this method does not return it. element.scope() works, but not the other. In what circumstance would it be undefined? – tengen Dec 11 '14 at 20:26
  • 1
    What do you use for your directive's template loading - `template` or `templateUrl`? There has been some discussion about the fact that $compile of a directive with templateUrl would not trigger digest cycle, so you need to do this manually before you're able to access the isolated scope. – boyomarinov Jan 23 '15 at 10:08