(refactor) use throttle-debounce and improve throttle tests

Author: potench

examples/apps/infinite-scrolling/app.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/sort-comp */
 import React, {Component} from "react";
 import Radium from "radium";
-import debounce from "lodash.debounce";
+import debounce from "throttle-debounce/debounce";
 import {Bling as Gpt, Events} from "react-gpt"; // eslint-disable-line import/no-unresolved
 import "../log";
 import Content from "./content";
@@ -40,14 +40,14 @@ class App extends Component {
         window.removeEventListener("resize", this.onScroll);
         this.stopTimer();
     }
-    onScroll = debounce(() => {
+    onScroll = debounce(66, () => {
         const scrollTop = window.scrollY || document.documentElement.scrollTop;
         if (scrollTop + window.innerHeight >= document.body.clientHeight) {
             this.setState({
                 page: ++this.state.page
             });
         }
-    }, 66)
+    })
     startTimer() {
         this.stopTimer();
         this.timer = setInterval(() => {

package.json

@@ -36,8 +36,7 @@
     "eventemitter3": "^2.0.2",
     "fbjs": "^0.8.1",
     "hoist-non-react-statics": "^1.0.5",
-    "lodash.debounce": "^4.0.8",
-    "lodash.throttle": "^4.1.1"
+    "throttle-debounce": "^1.0.1"
   },
   "devDependencies": {
     "babel-cli": "^6.5.1",

src/createManager.js

@@ -1,6 +1,5 @@
 import EventEmitter from "eventemitter3";
-import debounce from "lodash.debounce";
-import throttle from "lodash.throttle";
+import {debounce, throttle} from "throttle-debounce";
 import invariant from "fbjs/lib/invariant";
 import {canUseDOM} from "fbjs/lib/ExecutionEnvironment";
 import Events from "./Events";
@@ -132,18 +131,23 @@ export class AdManager extends EventEmitter {
         });
     }
 
-    _foldCheck = throttle(event => {
+    _foldCheck = throttle(20, event => {
         const instances = this.getMountedInstances();
         instances.forEach(instance => {
             if (instance.getRenderWhenViewable()) {
                 instance.foldCheck(event);
             }
         });
-    }, 20, {
-        leading: true,
-        trailing: true
+
+        if (this.testMode) {
+            this._getTimer();
+        }
     })
 
+    _getTimer() {
+        return Date.now();
+    }
+
     _handleMediaQueryChange = event => {
         if (this._syncCorrelator) {
             this.refresh();
@@ -311,7 +315,7 @@ export class AdManager extends EventEmitter {
         return true;
     }
 
-    render = debounce(() => {
+    render = debounce(4, () => {
         if (!this._initialRender) {
             return;
         }
@@ -379,7 +383,7 @@ export class AdManager extends EventEmitter {
 
             this._initialRender = false;
         });
-    }, 4)
+    })
 
     /**
      * Re-render(not refresh) all the ads in the page and the first ad will update the correlator value.
@@ -388,7 +392,7 @@ export class AdManager extends EventEmitter {
      * @method renderAll
      * @static
      */
-    renderAll = debounce(() => {
+    renderAll = debounce(4, () => {
         if (!this.apiReady) {
             return false;
         }
@@ -403,7 +407,7 @@ export class AdManager extends EventEmitter {
         });
 
         return true;
-    }, 4)
+    })
 
     getGPTVersion() {
         if (!this.apiReady) {

test/createManager.spec.js

@@ -422,23 +422,45 @@ describe("createManager", () => {
 
         const foldCheck = sinon.stub(instance, "foldCheck");
         const foldCheck2 = sinon.stub(instance2, "foldCheck");
+        const getRenderWhenViewable = sinon.spy(instance, "getRenderWhenViewable");
+        const getRenderWhenViewable2 = sinon.spy(instance2, "getRenderWhenViewable");
+        const managerFoldCheck = sinon.spy(adManager, "_foldCheck");
+        const timer = sinon.spy(adManager, "_getTimer");
 
         adManager.addInstance(instance);
         adManager.addInstance(instance2);
 
+        const start = Date.now();
+        adManager._foldCheck();
+        adManager._foldCheck();
+        setTimeout(() => {
+            adManager._foldCheck();
+        }, 5);
+        setTimeout(() => {
+            adManager._foldCheck();
+        }, 10);
+        setTimeout(() => {
+            adManager._foldCheck();
+        }, 15);
+
         setTimeout(() => {
+            expect(managerFoldCheck.callCount).to.equal(5);
+            expect(timer.calledTwice).to.be.true;
+            expect(timer.returnValues[1] - timer.returnValues[0]).to.be.above(19); // timer above 20ms timeout
+            expect(timer.returnValues[0] - start).to.be.below(5); // should start ~immediately
             expect(foldCheck.calledTwice).to.be.true;
             expect(foldCheck2.notCalled).to.be.true;
+
             foldCheck.restore();
             foldCheck2.restore();
+            getRenderWhenViewable.restore();
+            getRenderWhenViewable2.restore();
+            managerFoldCheck.restore();
+            timer.restore()
             adManager.removeInstance(instance);
             adManager.removeInstance(instance2);
             done();
         }, 100);
-
-        adManager._foldCheck();
-        adManager._foldCheck();
-        adManager._foldCheck();
     });
 
     it("renders all ads", (done) => {