@@ -2,110 +2,103 @@ import Vue from 'vue';
2
2
import InfiniteLoading from '../../../src/components/InfiniteLoading' ;
3
3
4
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' ) ;
5
+ let vm ;
14
6
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
+ }
17
12
18
- it ( 'should render a fake list' , ( done ) => {
19
- const vm = new Vue ( {
13
+ vm = new Vue ( {
20
14
data : {
21
- list : [ 1 , 2 , 3 , 4 , 5 ] ,
15
+ list : [ ] ,
22
16
distance : 50 ,
17
+ isLoadedAll : false ,
18
+ isDivScroll : true ,
23
19
} ,
24
20
template : `
25
- <div style="overflow: auto; height: 500px;">
21
+ <div style="height: 100px;"
22
+ :style="{
23
+ overflow: isDivScroll ? 'auto' : 'visible'
24
+ }">
26
25
<ul>
27
26
<li v-for="item in list" v-text="item"></li>
28
27
</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>
30
31
</div>
31
32
` ,
32
33
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
+ } ) ;
46
36
} ) ;
47
37
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 ;
83
45
} ) ;
84
46
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 ) ;
105
81
done ( ) ;
106
82
} ) ;
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' ) ;
110
103
} ) ;
111
104
} ) ;
0 commit comments