Skip to content

Commit cd238cb

Browse files
committed
Improve unit test
1 parent 8f7e4ee commit cd238cb

File tree

1 file changed

+80
-87
lines changed

1 file changed

+80
-87
lines changed

test/unit/specs/InfiniteLoading.spec.js

Lines changed: 80 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -2,110 +2,103 @@ import Vue from 'vue';
22
import InfiniteLoading from '../../../src/components/InfiniteLoading';
33

44
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');
5+
let vm;
146

15-
expect(vm.$el.querySelector('.icon-loading')).to.be.ok;
16-
});
7+
// create new Vue instance for every test case
8+
beforeEach(() => {
9+
if (vm) {
10+
vm.$destroy();
11+
}
1712

18-
it('should render a fake list', (done) => {
19-
const vm = new Vue({
13+
vm = new Vue({
2014
data: {
21-
list: [1, 2, 3, 4, 5],
15+
list: [],
2216
distance: 50,
17+
isLoadedAll: false,
18+
isDivScroll: true,
2319
},
2420
template: `
25-
<div style="overflow: auto; height: 500px;">
21+
<div style="height: 100px;"
22+
:style="{
23+
overflow: isDivScroll ? 'auto' : 'visible'
24+
}">
2625
<ul>
2726
<li v-for="item in list" v-text="item"></li>
2827
</ul>
29-
<infinite-loading :distance="distance" :on-infinite="onInfinite"></infinite-loading>
28+
<infinite-loading :distance="distance"
29+
:on-infinite="onInfinite"
30+
v-if="!isLoadedAll"></infinite-loading>
3031
</div>
3132
`,
3233
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');
34+
methods: {},
35+
});
4636
});
4737

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');
38+
it('should render correct template', () => {
39+
vm.isDivScroll = false;
40+
vm.distance = undefined;
41+
42+
vm.$mount().$appendTo('body');
43+
44+
expect(vm.$el.querySelector('.icon-loading')).to.be.ok;
8345
});
8446

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;
47+
it('should appear a loading animation', (done) => {
48+
vm.onInfinite = function test() {
49+
Vue.nextTick(() => {
50+
expect(vm.$el.querySelector('.icon-loading')
51+
.getAttribute('style')
52+
.indexOf('display: none') === -1)
53+
.to.be.true;
54+
55+
this.$broadcast('$InfiniteLoading:loaded');
56+
57+
Vue.nextTick(() => {
58+
expect(vm.$el.querySelector('.icon-loading')
59+
.getAttribute('style')
60+
.indexOf('display: none') >= -1)
61+
.to.be.true;
62+
done();
63+
});
64+
});
65+
}.bind(vm);
66+
67+
vm.$mount().$appendTo('body');
68+
});
69+
70+
it('should only load once', (done) => {
71+
vm.onInfinite = function test() {
72+
const length = this.list.length + 1;
73+
for (let i = length; i < length + 20; i++) {
74+
this.list.push(i);
75+
}
76+
77+
Vue.nextTick(() => {
78+
if (this.list.length === 20) {
79+
vm.$el.addEventListener('scroll', () => {
80+
expect(this.list).to.have.lengthOf(20);
10581
done();
10682
});
107-
},
108-
},
109-
}).$mount().$appendTo('body');
83+
84+
// trigger scroll event
85+
vm.$el.scrollTop = vm.$el.scrollHeight;
86+
}
87+
});
88+
}.bind(vm);
89+
90+
vm.$mount().$appendTo('body');
91+
});
92+
93+
it('should be destroyed completely', (done) => {
94+
vm.onInfinite = function test() {
95+
this.isLoadedAll = true;
96+
Vue.nextTick(() => {
97+
expect(vm.$el.querySelector('.icon-loading')).to.not.be.ok;
98+
done();
99+
});
100+
}.bind(vm);
101+
102+
vm.$mount().$appendTo('body');
110103
});
111104
});

0 commit comments

Comments
 (0)