Add unit test for the debounce logics

Author: PeachScript

karma.conf.js

@@ -6,7 +6,7 @@ delete webpackConfig.entry;
 // Karma configuration
 module.exports = function(config) {
   config.set({
-    frameworks: ['mocha', 'chai'],
+    frameworks: ['mocha', 'sinon-chai'],
     files: [
       './test/unit/index.js'
     ],

package.json

@@ -42,7 +42,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-stage-2": "^6.24.1",
-    "chai": "^4.1.1",
+    "chai": "^3.5.0",
     "css-loader": "^0.28.4",
     "eslint": "^4.4.1",
     "eslint-config-airbnb-base": "^11.3.1",
@@ -57,13 +57,16 @@
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.4",
+    "karma-sinon-chai": "^1.3.1",
     "karma-spec-reporter": "0.0.31",
     "karma-webpack": "^2.0.4",
     "less": "^2.7.2",
     "less-loader": "^4.0.5",
     "mocha": "^3.5.0",
     "phantomjs-prebuilt": "^2.1.15",
     "pre-commit": "^1.2.2",
+    "sinon": "^2.4.1",
+    "sinon-chai": "^2.13.0",
     "style-loader": "^0.18.2",
     "uglifyjs-webpack-plugin": "^0.4.6",
     "vue": "^2.2.0",

test/unit/.eslintrc.yml

@@ -3,5 +3,6 @@
     mocha: true
   globals:
     expect: true
+    sinon: true
   rules:
     no-unused-expressions: 0

test/unit/specs/InfiniteLoading.spec.js

@@ -14,6 +14,23 @@ function isShow(elm) {
   return getComputedStyle(elm).display !== 'none';
 }
 
+/**
+ * continues call the specified number of times for a function
+ * @param  {Function} fn    target function
+ * @param  {Number}   times calls
+ * @param  {Function} cb    [description]
+ */
+function continuesCall(fn, times, cb) {
+  if (times) {
+    fn();
+    setTimeout(() => {
+      continuesCall(fn, times - 1, cb);
+    }, 1);
+  } else {
+    cb();
+  }
+}
+
 describe('vue-infinite-loading', () => {
   let vm; // save Vue model
   const basicConfig = {
@@ -193,7 +210,7 @@ describe('vue-infinite-loading', () => {
     vm.$mount('#app');
   });
 
-  it('should always load data until fill up the contianer\n      (use div as the container)', (done) => {
+  it('should always load data until fill up the container\n      (use div as the container)', (done) => {
     let timer;
 
     vm = new Vue(Object.assign({}, basicConfig, {
@@ -244,7 +261,7 @@ describe('vue-infinite-loading', () => {
     vm.$mount(wrapper);
   });
 
-  it('should not works when deactivated by the `keep-alive` feature\n      (use top direction)', (done) => {
+  it('should not works when deactivated by the `keep-alive` feature\n      (use top direction and use div as the container)', (done) => {
     let calledTimes = 0;
     const InfiniteView = Object.assign({}, basicConfig, {
       data() {
@@ -361,4 +378,31 @@ describe('vue-infinite-loading', () => {
 
     vm.$mount('#app');
   });
+
+  it('should debounce properly for the scroll event handler\n      (use div as the container)', (done) => {
+    vm = new Vue(Object.assign({}, basicConfig, {
+      data: {
+        list: [...new Array(20).join('1').split('')],
+        isDivScroll: true,
+        direction: 'bottom',
+      },
+      mounted: function mounted() {
+        const scrollParent = this.$refs.infiniteLoading.scrollParent;
+        const spyFn = sinon.spy(this.$refs.infiniteLoading, 'attemptLoad');
+        const alreadyCalledTimes = 1; // it will be called immediately after mount
+
+        continuesCall(() => {
+          scrollParent.scrollTop += 10;
+        }, 10, () => {
+          expect(spyFn).to.have.been.callCount(0 + alreadyCalledTimes);
+          setTimeout(() => {
+            expect(spyFn).to.have.been.callCount(1 + alreadyCalledTimes);
+            done();
+          }, this.$refs.infiniteLoading.debounceDuration + 10);
+        });
+      },
+    }));
+
+    vm.$mount('#app');
+  });
 });