mardi 27 janvier 2015

Unit testing angular directives -need advice

I have already gotten some amazing help from you guys testing my angular directive but I am still having a ton of trouble testing this part of my directive:



link: function (scope, element, attrs) {
scope.$watch('defaultSrc', function (value) {
if (value !== undefined) {
scope.imageSource = value;
}
});

element.click(function () {
scope.pickImage(scope.accountId).then(function (image) {
scope.imageSource = image.storageUrl;
scope.fileId = image.fileId;
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
});
}


I am trying to test the element.click by using the triggerHandler but im not having any luck. Testing the link: $watch function has also proven to be impossible for me. Has anyone ever done this? I have found simular examples but none that I seem to be able to get working


this is what I currently have:



describe('element.click()', function () {

var image = {
storageUrl: 'http://ift.tt/15PRIm0',
fileId: 6432342
};

beforeEach(function () {
scope.campaign = {
fileId: '43253',
accountId: '3874',
imageSource: 'http://ift.tt/15PRIlY',
width: '250',
height: '250'
};
var element = angular.element('<img data-ng-src="{{ imageSource }}" width="{{campaign.width}}" height="{{campaign.height}}" alt="Image Picker" class="img-rounded" />');
compiled = $compile(element)(scope);
compiled.triggerHandler('click');
scope.$digest();
});

it('should call pickImage when clicked', function () {
scope.pickImage = function (accountId) {
var defer = $q.defer();
defer.resolve(image);
return defer.promise;
};
spyOn(scope, 'pickImage');
expect(scope.pickImage).toHaveBeenCalledWith(scope.campaign.accountId);

});

it('should assign data from resolved promise when clicked', function () {
scope.pickImage = function (accountId) {
var defer = $q.defer();
defer.resolve(image);
return defer.promise;
};
expect(scope.imageSource).toEqual(image.storageUrl);
expect(scope.fileId).toEqual(image.fileId);
});

Aucun commentaire:

Enregistrer un commentaire