test(scrollpoint): test scroll behaviour and custom scroll points

Author: nivekcode

projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.spec.ts

@@ -10,7 +10,7 @@ describe('Scroll helper', () => {
       innerWidth: 0,
       scrollBy: () => {
       }
-    }
+    } as any
   };
   let scrollSpy: SpyObj<any>;
 
@@ -21,57 +21,65 @@ describe('Scroll helper', () => {
 
   describe('Top scroll', () => {
 
-    it('should scroll to the top with the default scroll speed when we drag over the top viewport', () => {
-      const element = {
-        getBoundingClientRect: () => ({top: -100, left: 0, bottom: 0, right: 0})
-      } as any;
-      sut.scrollIfNecessary(element);
+    it(`should scroll to the top with the default scroll speed when we drag over
+    the top viewport + scroll buffer`, () => {
+      documentMock.defaultView.scrollY = 0;
+      const event = {
+        pageY: 40
+      };
+      sut.scrollIfNecessary(event);
       expect(scrollSpy).toHaveBeenCalledWith({top: -50, behavior: 'smooth'});
     });
 
     it('should scroll to the top with the default scroll speed when we drag over the top scroll position', () => {
-      const element = {
-        getBoundingClientRect: () => ({top: 120, left: 0, bottom: 0, right: 0})
-      } as any;
-      sut.scrollIfNecessary(element, {top: 140});
+      documentMock.defaultView.scrollY = 0;
+      const event = {
+        pageY: 110
+      };
+      sut.scrollIfNecessary(event, {top: 140});
       expect(scrollSpy).toHaveBeenCalledWith({top: -50, behavior: 'smooth'});
     });
 
     it('should scroll to the top with the custom scroll speed when we drag over the top viewport', () => {
-      const element = {
-        getBoundingClientRect: () => ({top: -100, left: 0, bottom: 0, right: 0})
-      } as any;
+      documentMock.defaultView.scrollY = 0;
+      const event = {
+        pageY: 40
+      };
       const scrollSpeed = 100;
-      sut.scrollIfNecessary(element, {}, scrollSpeed);
+      sut.scrollIfNecessary(event, {}, scrollSpeed);
       expect(scrollSpy).toHaveBeenCalledWith({top: -scrollSpeed, behavior: 'smooth'});
     });
 
   });
 
   describe('Bottom scroll', () => {
 
-    it('should scroll to the bottom with the default scroll speed when we drag over the bottom viewport', () => {
-      const element = {
-        getBoundingClientRect: () => ({top: 100, left: 0, bottom: 20, right: 0})
-      } as any;
-      sut.scrollIfNecessary(element);
+    it('should scroll to the bottom with the default scroll speed when we drag over the bottom viewport - scroll buffer', () => {
+      documentMock.defaultView.scrollY = 0;
+      documentMock.defaultView.innerHeight = 100;
+      const event = {
+        pageY: 80
+      };
+      sut.scrollIfNecessary(event);
       expect(scrollSpy).toHaveBeenCalledWith({top: 50, behavior: 'smooth'});
     });
 
     it('should scroll to the bottom with the default scroll speed when we drag over the bottom scroll position', () => {
-      const element = {
-        getBoundingClientRect: () => ({top: 120, left: 0, bottom: 200, right: 0})
-      } as any;
-      sut.scrollIfNecessary(element, {bottom: 140});
+      documentMock.defaultView.scrollY = 0;
+      const event = {
+        pageY: 141
+      };
+      sut.scrollIfNecessary(event, {bottom: 140});
       expect(scrollSpy).toHaveBeenCalledWith({top: 50, behavior: 'smooth'});
     });
 
     it('should scroll to the top with the custom scroll speed when we drag over the top viewport', () => {
-      const element = {
-        getBoundingClientRect: () => ({top: 20, left: 0, bottom: 20, right: 0})
-      } as any;
+      documentMock.defaultView.scrollY = 0;
+      const event = {
+        pageY: 110
+      };
       const scrollSpeed = 100;
-      sut.scrollIfNecessary(element, {}, scrollSpeed);
+      sut.scrollIfNecessary(event, {}, scrollSpeed);
       expect(scrollSpy).toHaveBeenCalledWith({top: scrollSpeed, behavior: 'smooth'});
     });
 

projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts

@@ -33,11 +33,12 @@ export class ScrollHelperService {
   }
 
   private isTopScrollNeeded(currentPosition: number, scrollPointTop: number): boolean {
-    return scrollPointTop ? currentPosition < scrollPointTop + this.SCROLL_BUFFER : currentPosition < 20;
+    return scrollPointTop ? currentPosition < scrollPointTop :
+      currentPosition < this.SCROLL_BUFFER;
   }
 
   private isBottomScrollNeeded(currentPosition: number, scrollPointBottom: number): boolean {
-    return scrollPointBottom ?
-      currentPosition < scrollPointBottom : currentPosition > this.window.innerHeight - this.SCROLL_BUFFER;
+    return scrollPointBottom ? currentPosition > scrollPointBottom :
+      currentPosition > this.window.innerHeight - this.SCROLL_BUFFER;
   }
 }

projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts

@@ -1,11 +1,11 @@
 import {NgsgItemDirective} from './ngsg-item.directive';
-import createSpyObj = jasmine.createSpyObj;
 
 import {NgsgSortService} from './ngsg-sort.service';
 import {NgsgSelectionService} from './ngsg-selection.service';
 import {NgsgReflectService} from './ngsg-reflect.service';
 import {NgsgStoreService} from './ngsg-store.service';
 import {NgsgEventsService} from './ngsg-events.service';
+import createSpyObj = jasmine.createSpyObj;
 import createSpy = jasmine.createSpy;
 
 describe('NgsgItemDirective', () => {
@@ -220,18 +220,32 @@ describe('NgsgItemDirective', () => {
     expect(consoleWarnSpy).toHaveBeenCalledWith(expectedWarniningMessage);
   });
 
-  it('should call the scrollHelper once we drag', () => {
-    const event = {
-      target: 'Some target'
-    };
-    const scrollPointTop = 20;
-    const scrollSpeed = 50;
-    sut.scrollPointTop = scrollPointTop;
-    sut.scrollSpeed = scrollSpeed;
-    spyOn(scrollHelperService, 'scrollIfNecessary');
-
-    sut.drag(event);
-    expect(scrollHelperService.scrollIfNecessary)
-      .toHaveBeenCalledWith(event.target, {top: scrollPointTop}, scrollSpeed);
+  describe('Drag', () => {
+
+    it('should not call the scrollHelper if autoScroll is set to false', () => {
+      spyOn(scrollHelperService, 'scrollIfNecessary');
+      sut.drag({});
+      expect(scrollHelperService.scrollIfNecessary).not.toHaveBeenCalled();
+    });
+
+    it('should call the scrollHelper with the event, the scrollpoints and the scrollspeed', () => {
+      spyOn(scrollHelperService, 'scrollIfNecessary');
+      const event = 'A very cool event';
+      const scrollPointTop = 10;
+      const scrollPointBottom = 80;
+      const scrollSpeed = 100;
+
+      sut.scrollPointTop = scrollPointTop;
+      sut.scrollPointBottom = scrollPointBottom;
+      sut.scrollSpeed = scrollSpeed;
+      sut.autoScroll = true;
+
+      sut.drag(event);
+      expect(scrollHelperService.scrollIfNecessary).toHaveBeenCalledWith(event, {
+        top: scrollPointTop,
+        bottom: scrollPointBottom
+      }, scrollSpeed);
+    });
+
   });
 });