testing directive, dom manipulation not occurring - Angularjs/jasmine

Question

I am running my first test on a directive, and while it seems that the directive is being invoked (there is a GET request being made for the directive's template url), the DOM manipulation that is supposed to occur in the link function is not - well it's that or I'm just not testing it correctly.

// Generated by CoffeeScript 1.6.3
(function() {
  var sprangularDirectives;

  sprangularDirectives = angular.module('sprangularDirectives', []);

  sprangularDirectives.directive('productDirective', function() {
    return {
      scope: {
        product: '='
      },
      templateUrl: 'partials/product/_product.html',
      link: function(scope, el, attrs) {
        return el.attr('testattr', 'isthisclasshere');
      }
    };
  });

}).call(this);

Test:

'use strict';

describe('productDirective', function() {

    var scope, el, directive, $httpBackend, compiler, compiled, html;

    beforeEach(angular.mock.module('sprangularApp'));

    beforeEach(function() {

        html = '<div data-product-directive product="currentProduct"></div>';

        inject(function($injector) {
            $httpBackend = $injector.get('$httpBackend');

            // jasmine.getHTMLFixtures().fixturesPath='base/partials/product';

            $httpBackend.when('GET', 'partials/product/_product.html').respond(
                 '  <div class="product">'
                +'      {{ currentProduct.name }}'
                +'      {{ currentProduct.page }}'
                +'  </div>'
            );

            scope = $injector.get('$rootScope');

            el = angular.element(html);

            compiler = $injector.get('$compile');
            compiled = compiler(el);
            compiled(scope);

            scope.$digest();
        });

    });

    it('Should have an isolate scope', function() {
        scope.currentProduct = {name: 'testing'};   

        console.log(el.attr('testattr'))
        console.log(el.isolateScope())
        expect(el.scope().product.name).toBe('testing');
    });
});

console.log(el.attr('testattr')) returns undefined...even though when I boot my browser up it's there. Some help would be awesome :) thanks

score 0 · Answer 1 · answered Apr 08 '14 at 22:10

The element you are using is the pre-compiled element reference. The element you want is returned from the "compiled(scope)" method call:

compiler = $injector.get('$compile');
compiled = compiler(el);
var element = compiled(scope);     // <-- This guy!

I use this snippet as a testing helper method:

var compileTemplate = function (scope, rawTemplate) {
    var template = angular.element(rawTemplate)
    var element = $compile(template)(scope)
    scope.$digest()
    var new_scope = element.scope()
    return [element, new_scope]
}

testing directive, dom manipulation not occurring - Angularjs/jasmine

1 Answers1