CODEWITHSUNDEEP
javascriptangularjsjasmine
Subash
Subash

Reputation: 7256

Spying on Angular element.css function in Jasmine test

I have an angular directive link function as follows:

link: function(scope, elem) {
   elem.css({height: 100%});
}

So I want to test if the css function was called on element in my test. This is what I have tried and doesn't work:

it('should apply correct css', function() {
    beforeEach(function() {
      elem = $compile('<my-directive></my-directive>')($scope)
   });

   elem.css = jasmine.createSpy('css').and.returnValue({height: 100%});

   expect(elem.css).toHaveBeenCalled();
   expect(elem[0].attr('style')).toContain('height: 100%');
});

I am not really sure about the best approach to test this. How do I make this work?

Upvotes: 1

Views: 731

Answers (1)

logee
logee

Reputation: 5067

Why not just test the effects of the directive without a spy. See plunker

describe('myDirective', function () {
    var $scope, $compile, element;

    beforeEach(module('myApp'));

    beforeEach(inject(function (_$rootScope_, _$compile_) {
        $scope = _$rootScope_.$new();
        $compile = _$compile_;
        element = angular.element('<my-directive></my-directive>');
    }));

    it('should set height to 100%', function (){
      expect(element[0].style.height).toBe('');
      $compile(element)($scope);
      expect(element[0].style.height).toBe('100%');
      expect(element.attr('style')).toContain('height: 100%');
    });
});

Upvotes: 4

Related Questions