This is my directive. I need to write a test for it. Mocha, chai, sinon have used.
I don't have any idea how to write the test case for this directive with compile function.
'use strict';
angular.module('image-lazy-loader-directive', [])
.directive('imageLazySrc', function ($document, $timeout, scrollAndResizeListener) {
return {
restrict: 'A',
compile: function () {
return function ($scope, $element, $attributes) {
var listenerRemover;
function isInView(clientHeight, clientWidth) {
// get element position
var imageRect = $element[0].getBoundingClientRect();
if ($element.hasClass('size-placeholder')) {
imageRect = $element.parent()[0].getBoundingClientRect();
}
var hoverlap = 0.05 * clientHeight;
var voverlap = 0.025 * clientWidth;
if (($element[0].offsetWidth > 0 && $element[0].offsetHeight >= 0) &&
(
$element.hasClass('ignore-position') ||
(
(imageRect.top >= -hoverlap && imageRect.bottom <= clientHeight + hoverlap) ||
(imageRect.bottom >= -hoverlap && imageRect.top <= clientHeight + hoverlap)
) &&
(
(imageRect.left >= -voverlap && imageRect.left < clientWidth + voverlap) ||
(imageRect.right <= clientWidth + voverlap && imageRect.right > -voverlap)
)
)
) {
$element[0].src = $attributes.imageLazySrc; // set src attribute on element (it will load image)
$element.removeClass('force-image-src');
// unbind event listeners when image src has been set
listenerRemover();
}
}
// bind listener
listenerRemover = scrollAndResizeListener.bindListener(isInView);
// unbind event listeners if element was destroyed
// it happens when you change view, etc
$element.on('$destroy', function () {
listenerRemover();
});
//explicitly call scroll listener (because, some images are in viewport already and we haven't scrolled yet)
isInView(
$document[0].documentElement.clientHeight,
$document[0].documentElement.clientWidth
);
};
}
};
});
Have done some what but still need to write more test cases .
Below is my test. Can any one please help me to test eh function isInView()
'use strict';
describe('ImageLazySrc', function () {
var element;
var scope;
var $compile;
var scrollAndResizeListenerMock;
beforeEach(module('image-lazy-loader-directive'));
beforeEach(module(initMock));
beforeEach(inject(initServices));
it('Should register for a event listener', function () {
var elm = create('<img image-lazy-src="test.jpg">');
expect(elm.isolateScope()).to.be.defined;
expect(scrollAndResizeListenerMock.bindListener.calledOnce).to.eql(true);
});
it('calling is in view function', function(){
var elm = create('<img image-lazy-src="img.jpg">');
});
function initMock ($provide){
$provide.factory('scrollAndResizeListener', function () {
return scrollAndResizeListenerMock;
});
scrollAndResizeListenerMock = {
bindListener: sinon.spy(function () {
return Q.when();
})
}
}
function initServices (_$compile_, _$rootScope_) {
$compile = _$compile_;
scope = _$rootScope_.$new();
}
function create(html) {
var compiledElem;
var elem = angular.element(html);
compiledElem = $compile(elem)(scope);
scope.$digest();
return compiledElem;
};
});
