dimanche 30 août 2015

Unit Testing a function inside a angular directive using jasmine

I have directive in angular js. Which adds a 'src' attribute to the image element as shown below.

myApp.directive('imageonload', ['$q',function($q) {
var dPromise;
function loadImg(scope,target,url)
{

    var deferred = $q.defer();
    dPromise = deferred.promise;

    var img = new Image();
            // onload handler (on the image, not the element) 
            img.onload = function() {
                img.onload = null;
                //target.src = url;                                        
                deferred.resolve(url);
            };
            img.onerror = function() {
                img.onerror = null;
                //target.src = url;                                                          
                deferred.resolve(url);
            };
            // set the source for the image to initiate the load
            img.src = url; 
            return dPromise;   
}

return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        loadImg(scope,element,attrs.url).then(function(data){
                element[0].setAttribute("src",attrs.url);
            scope.updateLoadCount();
        });

    }
};

}]);

now I wanted to test whether the attribute src is added to the element ?using jasmine test case.

The spec I have written is like

it("should set the url after loading image",function(){ 

   elm = angular.element("<img id='tnl_pic_2' class='ng-scope' url='http://ift.tt/1LMLGF7' imageonload=''>");
    elm = compile(elm)(scope);
    scope.$digest();
    scope.img = new Image();

    expect(elm.attr('src')).not.toBe('');
  });

But my spec always fails and there is no coverage for directive, src attribute is never added to the element

As I am beginner in jasmine and angular , could you please help me out in how to test this functionality of directive. Thanks in adv !

Aucun commentaire:

Enregistrer un commentaire