From bfdd3398f68a58ea9a16158c71abb1491cd1d672 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 6 Jun 2017 18:58:59 +0300
Subject: [PATCH] fix(aio): make `ScrollSpy` respond quicker to `scroll` events

Fixes ##17220
---
 aio/src/app/shared/scroll-spy.service.spec.ts | 50 ++++++++++---------
 aio/src/app/shared/scroll-spy.service.ts      |  2 +-
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/aio/src/app/shared/scroll-spy.service.spec.ts b/aio/src/app/shared/scroll-spy.service.spec.ts
index 062b6e08d4..7c7702fa3f 100644
--- a/aio/src/app/shared/scroll-spy.service.spec.ts
+++ b/aio/src/app/shared/scroll-spy.service.spec.ts
@@ -300,6 +300,7 @@ describe('ScrollSpyService', () => {
   });
 
   describe('window resize events', () => {
+    const RESIZE_EVENT_DELAY = 300;
     let onResizeSpy: jasmine.Spy;
 
     beforeEach(() => {
@@ -317,7 +318,7 @@ describe('ScrollSpyService', () => {
       window.dispatchEvent(new Event('resize'));
       expect(onResizeSpy).not.toHaveBeenCalled();
 
-      tick(300);
+      tick(RESIZE_EVENT_DELAY);
       expect(onResizeSpy).toHaveBeenCalled();
     }));
 
@@ -327,58 +328,59 @@ describe('ScrollSpyService', () => {
       onResizeSpy.calls.reset();
 
       window.dispatchEvent(new Event('resize'));
-      tick(300);
+      tick(RESIZE_EVENT_DELAY);
       expect(onResizeSpy).toHaveBeenCalled();
 
       info1.unspy();
       onResizeSpy.calls.reset();
 
       window.dispatchEvent(new Event('resize'));
-      tick(300);
+      tick(RESIZE_EVENT_DELAY);
       expect(onResizeSpy).toHaveBeenCalled();
 
       info2.unspy();
       onResizeSpy.calls.reset();
 
       window.dispatchEvent(new Event('resize'));
-      tick(300);
+      tick(RESIZE_EVENT_DELAY);
       expect(onResizeSpy).not.toHaveBeenCalled();
     }));
 
-    it('should only fire every 300ms', fakeAsync(() => {
+    it(`should only fire every ${RESIZE_EVENT_DELAY}ms`, fakeAsync(() => {
       scrollSpyService.spyOn([]);
       onResizeSpy.calls.reset();
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(RESIZE_EVENT_DELAY - 2);
       expect(onResizeSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(1);
       expect(onResizeSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(1);
       expect(onResizeSpy).toHaveBeenCalledTimes(1);
 
       onResizeSpy.calls.reset();
-      tick(150);
+      tick(RESIZE_EVENT_DELAY / 2);
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(RESIZE_EVENT_DELAY - 2);
       expect(onResizeSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(1);
       expect(onResizeSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('resize'));
-      tick(100);
+      tick(1);
       expect(onResizeSpy).toHaveBeenCalledTimes(1);
     }));
   });
 
   describe('window scroll events', () => {
+    const SCROLL_EVENT_DELAY = 10;
     let onScrollSpy: jasmine.Spy;
 
     beforeEach(() => {
@@ -395,7 +397,7 @@ describe('ScrollSpyService', () => {
       window.dispatchEvent(new Event('scroll'));
       expect(onScrollSpy).not.toHaveBeenCalled();
 
-      tick(300);
+      tick(SCROLL_EVENT_DELAY);
       expect(onScrollSpy).toHaveBeenCalled();
     }));
 
@@ -404,52 +406,52 @@ describe('ScrollSpyService', () => {
       const info2 = scrollSpyService.spyOn([]);
 
       window.dispatchEvent(new Event('scroll'));
-      tick(300);
+      tick(SCROLL_EVENT_DELAY);
       expect(onScrollSpy).toHaveBeenCalled();
 
       info1.unspy();
       onScrollSpy.calls.reset();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(300);
+      tick(SCROLL_EVENT_DELAY);
       expect(onScrollSpy).toHaveBeenCalled();
 
       info2.unspy();
       onScrollSpy.calls.reset();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(300);
+      tick(SCROLL_EVENT_DELAY);
       expect(onScrollSpy).not.toHaveBeenCalled();
     }));
 
-    it('should only fire every 300ms', fakeAsync(() => {
+    it(`should only fire every ${SCROLL_EVENT_DELAY}ms`, fakeAsync(() => {
       scrollSpyService.spyOn([]);
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(SCROLL_EVENT_DELAY - 2);
       expect(onScrollSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(1);
       expect(onScrollSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(1);
       expect(onScrollSpy).toHaveBeenCalledTimes(1);
 
       onScrollSpy.calls.reset();
-      tick(150);
+      tick(SCROLL_EVENT_DELAY / 2);
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(SCROLL_EVENT_DELAY - 2);
       expect(onScrollSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(1);
       expect(onScrollSpy).not.toHaveBeenCalled();
 
       window.dispatchEvent(new Event('scroll'));
-      tick(100);
+      tick(1);
       expect(onScrollSpy).toHaveBeenCalledTimes(1);
     }));
   });
diff --git a/aio/src/app/shared/scroll-spy.service.ts b/aio/src/app/shared/scroll-spy.service.ts
index ef6cc30bcf..4ef2c6d534 100644
--- a/aio/src/app/shared/scroll-spy.service.ts
+++ b/aio/src/app/shared/scroll-spy.service.ts
@@ -124,7 +124,7 @@ export class ScrollSpyService {
   private spiedElementGroups: ScrollSpiedElementGroup[] = [];
   private onStopListening = new Subject();
   private resizeEvents = Observable.fromEvent(window, 'resize').auditTime(300).takeUntil(this.onStopListening);
-  private scrollEvents = Observable.fromEvent(window, 'scroll').auditTime(300).takeUntil(this.onStopListening);
+  private scrollEvents = Observable.fromEvent(window, 'scroll').auditTime(10).takeUntil(this.onStopListening);
   private lastContentHeight: number;
   private lastMaxScrollTop: number;