Skip to content

Commit dd7267c

Browse files
PeachScriptPeachScript
committed
Add unit test for infinite loading component
1 parent 1fe8a17 commit dd7267c

File tree

5 files changed

+177
-1
lines changed

5 files changed

+177
-1
lines changed

‎karma.conf.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
var webpackConfig = require('./webpack.config');
2+
delete webpackConfig.entry;
3+
4+
// Add code coverage loader
5+
webpackConfig.vue = {
6+
loaders: {
7+
js: 'isparta'
8+
}
9+
}
10+
11+
// Karma configuration
12+
module.exports = function(config) {
13+
config.set({
14+
// frameworks to use
15+
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
16+
frameworks: ['mocha', 'chai'],
17+
// list of files / patterns to load in the browser
18+
files: [
19+
'./test/unit/index.js'
20+
],
21+
// preprocess matching files before serving them to the browser
22+
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
23+
preprocessors: {
24+
'./test/unit/index.js': 'webpack'
25+
},
26+
// start these browsers
27+
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
28+
browsers: ['PhantomJS'],
29+
// test results reporter to use
30+
// possible values: 'dots', 'progress'
31+
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
32+
reporters: ['spec', 'coverage'],
33+
coverageReporter: {
34+
dir: './test/unit/coverage',
35+
reporters: [
36+
{ type: 'lcov', subdir: '.' },
37+
{ type: 'text-summary' }
38+
]
39+
},
40+
webpack: webpackConfig,
41+
webpackMiddleware: {
42+
noInfo: true
43+
}
44+
});
45+
}

‎package.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"main": "dist/vue-infinite-loading.js",
66
"scripts": {
77
"dev": "webpack-dev-server --inline --hot --quiet --port=8000",
8-
"build": "rm -rf build/ && NODE_ENV=production webpack --progress --hide-modules"
8+
"build": "rm -rf build/ && NODE_ENV=production webpack --progress --hide-modules",
9+
"test": "karma start --single-run"
910
},
1011
"keywords": [
1112
"vue",
@@ -20,6 +21,7 @@
2021
"babel-plugin-transform-runtime": "^6.7.5",
2122
"babel-preset-es2015": "^6.6.0",
2223
"babel-runtime": "^6.0.0",
24+
"chai": "^3.5.0",
2325
"css-loader": "^0.23.1",
2426
"eslint": "^2.8.0",
2527
"eslint-config-airbnb-base": "^1.0.4",
@@ -28,8 +30,18 @@
2830
"eslint-plugin-import": "^1.6.1",
2931
"file-loader": "^0.8.5",
3032
"html-webpack-plugin": "^2.16.0",
33+
"isparta-loader": "^2.0.0",
34+
"karma": "^0.13.22",
35+
"karma-chai": "^0.1.0",
36+
"karma-coverage": "^1.0.0",
37+
"karma-mocha": "^1.0.1",
38+
"karma-phantomjs-launcher": "^1.0.0",
39+
"karma-spec-reporter": "0.0.26",
40+
"karma-webpack": "^1.7.0",
3141
"less": "^2.6.1",
3242
"less-loader": "^2.2.3",
43+
"mocha": "^2.4.5",
44+
"phantomjs-prebuilt": "^2.1.7",
3345
"style-loader": "^0.13.1",
3446
"url-loader": "^0.5.7",
3547
"vue": "^1.0.22",

‎test/unit/.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,8 @@
1212
"extensions": [".js", ".json", ".vue"]
1313
}
1414
}
15+
},
16+
"rules": {
17+
"no-unused-expressions": 0
1518
}
1619
}

‎test/unit/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const testsContext = require.context('./specs', true, /\.spec$/);
2+
testsContext.keys().forEach(testsContext);
3+
4+
const srcContext = require.context('../../src/', true, /^\.\/(?!main(\.js)?$)/);
5+
srcContext.keys().forEach(srcContext);

‎test/unit/specs/InfiniteLoading.spec.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import Vue from 'vue';
2+
import InfiniteLoading from '../../../src/components/InfiniteLoading';
3+
4+
describe('InfiniteLoading.vue', () => {
5+
it('should render loading icon', () => {
6+
const vm = new Vue({
7+
template: `
8+
<div>
9+
<infinite-loading></infinite-loading>
10+
</div>
11+
`,
12+
components: { InfiniteLoading },
13+
}).$mount().$appendTo('body');
14+
15+
expect(vm.$el.querySelector('.icon-loading')).to.be.ok;
16+
});
17+
18+
it('should render a fake list', (done) => {
19+
const vm = new Vue({
20+
data: {
21+
list: [1, 2, 3, 4, 5],
22+
distance: 50,
23+
},
24+
template: `
25+
<div style="overflow: auto; height: 500px;">
26+
<ul>
27+
<li v-for="item in list" v-text="item"></li>
28+
</ul>
29+
<infinite-loading :distance="distance" :on-infinite="onInfinite"></infinite-loading>
30+
</div>
31+
`,
32+
components: { InfiniteLoading },
33+
methods: {
34+
onInfinite() {
35+
for (let i = 6; i <= 10; i++) {
36+
this.list.push(i);
37+
}
38+
39+
Vue.nextTick(() => {
40+
expect(vm.$el.querySelectorAll('ul li')).to.have.lengthOf(10);
41+
done();
42+
});
43+
},
44+
},
45+
}).$mount().$appendTo('body');
46+
});
47+
48+
it('should stop loading animation', (done) => {
49+
const vm = new Vue({
50+
data: {
51+
list: [],
52+
},
53+
template: `
54+
<div style="overflow: auto; height: 500px;">
55+
<ul>
56+
<li v-for="item in list" v-text="item"></li>
57+
</ul>
58+
<infinite-loading :on-infinite="onInfinite"></infinite-loading>
59+
</div>
60+
`,
61+
components: { InfiniteLoading },
62+
methods: {
63+
onInfinite() {
64+
Vue.nextTick(() => {
65+
expect(vm.$el.querySelector('.icon-loading')
66+
.getAttribute('style')
67+
.indexOf('display: none') === -1)
68+
.to.be.true;
69+
70+
this.$broadcast('$InfiniteLoading:loaded');
71+
72+
Vue.nextTick(() => {
73+
expect(vm.$el.querySelector('.icon-loading')
74+
.getAttribute('style')
75+
.indexOf('display: none') >= -1)
76+
.to.be.true;
77+
done();
78+
});
79+
});
80+
},
81+
},
82+
}).$mount().$appendTo('body');
83+
});
84+
85+
it('should be destroyed', (done) => {
86+
const vm = new Vue({
87+
data: {
88+
list: [],
89+
isLoadedAll: false,
90+
},
91+
template: `
92+
<div style="overflow: auto; height: 500px;">
93+
<ul>
94+
<li v-for="item in list" v-text="item"></li>
95+
</ul>
96+
<infinite-loading :on-infinite="onInfinite" v-if="!isLoadedAll"></infinite-loading>
97+
</div>
98+
`,
99+
components: { InfiniteLoading },
100+
methods: {
101+
onInfinite() {
102+
this.isLoadedAll = true;
103+
Vue.nextTick(() => {
104+
expect(vm.$el.querySelector('.icon-loading')).to.not.be.ok;
105+
done();
106+
});
107+
},
108+
},
109+
}).$mount().$appendTo('body');
110+
});
111+
});

0 commit comments

Comments
 (0)