@@ -2,96 +2,90 @@ import { mount } from '@vue/test-utils'
2
2
import { BCarouselSlide } from './carousel-slide'
3
3
4
4
describe ( 'carousel-slide' , ( ) => {
5
- it ( 'has root element "div" ' , async ( ) => {
5
+ it ( 'has expected default structure ' , async ( ) => {
6
6
const wrapper = mount ( BCarouselSlide )
7
- expect ( wrapper . element . tagName ) . toBe ( 'DIV' )
8
-
9
- wrapper . destroy ( )
10
- } )
11
7
12
- it ( 'has class carousel-item' , async ( ) => {
13
- const wrapper = mount ( BCarouselSlide )
14
- expect ( wrapper . classes ( ) ) . toContain ( 'carousel-item' )
8
+ expect ( wrapper . element . tagName ) . toBe ( 'DIV' )
15
9
expect ( wrapper . classes ( ) . length ) . toBe ( 1 )
16
-
17
- wrapper . destroy ( )
18
- } )
19
-
20
- it ( 'has role=listitem' , async ( ) => {
21
- const wrapper = mount ( BCarouselSlide )
10
+ expect ( wrapper . classes ( ) ) . toContain ( 'carousel-item' )
22
11
expect ( wrapper . attributes ( 'role' ) ) . toBeDefined ( )
23
12
expect ( wrapper . attributes ( 'role' ) ) . toBe ( 'listitem' )
24
13
25
14
wrapper . destroy ( )
26
15
} )
27
16
28
- it ( 'does not have child div. carousel-caption by default' , async ( ) => {
17
+ it ( 'does not have child " carousel-caption" by default' , async ( ) => {
29
18
const wrapper = mount ( BCarouselSlide )
19
+
30
20
expect ( wrapper . find ( '.carousel-caption' ) . exists ( ) ) . toBe ( false )
31
21
32
22
wrapper . destroy ( )
33
23
} )
34
24
35
- it ( 'does not have image by default' , async ( ) => {
25
+ it ( 'does not have "img" by default' , async ( ) => {
36
26
const wrapper = mount ( BCarouselSlide )
37
27
expect ( wrapper . find ( 'img' ) . exists ( ) ) . toBe ( false )
38
28
39
29
wrapper . destroy ( )
40
30
} )
41
31
42
- it ( 'does not have caption tag h3 by default' , async ( ) => {
32
+ it ( 'does not have caption tag "h3" by default' , async ( ) => {
43
33
const wrapper = mount ( BCarouselSlide )
44
34
expect ( wrapper . find ( 'h3' ) . exists ( ) ) . toBe ( false )
45
35
46
36
wrapper . destroy ( )
47
37
} )
48
38
49
- it ( 'does not have text tag p by default' , async ( ) => {
39
+ it ( 'does not have text tag "p" by default' , async ( ) => {
50
40
const wrapper = mount ( BCarouselSlide )
41
+
51
42
expect ( wrapper . find ( 'p' ) . exists ( ) ) . toBe ( false )
52
43
53
44
wrapper . destroy ( )
54
45
} )
55
46
56
- it ( 'renders default slot inside carousel-caption' , async ( ) => {
47
+ it ( 'renders default slot inside " carousel-caption" ' , async ( ) => {
57
48
const wrapper = mount ( BCarouselSlide , {
58
49
slots : {
59
50
default : 'foobar'
60
51
}
61
52
} )
53
+
62
54
expect ( wrapper . find ( '.carousel-caption' ) . exists ( ) ) . toBe ( true )
63
55
expect ( wrapper . find ( '.carousel-caption' ) . text ( ) ) . toContain ( 'foobar' )
64
56
65
57
wrapper . destroy ( )
66
58
} )
67
59
68
- it ( 'has caption tag h3 when prop caption is set' , async ( ) => {
60
+ it ( 'has caption tag "h3" when prop " caption" is set' , async ( ) => {
69
61
const wrapper = mount ( BCarouselSlide , {
70
62
propsData : {
71
63
caption : 'foobar'
72
64
}
73
65
} )
66
+
74
67
const content = wrapper . find ( '.carousel-caption' )
75
68
expect ( content . find ( 'h3' ) . exists ( ) ) . toBe ( true )
76
69
expect ( content . find ( 'h3' ) . text ( ) ) . toBe ( 'foobar' )
77
70
78
71
wrapper . destroy ( )
79
72
} )
80
73
81
- it ( 'has text tag p when prop text is set' , async ( ) => {
74
+ it ( 'has text tag "p" when prop " text" is set' , async ( ) => {
82
75
const wrapper = mount ( BCarouselSlide , {
83
76
propsData : {
84
77
text : 'foobar'
85
78
}
86
79
} )
80
+
87
81
const content = wrapper . find ( '.carousel-caption' )
88
82
expect ( content . find ( 'p' ) . exists ( ) ) . toBe ( true )
89
83
expect ( content . find ( 'p' ) . text ( ) ) . toBe ( 'foobar' )
90
84
91
85
wrapper . destroy ( )
92
86
} )
93
87
94
- it ( 'has custom content tag when prop contentTag is set' , async ( ) => {
88
+ it ( 'has custom content tag when prop "content-tag" is set' , async ( ) => {
95
89
const wrapper = mount ( BCarouselSlide , {
96
90
propsData : {
97
91
contentTag : 'span'
@@ -100,13 +94,14 @@ describe('carousel-slide', () => {
100
94
default : 'foobar'
101
95
}
102
96
} )
97
+
103
98
expect ( wrapper . find ( '.carousel-caption' ) . exists ( ) ) . toBe ( true )
104
99
expect ( wrapper . find ( '.carousel-caption' ) . element . tagName ) . toBe ( 'SPAN' )
105
100
106
101
wrapper . destroy ( )
107
102
} )
108
103
109
- it ( 'has display classes on . carousel-caption when prop contentVisibleUp is set' , async ( ) => {
104
+ it ( 'has display classes on " carousel-caption" when prop "content-visible-up" is set' , async ( ) => {
110
105
const wrapper = mount ( BCarouselSlide , {
111
106
propsData : {
112
107
contentVisibleUp : 'lg'
@@ -115,6 +110,7 @@ describe('carousel-slide', () => {
115
110
default : 'foobar'
116
111
}
117
112
} )
113
+
118
114
expect ( wrapper . find ( '.carousel-caption' ) . exists ( ) ) . toBe ( true )
119
115
expect ( wrapper . find ( '.carousel-caption' ) . classes ( ) ) . toContain ( 'd-none' )
120
116
expect ( wrapper . find ( '.carousel-caption' ) . classes ( ) ) . toContain ( 'd-lg-block' )
@@ -123,25 +119,21 @@ describe('carousel-slide', () => {
123
119
wrapper . destroy ( )
124
120
} )
125
121
126
- it ( 'does not have style background when prop background not set' , async ( ) => {
122
+ it ( 'does not have style " background" when prop " background" not set' , async ( ) => {
127
123
const wrapper = mount ( BCarouselSlide )
128
- if ( wrapper . attributes ( 'style' ) ) {
129
- // Vue always includes a style attr when passed an empty style object
130
- expect ( wrapper . attributes ( 'style' ) ) . not . toContain ( 'background:' )
131
- } else {
132
- // But just in case that changes in the future
133
- expect ( true ) . toBe ( true )
134
- }
124
+
125
+ expect ( wrapper . attributes ( 'style' ) ) . not . toBeDefined ( )
135
126
136
127
wrapper . destroy ( )
137
128
} )
138
129
139
- it ( 'has style background when prop background is set' , async ( ) => {
130
+ it ( 'has style " background" when prop " background" is set' , async ( ) => {
140
131
const wrapper = mount ( BCarouselSlide , {
141
132
propsData : {
142
133
background : 'rgb(1, 2, 3)'
143
134
}
144
135
} )
136
+
145
137
expect ( wrapper . attributes ( 'style' ) ) . toBeDefined ( )
146
138
expect ( wrapper . attributes ( 'style' ) ) . toContain ( 'background:' )
147
139
expect ( wrapper . attributes ( 'style' ) ) . toContain ( 'rgb(' )
@@ -157,74 +149,80 @@ describe('carousel-slide', () => {
157
149
}
158
150
}
159
151
} )
152
+
160
153
expect ( wrapper . attributes ( 'style' ) ) . toBeDefined ( )
161
154
expect ( wrapper . attributes ( 'style' ) ) . toContain ( 'background:' )
162
155
expect ( wrapper . attributes ( 'style' ) ) . toContain ( 'rgb(' )
163
156
164
157
wrapper . destroy ( )
165
158
} )
166
159
167
- it ( 'has custom caption tag when prop captionTag is set' , async ( ) => {
160
+ it ( 'has custom caption tag when prop "caption-tag" is set' , async ( ) => {
168
161
const wrapper = mount ( BCarouselSlide , {
169
162
propsData : {
170
163
captionTag : 'h1' ,
171
164
caption : 'foobar'
172
165
}
173
166
} )
167
+
174
168
const content = wrapper . find ( '.carousel-caption' )
175
169
expect ( content . find ( 'h1' ) . exists ( ) ) . toBe ( true )
176
170
expect ( content . find ( 'h1' ) . text ( ) ) . toBe ( 'foobar' )
177
171
178
172
wrapper . destroy ( )
179
173
} )
180
174
181
- it ( 'has custom text tag when prop textTag is set' , async ( ) => {
175
+ it ( 'has custom text tag when prop "text-tag is set' , async ( ) => {
182
176
const wrapper = mount ( BCarouselSlide , {
183
177
propsData : {
184
178
textTag : 'span' ,
185
179
text : 'foobar'
186
180
}
187
181
} )
182
+
188
183
const content = wrapper . find ( '.carousel-caption' )
189
184
expect ( content . find ( 'span' ) . exists ( ) ) . toBe ( true )
190
185
expect ( content . find ( 'span' ) . text ( ) ) . toBe ( 'foobar' )
191
186
192
187
wrapper . destroy ( )
193
188
} )
194
189
195
- it ( 'has image when prop img-src is set' , async ( ) => {
190
+ it ( 'has image when prop " img-src" is set' , async ( ) => {
196
191
const wrapper = mount ( BCarouselSlide , {
197
192
propsData : {
198
193
imgSrc : 'https://picsum.photos/1024/480/?image=52'
199
194
}
200
195
} )
196
+
201
197
expect ( wrapper . find ( 'img' ) . exists ( ) ) . toBe ( true )
202
198
expect ( wrapper . find ( 'img' ) . attributes ( 'src' ) ) . toBeDefined ( )
203
199
expect ( wrapper . find ( 'img' ) . attributes ( 'src' ) ) . toBe ( 'https://picsum.photos/1024/480/?image=52' )
204
200
205
201
wrapper . destroy ( )
206
202
} )
207
203
208
- it ( 'has image when prop img-blank is set' , async ( ) => {
204
+ it ( 'has image when prop " img-blank" is set' , async ( ) => {
209
205
const wrapper = mount ( BCarouselSlide , {
210
206
propsData : {
211
207
imgBlank : true
212
208
}
213
209
} )
210
+
214
211
expect ( wrapper . find ( 'img' ) . exists ( ) ) . toBe ( true )
215
212
expect ( wrapper . find ( 'img' ) . attributes ( 'src' ) ) . toBeDefined ( )
216
213
expect ( wrapper . find ( 'img' ) . attributes ( 'src' ) ) . toContain ( 'data:' )
217
214
218
215
wrapper . destroy ( )
219
216
} )
220
217
221
- it ( 'has image with alt attribute when prop img-alt is set' , async ( ) => {
218
+ it ( 'has image with " alt" attr when prop " img-alt" is set' , async ( ) => {
222
219
const wrapper = mount ( BCarouselSlide , {
223
220
propsData : {
224
221
imgSrc : 'https://picsum.photos/1024/480/?image=52' ,
225
222
imgAlt : 'foobar'
226
223
}
227
224
} )
225
+
228
226
expect ( wrapper . find ( 'img' ) . exists ( ) ) . toBe ( true )
229
227
expect ( wrapper . find ( 'img' ) . attributes ( 'src' ) ) . toBeDefined ( )
230
228
expect ( wrapper . find ( 'img' ) . attributes ( 'alt' ) ) . toBeDefined ( )
@@ -233,14 +231,15 @@ describe('carousel-slide', () => {
233
231
wrapper . destroy ( )
234
232
} )
235
233
236
- it ( 'has image with width and height attrs when props img-width and img-height are set' , async ( ) => {
234
+ it ( 'has image with " width" and " height" attrs when props " img-width" and " img-height" are set' , async ( ) => {
237
235
const wrapper = mount ( BCarouselSlide , {
238
236
propsData : {
239
237
imgSrc : 'https://picsum.photos/1024/480/?image=52' ,
240
238
imgWidth : '1024' ,
241
239
imgHeight : '480'
242
240
}
243
241
} )
242
+
244
243
expect ( wrapper . find ( 'img' ) . exists ( ) ) . toBe ( true )
245
244
expect ( wrapper . find ( 'img' ) . attributes ( 'src' ) ) . toBeDefined ( )
246
245
expect ( wrapper . find ( 'img' ) . attributes ( 'width' ) ) . toBeDefined ( )
@@ -251,7 +250,7 @@ describe('carousel-slide', () => {
251
250
wrapper . destroy ( )
252
251
} )
253
252
254
- it ( 'has image with width and height attrs inherited from carousel parent' , async ( ) => {
253
+ it ( 'has image with " width" and " height" attrs inherited from carousel parent' , async ( ) => {
255
254
const wrapper = mount ( BCarouselSlide , {
256
255
provide : {
257
256
// Mock carousel injection
@@ -264,6 +263,7 @@ describe('carousel-slide', () => {
264
263
imgSrc : 'https://picsum.photos/1024/480/?image=52'
265
264
}
266
265
} )
266
+
267
267
expect ( wrapper . find ( 'img' ) . exists ( ) ) . toBe ( true )
268
268
expect ( wrapper . find ( 'img' ) . attributes ( 'src' ) ) . toBeDefined ( )
269
269
expect ( wrapper . find ( 'img' ) . attributes ( 'width' ) ) . toBeDefined ( )
0 commit comments