@@ -61,7 +61,6 @@ test('loads and displays CCarousel component', async () => {
61
61
} )
62
62
63
63
test ( 'CCarousel click on indicator' , async ( ) => {
64
- jest . useFakeTimers ( )
65
64
const { container } = render (
66
65
< CCarousel controls indicators >
67
66
< CCarouselItem >
@@ -78,96 +77,30 @@ test('CCarousel click on indicator', async () => {
78
77
</ CCarouselItem >
79
78
</ CCarousel > ,
80
79
)
81
- let item1 = getByText ( container , 'Item-1' )
80
+ const item1 = getByText ( container , 'Item-1' )
81
+ const item2 = getByText ( container , 'Item-2' )
82
+
82
83
expect ( item1 ) . toHaveClass ( 'active' )
83
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-start' )
84
84
expect ( item1 ) . toHaveClass ( 'carousel-item' )
85
- let item2 = getByText ( container , 'Item-2' )
86
85
expect ( item2 ) . not . toHaveClass ( 'active' )
87
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-next' )
88
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-start' )
89
86
expect ( item2 ) . toHaveClass ( 'carousel-item' )
90
- //click
87
+
88
+ // click
91
89
const ci = document . querySelector ( '.carousel-indicators' )
92
- let li = null
93
- if ( ci !== null ) {
94
- li = ci . children [ 1 ]
95
- if ( li !== null ) {
96
- fireEvent . click ( li )
97
- }
98
- }
99
- //endclick
100
- item1 = getByText ( container , 'Item-1' )
101
- expect ( item1 ) . toHaveClass ( 'active' )
102
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-next' )
103
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-prev' )
104
- expect ( item1 ) . toHaveClass ( 'carousel-item-start' )
105
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-end' )
106
- expect ( item1 ) . toHaveClass ( 'carousel-item' )
107
- item2 = getByText ( container , 'Item-2' )
108
- expect ( item2 ) . not . toHaveClass ( 'active' )
109
- expect ( item2 ) . toHaveClass ( 'carousel-item-next' )
110
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-prev' )
111
- expect ( item2 ) . toHaveClass ( 'carousel-item-start' )
112
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-end' )
113
- expect ( item2 ) . toHaveClass ( 'carousel-item' )
114
- //run timers
115
- jest . runAllTimers ( )
116
- item1 = getByText ( container , 'Item-1' )
90
+ ci && fireEvent . click ( ci . children [ 1 ] )
91
+ fireEvent . transitionEnd ( item1 )
92
+ fireEvent . transitionEnd ( item2 )
93
+
117
94
expect ( item1 ) . not . toHaveClass ( 'active' )
118
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-next' )
119
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-prev' )
120
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-start' )
121
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-end' )
122
- expect ( item1 ) . toHaveClass ( 'carousel-item' )
123
- expect ( container ) . toMatchSnapshot ( )
124
- item2 = getByText ( container , 'Item-2' )
125
- expect ( item2 ) . toHaveClass ( 'active' )
126
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-next' )
127
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-prev' )
128
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-start' )
129
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-end' )
130
- expect ( item2 ) . toHaveClass ( 'carousel-item' )
131
- //goback-click
132
- if ( ci !== null ) {
133
- li = ci . children [ 0 ]
134
- if ( li !== null ) {
135
- fireEvent . click ( li )
136
- }
137
- }
138
- //endclick
139
- item2 = getByText ( container , 'Item-2' )
140
95
expect ( item2 ) . toHaveClass ( 'active' )
141
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-next' )
142
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-prev' )
143
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-start' )
144
- expect ( item2 ) . toHaveClass ( 'carousel-item-end' )
145
- expect ( item2 ) . toHaveClass ( 'carousel-item' )
146
- item1 = getByText ( container , 'Item-1' )
147
- expect ( item1 ) . not . toHaveClass ( 'active' )
148
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-next' )
149
- expect ( item1 ) . toHaveClass ( 'carousel-item-prev' )
150
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-start' )
151
- expect ( item1 ) . toHaveClass ( 'carousel-item-end' )
152
- expect ( item1 ) . toHaveClass ( 'carousel-item' )
153
- //run timers
154
- jest . runAllTimers ( )
155
- item2 = getByText ( container , 'Item-2' )
156
- expect ( item2 ) . not . toHaveClass ( 'active' )
157
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-next' )
158
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-prev' )
159
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-start' )
160
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-end' )
161
- expect ( item2 ) . toHaveClass ( 'carousel-item' )
162
- expect ( container ) . toMatchSnapshot ( )
163
- item1 = getByText ( container , 'Item-1' )
96
+
97
+ // goback-click
98
+ ci && fireEvent . click ( ci . children [ 0 ] )
99
+ fireEvent . transitionEnd ( item1 )
100
+ fireEvent . transitionEnd ( item2 )
101
+
164
102
expect ( item1 ) . toHaveClass ( 'active' )
165
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-next' )
166
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-prev' )
167
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-start' )
168
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-end' )
169
- expect ( item1 ) . toHaveClass ( 'carousel-item' )
170
- jest . useRealTimers ( )
103
+ expect ( item2 ) . not . toHaveClass ( 'active' )
171
104
} )
172
105
173
106
test ( 'CCarousel click on button' , async ( ) => {
@@ -188,88 +121,29 @@ test('CCarousel click on button', async () => {
188
121
</ CCarouselItem >
189
122
</ CCarousel > ,
190
123
)
191
- let item1 = getByText ( container , 'Item-1' )
124
+ const item1 = getByText ( container , 'Item-1' )
125
+ const item2 = getByText ( container , 'Item-2' )
126
+
192
127
expect ( item1 ) . toHaveClass ( 'active' )
193
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-start' )
194
128
expect ( item1 ) . toHaveClass ( 'carousel-item' )
195
- let item2 = getByText ( container , 'Item-2' )
196
129
expect ( item2 ) . not . toHaveClass ( 'active' )
197
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-next' )
198
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-start' )
199
130
expect ( item2 ) . toHaveClass ( 'carousel-item' )
200
- //click
131
+
132
+ // click
201
133
const buttonNext = document . querySelector ( '.carousel-control-next' )
202
- if ( buttonNext !== null ) {
203
- fireEvent . click ( buttonNext )
204
- }
205
- //endclick
206
- item1 = getByText ( container , 'Item-1' )
207
- expect ( item1 ) . toHaveClass ( 'active' )
208
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-next' )
209
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-prev' )
210
- expect ( item1 ) . toHaveClass ( 'carousel-item-start' )
211
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-end' )
212
- expect ( item1 ) . toHaveClass ( 'carousel-item' )
213
- item2 = getByText ( container , 'Item-2' )
214
- expect ( item2 ) . not . toHaveClass ( 'active' )
215
- expect ( item2 ) . toHaveClass ( 'carousel-item-next' )
216
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-prev' )
217
- expect ( item2 ) . toHaveClass ( 'carousel-item-start' )
218
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-end' )
219
- expect ( item2 ) . toHaveClass ( 'carousel-item' )
220
- //run timers
221
- jest . runAllTimers ( )
222
- item1 = getByText ( container , 'Item-1' )
134
+ buttonNext && fireEvent . click ( buttonNext )
135
+ fireEvent . transitionEnd ( item1 )
136
+ fireEvent . transitionEnd ( item2 )
137
+
223
138
expect ( item1 ) . not . toHaveClass ( 'active' )
224
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-next' )
225
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-prev' )
226
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-start' )
227
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-end' )
228
- expect ( item1 ) . toHaveClass ( 'carousel-item' )
229
- expect ( container ) . toMatchSnapshot ( )
230
- item2 = getByText ( container , 'Item-2' )
231
139
expect ( item2 ) . toHaveClass ( 'active' )
232
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-next' )
233
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-prev' )
234
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-start' )
235
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-end' )
236
- expect ( item2 ) . toHaveClass ( 'carousel-item' )
237
- //goback-click
140
+
141
+ // goback-click
238
142
const buttonPrev = document . querySelector ( '.carousel-control-prev' )
239
- if ( buttonPrev !== null ) {
240
- fireEvent . click ( buttonPrev )
241
- }
242
- //endclick
243
- item2 = getByText ( container , 'Item-2 ')
143
+ buttonPrev && fireEvent . click ( buttonPrev )
144
+ fireEvent . transitionEnd ( item1 )
145
+ fireEvent . transitionEnd ( item2 )
146
+
147
+ expect ( item1 ) . toHaveClass ( 'active ')
244
148
expect ( item2 ) . not . toHaveClass ( 'active' )
245
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-next' )
246
- expect ( item2 ) . toHaveClass ( 'carousel-item-prev' )
247
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-start' )
248
- expect ( item2 ) . toHaveClass ( 'carousel-item-end' )
249
- expect ( item2 ) . toHaveClass ( 'carousel-item' )
250
- item1 = getByText ( container , 'Item-1' )
251
- expect ( item1 ) . not . toHaveClass ( 'active' )
252
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-next' )
253
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-prev' )
254
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-start' )
255
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-end' )
256
- expect ( item1 ) . toHaveClass ( 'carousel-item' )
257
- //run timers
258
- jest . runAllTimers ( )
259
- item2 = getByText ( container , 'Item-2' )
260
- expect ( item2 ) . toHaveClass ( 'active' )
261
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-next' )
262
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-prev' )
263
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-start' )
264
- expect ( item2 ) . not . toHaveClass ( 'carousel-item-end' )
265
- expect ( item2 ) . toHaveClass ( 'carousel-item' )
266
- expect ( container ) . toMatchSnapshot ( )
267
- item1 = getByText ( container , 'Item-1' )
268
- expect ( item1 ) . not . toHaveClass ( 'active' )
269
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-next' )
270
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-prev' )
271
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-start' )
272
- expect ( item1 ) . not . toHaveClass ( 'carousel-item-end' )
273
- expect ( item1 ) . toHaveClass ( 'carousel-item' )
274
- jest . useRealTimers ( )
275
149
} )
0 commit comments