testing - How to test AngularJS Directive with scrolling -
i have infinite scroll directive trying unit test. have this:
describe('infinite scroll', function(){ var $compile, $scope; beforeeach(module('nag.infinitescroll')); beforeeach(inject(function($injector) { $scope = $injector.get('$rootscope'); $compile = $injector.get('$compile'); $scope.scrolled = false; $scope.test = function() { $scope.scrolled = true; }; })); var setupelement = function(scope) { var element = $compile('<div><div id="test" style="height:50px; width: 50px;overflow: auto" nag-infinite-scroll="test()">a<br><br><br>c<br><br><br><br>e<br><br>v<br><br>f<br><br>g<br><br>m<br>f<br><br>y<br></div></div>')(scope); scope.$digest(); return element; } it('should have proper initial structure', function() { var element = setupelement($scope); element.find('#test').scrolltop(10000); expect($scope.scrolled).tobe(true); }); });
however .scrolltop(10000); not seem trigger anything.
is there anyway unit test type of functionality (i able unit test other directives similar interactions clicking on elements)?
in case relative, infinite scroll code:
angular.module('nag.infinitescroll', []) .directive('naginfinitescroll', [ function() { return function(scope, elm, attr) { var raw = elm[0]; elm.bind('scroll', function() { if (raw.scrolltop + raw.offsetheight >= raw.scrollheight) { scope.$apply(attr.naginfinitescroll); } }); }; } ]);
you have trigger scroll event on element manually in test:
element.find('#test').scrolltop(10000); element.find('#test').triggerhandler('scroll');
Comments
Post a Comment