Skip to content

Commit 32e436b

Browse files
furybeanfurybean
committed
Merge pull request #7 from QingWei-Li/feature/unittest
Add unit test
2 parents b15f4f3 + 127febd commit 32e436b

File tree

4 files changed

+298
-3
lines changed

4 files changed

+298
-3
lines changed

‎karma.conf.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
// Karma configuration
2+
// Generated on Tue Mar 08 2016 13:37:35 GMT+0800 (CST)
3+
4+
module.exports = function(config) {
5+
config.set({
6+
7+
// base path that will be used to resolve all patterns (eg. files, exclude)
8+
basePath: '',
9+
10+
11+
// frameworks to use
12+
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
13+
frameworks: ['jasmine'],
14+
15+
16+
// list of files / patterns to load in the browser
17+
files: [
18+
'test/**/*.js'
19+
],
20+
21+
22+
// list of files to exclude
23+
exclude: [
24+
],
25+
26+
27+
// preprocess matching files before serving them to the browser
28+
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
29+
preprocessors: {
30+
'test/**/*.js': ['rollup']
31+
},
32+
33+
rollupPreprocessor: {
34+
rollup: {
35+
plugins: [
36+
require('rollup-plugin-babel')({
37+
exclude: 'node_modules/**',
38+
presets: [
39+
require('babel-preset-es2015-rollup')
40+
]
41+
}),
42+
require('rollup-plugin-node-resolve')({
43+
jsnext: true,
44+
main: true
45+
}),
46+
require('rollup-plugin-commonjs')(),
47+
require('rollup-plugin-env')({})
48+
]
49+
},
50+
bundle: {
51+
sourceMap: 'inline'
52+
}
53+
},
54+
55+
56+
// test results reporter to use
57+
// possible values: 'dots', 'progress'
58+
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
59+
reporters: ['progress'],
60+
61+
62+
// web server port
63+
port: 9876,
64+
65+
66+
// enable / disable colors in the output (reporters and logs)
67+
colors: true,
68+
69+
70+
// level of logging
71+
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
72+
logLevel: config.LOG_INFO,
73+
74+
75+
// enable / disable watching file and executing tests whenever any file changes
76+
autoWatch: true,
77+
78+
79+
// start these browsers
80+
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
81+
browsers: ['PhantomJS_custom'],
82+
83+
// you can define custom flags
84+
customLaunchers: {
85+
'PhantomJS_custom': {
86+
base: 'PhantomJS',
87+
options: {
88+
viewportSize: { width: 480, height: 800 }
89+
}
90+
}
91+
},
92+
93+
94+
phantomjsLauncher: {
95+
// Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
96+
exitOnResourceError: true
97+
},
98+
99+
100+
// Continuous Integration mode
101+
// if true, Karma captures browsers, runs the tests and exits
102+
singleRun: true,
103+
104+
// Concurrency level
105+
// how many browser should be started simultaneous
106+
concurrency: Infinity
107+
})
108+
}

‎package.json‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"main": "vue-infinite-scroll.js",
66
"jsnext:main": "./src/index.js",
77
"scripts": {
8-
"test": "npm run build && xo src/**/*",
8+
"test": "npm run build && xo src/**/* && karma start",
99
"build": "rollup -c",
1010
"prepublish": "npm run build"
1111
},
@@ -24,12 +24,24 @@
2424
},
2525
"devDependencies": {
2626
"babel-preset-es2015-rollup": "^1.1.1",
27+
"jasmine-core": "^2.4.1",
28+
"karma": "^0.13.21",
29+
"karma-chrome-launcher": "^0.2.2",
30+
"karma-jasmine": "^0.3.7",
31+
"karma-phantomjs-launcher": "^1.0.0",
32+
"karma-rollup-preprocessor": "^2.0.1",
33+
"phantomjs-prebuilt": "^2.1.5",
2734
"rollup": "^0.25.4",
2835
"rollup-plugin-babel": "^2.4.0",
36+
"rollup-plugin-commonjs": "^2.2.1",
37+
"rollup-plugin-env": "^0.21.2",
38+
"rollup-plugin-node-resolve": "^1.5.0",
2939
"xo": "^0.12.1"
3040
},
3141
"xo": {
32-
"envs": ["browser"],
42+
"envs": [
43+
"browser"
44+
],
3345
"space": true
3446
}
3547
}

‎src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ function install(Vue) {
1010
Vue.directive('infiniteScroll', infiniteScroll);
1111
}
1212

13-
export { install, infiniteScroll };
13+
export {install, infiniteScroll};

‎test/unit/vue-infinite-scroll.test.js‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import infiniteScroll from './../../vue-infinite-scroll';
2+
import Vue from 'vue';
3+
4+
const scrollToBottom = (targetElement, distance = 0) => {
5+
if (targetElement === 'parentNode') {
6+
const element = document.querySelector('.app');
7+
8+
element.scrollTop = element.getBoundingClientRect().top + element.getBoundingClientRect().bottom - distance;
9+
} else {
10+
const element = document.querySelector('.app');
11+
12+
element.scrollTop = element.scrollHeight - element.offsetHeight - distance;
13+
}
14+
};
15+
const scrollToTop = (targetElement) => {
16+
document.querySelector('.app').scrollTop = 0;
17+
};
18+
const createVM = (targetElement = 'window', distance = 0, immediate = true) => {
19+
let template;
20+
switch(targetElement) {
21+
case 'window':
22+
template = `<div class="app"
23+
style="height: 1200px; width: 400px; background-color: #000"
24+
v-infinite-scroll="loadMore()"
25+
infinite-scroll-disabled="busy"
26+
infinite-scroll-distance="${distance}"
27+
infinite-scroll-immediate-check="${immediate}"
28+
infinite-scroll-listen-for-event="docheck">
29+
</div>`;
30+
break;
31+
case 'parentNode':
32+
template = `<div class="app"
33+
style="height: 600px; width: 400px; overflow: auto; background-color: #eee;">
34+
<div style="height: 1200px; width: 400px;"
35+
v-infinite-scroll="loadMore()"
36+
infinite-scroll-disabled="busy"
37+
infinite-scroll-distance="${distance}"
38+
infinite-scroll-immediate-check="${immediate}"
39+
infinite-scroll-listen-for-event="docheck">
40+
</div>
41+
</div>`;
42+
break;
43+
case 'currentNode':
44+
default:
45+
template = `<div class="app"
46+
style="height: 600px; width: 400px; background-color: #ccc; overflow: auto;"
47+
v-infinite-scroll="loadMore()"
48+
infinite-scroll-disabled="busy"
49+
infinite-scroll-distance="${distance}"
50+
infinite-scroll-immediate-check="${immediate}"
51+
infinite-scroll-listen-for-event="docheck">
52+
<div style="height: 1000px">1</div>
53+
</div>`;
54+
break;
55+
}
56+
57+
return new Vue({
58+
el() {
59+
const element = document.createElement('div');
60+
61+
document.querySelector('body').appendChild(element);
62+
return element;
63+
},
64+
data() {
65+
return {
66+
busy: false
67+
};
68+
},
69+
template,
70+
methods: {
71+
loadMore() {
72+
this.busy = true;
73+
console.log('loaded!');
74+
}
75+
},
76+
events: {
77+
['docheck']() {
78+
console.log('tick');
79+
}
80+
}
81+
})
82+
}
83+
84+
describe('init infinite-scroll directive', () => {
85+
beforeAll(done => {
86+
Vue.use(infiniteScroll);
87+
done();
88+
});
89+
90+
it('directive installed', done => {
91+
expect(infiniteScroll.installed).toBe(true);
92+
done();
93+
});
94+
});
95+
96+
const scrollTargetElements = ['parentNode', 'currentNode'];
97+
98+
scrollTargetElements.forEach(targetElement => {
99+
describe(`${targetElement} scroll test`, () => {
100+
let vm;
101+
102+
beforeEach(done =>{
103+
vm = createVM(targetElement);
104+
105+
vm.$nextTick(() => {
106+
spyOn(vm, 'loadMore');
107+
108+
scrollToBottom(targetElement);
109+
scrollToTop(targetElement);
110+
scrollToBottom(targetElement);
111+
112+
setTimeout(done);
113+
});
114+
});
115+
116+
it('the function should be called once', done => {
117+
expect(vm.loadMore.calls.count()).toEqual(1);
118+
done();
119+
});
120+
121+
it('test "infinite-scroll-listen-for-event"', done => {
122+
vm.$emit('docheck');
123+
expect(vm.loadMore.calls.count()).toEqual(2);
124+
done();
125+
});
126+
127+
afterEach(done => {
128+
vm.$destroy(true);
129+
done();
130+
});
131+
});
132+
133+
describe(`${targetElement} scroll distance test`, () => {
134+
let vm;
135+
136+
beforeEach(done => {
137+
vm = createVM(targetElement, 50);
138+
139+
vm.$nextTick(() => {
140+
spyOn(vm, 'loadMore');
141+
setTimeout(done);
142+
});
143+
});
144+
145+
it('the function should be called when scroll to bottom', done => {
146+
scrollToBottom(targetElement, 0);
147+
148+
setTimeout(() => {
149+
expect(vm.loadMore).toHaveBeenCalled();
150+
done();
151+
});
152+
});
153+
154+
it('the function should be called when scroll to the bottom of 50px distance', done => {
155+
scrollToBottom(targetElement, 50);
156+
setTimeout(() => {
157+
expect(vm.loadMore).toHaveBeenCalled();
158+
done();
159+
});
160+
});
161+
162+
it('the function should not be called', done => {
163+
scrollToBottom(targetElement, 51);
164+
setTimeout(() => {
165+
expect(vm.loadMore).not.toHaveBeenCalled();
166+
done();
167+
});
168+
});
169+
170+
afterEach(done => {
171+
vm.$destroy(true);
172+
done();
173+
});
174+
});
175+
});

0 commit comments

Comments
 (0)