Add unit test for infinite loading component

Author: PeachScript

karma.conf.js

@@ -0,0 +1,45 @@
+var webpackConfig = require('./webpack.config');
+delete webpackConfig.entry;
+
+// Add code coverage loader
+webpackConfig.vue = {
+  loaders: {
+    js: 'isparta'
+  }
+}
+
+// Karma configuration
+module.exports = function(config) {
+  config.set({
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['mocha', 'chai'],
+    // list of files / patterns to load in the browser
+    files: [
+      './test/unit/index.js'
+    ],
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      './test/unit/index.js': 'webpack'
+    },
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['PhantomJS'],
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['spec', 'coverage'],
+    coverageReporter: {
+      dir: './test/unit/coverage',
+      reporters: [
+        { type: 'lcov', subdir: '.' },
+        { type: 'text-summary' }
+      ]
+    },
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true
+    }
+  });
+}

package.json

@@ -5,7 +5,8 @@
   "main": "dist/vue-infinite-loading.js",
   "scripts": {
     "dev": "webpack-dev-server --inline --hot --quiet --port=8000",
-    "build": "rm -rf build/ && NODE_ENV=production webpack --progress --hide-modules"
+    "build": "rm -rf build/ && NODE_ENV=production webpack --progress --hide-modules",
+    "test": "karma start --single-run"
   },
   "keywords": [
     "vue",
@@ -20,6 +21,7 @@
     "babel-plugin-transform-runtime": "^6.7.5",
     "babel-preset-es2015": "^6.6.0",
     "babel-runtime": "^6.0.0",
+    "chai": "^3.5.0",
     "css-loader": "^0.23.1",
     "eslint": "^2.8.0",
     "eslint-config-airbnb-base": "^1.0.4",
@@ -28,8 +30,18 @@
     "eslint-plugin-import": "^1.6.1",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^2.16.0",
+    "isparta-loader": "^2.0.0",
+    "karma": "^0.13.22",
+    "karma-chai": "^0.1.0",
+    "karma-coverage": "^1.0.0",
+    "karma-mocha": "^1.0.1",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^1.7.0",
     "less": "^2.6.1",
     "less-loader": "^2.2.3",
+    "mocha": "^2.4.5",
+    "phantomjs-prebuilt": "^2.1.7",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "vue": "^1.0.22",

test/unit/.eslintrc.json

@@ -12,5 +12,8 @@
         "extensions": [".js", ".json", ".vue"]
       }
     }
+  },
+  "rules": {
+    "no-unused-expressions": 0
   }
 }

test/unit/index.js

@@ -0,0 +1,5 @@
+const testsContext = require.context('./specs', true, /\.spec$/);
+testsContext.keys().forEach(testsContext);
+
+const srcContext = require.context('../../src/', true, /^\.\/(?!main(\.js)?$)/);
+srcContext.keys().forEach(srcContext);

test/unit/specs/InfiniteLoading.spec.js

@@ -0,0 +1,111 @@
+import Vue from 'vue';
+import InfiniteLoading from '../../../src/components/InfiniteLoading';
+
+describe('InfiniteLoading.vue', () => {
+  it('should render loading icon', () => {
+    const vm = new Vue({
+      template: `
+        <div>
+          <infinite-loading></infinite-loading>
+        </div>
+      `,
+      components: { InfiniteLoading },
+    }).$mount().$appendTo('body');
+
+    expect(vm.$el.querySelector('.icon-loading')).to.be.ok;
+  });
+
+  it('should render a fake list', (done) => {
+    const vm = new Vue({
+      data: {
+        list: [1, 2, 3, 4, 5],
+        distance: 50,
+      },
+      template: `
+        <div style="overflow: auto; height: 500px;">
+          <ul>
+            <li v-for="item in list" v-text="item"></li>
+          </ul>
+          <infinite-loading :distance="distance" :on-infinite="onInfinite"></infinite-loading>
+        </div>
+      `,
+      components: { InfiniteLoading },
+      methods: {
+        onInfinite() {
+          for (let i = 6; i <= 10; i++) {
+            this.list.push(i);
+          }
+
+          Vue.nextTick(() => {
+            expect(vm.$el.querySelectorAll('ul li')).to.have.lengthOf(10);
+            done();
+          });
+        },
+      },
+    }).$mount().$appendTo('body');
+  });
+
+  it('should stop loading animation', (done) => {
+    const vm = new Vue({
+      data: {
+        list: [],
+      },
+      template: `
+        <div style="overflow: auto; height: 500px;">
+          <ul>
+            <li v-for="item in list" v-text="item"></li>
+          </ul>
+          <infinite-loading :on-infinite="onInfinite"></infinite-loading>
+        </div>
+      `,
+      components: { InfiniteLoading },
+      methods: {
+        onInfinite() {
+          Vue.nextTick(() => {
+            expect(vm.$el.querySelector('.icon-loading')
+                         .getAttribute('style')
+                         .indexOf('display: none') === -1)
+                  .to.be.true;
+
+            this.$broadcast('$InfiniteLoading:loaded');
+
+            Vue.nextTick(() => {
+              expect(vm.$el.querySelector('.icon-loading')
+                           .getAttribute('style')
+                           .indexOf('display: none') >= -1)
+                    .to.be.true;
+              done();
+            });
+          });
+        },
+      },
+    }).$mount().$appendTo('body');
+  });
+
+  it('should be destroyed', (done) => {
+    const vm = new Vue({
+      data: {
+        list: [],
+        isLoadedAll: false,
+      },
+      template: `
+        <div style="overflow: auto; height: 500px;">
+          <ul>
+            <li v-for="item in list" v-text="item"></li>
+          </ul>
+          <infinite-loading :on-infinite="onInfinite" v-if="!isLoadedAll"></infinite-loading>
+        </div>
+      `,
+      components: { InfiniteLoading },
+      methods: {
+        onInfinite() {
+          this.isLoadedAll = true;
+          Vue.nextTick(() => {
+            expect(vm.$el.querySelector('.icon-loading')).to.not.be.ok;
+            done();
+          });
+        },
+      },
+    }).$mount().$appendTo('body');
+  });
+});