@@ -12,32 +12,25 @@ import expect from 'expect';
12
12
import ReactDOM from 'react-dom' ;
13
13
import Modal from '../lib/components/Modal' ;
14
14
import * as ariaAppHider from '../lib/helpers/ariaAppHider' ;
15
- import { renderModal , unmountModal } from './helper' ;
15
+ import { renderModal , unmountModal , emptyDOM } from './helper' ;
16
16
17
17
const Simulate = TestUtils . Simulate ;
18
18
19
19
20
20
describe ( 'Modal' , ( ) => {
21
- afterEach ( 'check if test cleaned up rendered modals' , ( ) => {
22
- const overlay = document . querySelectorAll ( '.ReactModal__Overlay' ) ;
23
- const content = document . querySelectorAll ( '.ReactModal__Content' ) ;
24
- expect ( overlay . length ) . toBe ( 0 ) ;
25
- expect ( content . length ) . toBe ( 0 ) ;
26
- } ) ;
21
+ afterEach ( 'check if test cleaned up rendered modals' , emptyDOM ) ;
27
22
28
23
it ( 'scopes tab navigation to the modal' ) ;
29
24
it ( 'focuses the last focused element when tabbing in from browser chrome' ) ;
30
25
31
26
it ( 'can be open initially' , ( ) => {
32
27
const component = renderModal ( { isOpen : true } , 'hello' ) ;
33
28
expect ( component . portal . content . innerHTML . trim ( ) ) . toEqual ( 'hello' ) ;
34
- unmountModal ( ) ;
35
29
} ) ;
36
30
37
31
it ( 'can be closed initially' , ( ) => {
38
32
const component = renderModal ( { } , 'hello' ) ;
39
33
expect ( ReactDOM . findDOMNode ( component . portal ) . innerHTML . trim ( ) ) . toEqual ( '' ) ;
40
- unmountModal ( ) ;
41
34
} ) ;
42
35
43
36
it ( 'accepts appElement as a prop' , ( ) => {
@@ -73,21 +66,18 @@ describe('Modal', () => {
73
66
const child = 'I am a child of Modal, and he has sent me here...' ;
74
67
const component = renderModal ( { isOpen : true } , child ) ;
75
68
expect ( component . portal . content . innerHTML ) . toEqual ( child ) ;
76
- unmountModal ( ) ;
77
69
} ) ;
78
70
79
71
it ( 'renders the modal content with a dialog aria role when provided ' , ( ) => {
80
72
const child = 'I am a child of Modal, and he has sent me here...' ;
81
73
const component = renderModal ( { isOpen : true , role : 'dialog' } , child ) ;
82
74
expect ( component . portal . content . getAttribute ( 'role' ) ) . toEqual ( 'dialog' ) ;
83
- unmountModal ( ) ;
84
75
} ) ;
85
76
86
77
it ( 'renders the modal with a aria-label based on the contentLabel prop' , ( ) => {
87
78
const child = 'I am a child of Modal, and he has sent me here...' ;
88
79
const component = renderModal ( { isOpen : true , contentLabel : 'Special Modal' } , child ) ;
89
80
expect ( component . portal . content . getAttribute ( 'aria-label' ) ) . toEqual ( 'Special Modal' ) ;
90
- unmountModal ( ) ;
91
81
} ) ;
92
82
93
83
it ( 'has default props' , ( ) => {
@@ -114,16 +104,13 @@ describe('Modal', () => {
114
104
it ( 'focuses the modal content' , ( ) => {
115
105
renderModal ( { isOpen : true } , null , function checkModalContentFocus ( ) {
116
106
expect ( document . activeElement ) . toEqual ( this . portal . content ) ;
117
- unmountModal ( ) ;
118
107
} ) ;
119
108
} ) ;
120
109
121
110
it ( 'give back focus to previous element or modal.' , ( done ) => {
122
111
const modal = renderModal ( {
123
112
isOpen : true ,
124
113
onRequestClose ( ) {
125
- unmountModal ( ) ;
126
- unmountModal ( ) ;
127
114
done ( ) ;
128
115
}
129
116
} , null , ( ) => { } ) ;
@@ -160,7 +147,6 @@ describe('Modal', () => {
160
147
161
148
renderModal ( { isOpen : true } , input , ( ) => {
162
149
expect ( document . activeElement ) . toEqual ( document . querySelector ( '.focus_input' ) ) ;
163
- unmountModal ( ) ;
164
150
} ) ;
165
151
} ) ;
166
152
@@ -169,7 +155,6 @@ describe('Modal', () => {
169
155
expect ( ( ) => {
170
156
Simulate . keyDown ( component . portal . content , { key : 'Tab' , keyCode : 9 , which : 9 } ) ;
171
157
} ) . toNotThrow ( ) ;
172
- unmountModal ( ) ;
173
158
} ) ;
174
159
175
160
it ( 'keeps focus inside the modal when child has no tabbable elements' , ( ) => {
@@ -183,61 +168,51 @@ describe('Modal', () => {
183
168
preventDefault ( ) { tabPrevented = true ; }
184
169
} ) ;
185
170
expect ( tabPrevented ) . toEqual ( true ) ;
186
- unmountModal ( ) ;
187
171
} ) ;
188
172
189
173
it ( 'supports portalClassName' , ( ) => {
190
174
const modal = renderModal ( { isOpen : true , portalClassName : 'myPortalClass' } ) ;
191
175
expect ( modal . node . className ) . toEqual ( 'myPortalClass' ) ;
192
- unmountModal ( ) ;
193
176
} ) ;
194
177
195
178
it ( 'supports custom className' , ( ) => {
196
179
const modal = renderModal ( { isOpen : true , className : 'myClass' } ) ;
197
180
expect ( modal . portal . content . className . indexOf ( 'myClass' ) ) . toNotEqual ( - 1 ) ;
198
- unmountModal ( ) ;
199
181
} ) ;
200
182
201
183
it ( 'supports overlayClassName' , ( ) => {
202
184
const modal = renderModal ( { isOpen : true , overlayClassName : 'myOverlayClass' } ) ;
203
185
expect ( modal . portal . overlay . className . indexOf ( 'myOverlayClass' ) ) . toNotEqual ( - 1 ) ;
204
- unmountModal ( ) ;
205
186
} ) ;
206
187
207
188
it ( 'overrides the default styles when a custom classname is used' , ( ) => {
208
189
const modal = renderModal ( { isOpen : true , className : 'myClass' } ) ;
209
190
expect ( modal . portal . content . style . top ) . toEqual ( '' ) ;
210
- unmountModal ( ) ;
211
191
} ) ;
212
192
213
193
it ( 'overrides the default styles when a custom overlayClassName is used' , ( ) => {
214
194
const modal = renderModal ( { isOpen : true , overlayClassName : 'myOverlayClass' } ) ;
215
195
expect ( modal . portal . overlay . style . backgroundColor ) . toEqual ( '' ) ;
216
- unmountModal ( ) ;
217
196
} ) ;
218
197
219
198
it ( 'supports adding style to the modal contents' , ( ) => {
220
199
const modal = renderModal ( { isOpen : true , style : { content : { width : '20px' } } } ) ;
221
200
expect ( modal . portal . content . style . width ) . toEqual ( '20px' ) ;
222
- unmountModal ( ) ;
223
201
} ) ;
224
202
225
203
it ( 'supports overriding style on the modal contents' , ( ) => {
226
204
const modal = renderModal ( { isOpen : true , style : { content : { position : 'static' } } } ) ;
227
205
expect ( modal . portal . content . style . position ) . toEqual ( 'static' ) ;
228
- unmountModal ( ) ;
229
206
} ) ;
230
207
231
208
it ( 'supports adding style on the modal overlay' , ( ) => {
232
209
const modal = renderModal ( { isOpen : true , style : { overlay : { width : '75px' } } } ) ;
233
210
expect ( modal . portal . overlay . style . width ) . toEqual ( '75px' ) ;
234
- unmountModal ( ) ;
235
211
} ) ;
236
212
237
213
it ( 'supports overriding style on the modal overlay' , ( ) => {
238
214
const modal = renderModal ( { isOpen : true , style : { overlay : { position : 'static' } } } ) ;
239
215
expect ( modal . portal . overlay . style . position ) . toEqual ( 'static' ) ;
240
- unmountModal ( ) ;
241
216
} ) ;
242
217
243
218
it ( 'supports overriding the default styles' , ( ) => {
@@ -248,7 +223,6 @@ describe('Modal', () => {
248
223
const modal = renderModal ( { isOpen : true } ) ;
249
224
expect ( modal . portal . content . style . position ) . toEqual ( newStyle ) ;
250
225
Modal . defaultStyles . content . position = previousStyle ;
251
- unmountModal ( ) ;
252
226
} ) ;
253
227
254
228
it ( 'adds class to body when open' , ( ) => {
@@ -262,7 +236,6 @@ describe('Modal', () => {
262
236
263
237
renderModal ( { isOpen : false } ) ;
264
238
expect ( document . body . className . indexOf ( 'ReactModal__Body--open' ) !== - 1 ) . toEqual ( false ) ;
265
- unmountModal ( ) ;
266
239
} ) ;
267
240
268
241
it ( 'removes class from body when unmounted without closing' , ( ) => {
@@ -290,19 +263,15 @@ describe('Modal', () => {
290
263
const content = document . querySelector ( '.ReactModal__Content' ) ;
291
264
expect ( overlay . className . match ( / R e a c t M o d a l _ _ O v e r l a y - - a f t e r - o p e n / ) ) . toExist ( ) ;
292
265
expect ( content . className . match ( / R e a c t M o d a l _ _ C o n t e n t - - a f t e r - o p e n / ) ) . toExist ( ) ;
293
- unmountModal ( ) ;
294
266
} ) ;
295
267
296
268
it ( 'should trigger the onAfterOpen callback' , ( ) => {
297
269
const afterOpenCallback = sinon . spy ( ) ;
298
270
renderModal ( {
299
271
isOpen : true ,
300
- onAfterOpen ( ) {
301
- afterOpenCallback ( ) ;
302
- }
272
+ onAfterOpen : afterOpenCallback
303
273
} ) ;
304
274
expect ( afterOpenCallback . called ) . toBeTruthy ( ) ;
305
- unmountModal ( ) ;
306
275
} ) ;
307
276
308
277
it ( 'check the state of the modal after close with time out and reopen it' , ( ) => {
@@ -315,7 +284,6 @@ describe('Modal', () => {
315
284
modal . portal . open ( ) ;
316
285
modal . portal . closeWithoutTimeout ( ) ;
317
286
expect ( ! modal . portal . state . isOpen ) . toBeTruthy ( ) ;
318
- unmountModal ( ) ;
319
287
} ) ;
320
288
321
289
it ( 'should close on Esc key event' , ( ) => {
@@ -340,15 +308,14 @@ describe('Modal', () => {
340
308
expect ( event ) . toBeTruthy ( ) ;
341
309
expect ( event . constructor ) . toBeTruthy ( ) ;
342
310
expect ( event . key ) . toEqual ( 'FakeKeyToTestLater' ) ;
343
- unmountModal ( ) ;
344
311
} ) ;
345
312
346
313
describe ( 'should close on overlay click' , ( ) => {
347
- afterEach ( 'Unmount modal' , ( ) => {
348
- unmountModal ( ) ;
349
- } ) ;
314
+ afterEach ( 'Unmount modal' , emptyDOM ) ;
350
315
351
316
describe ( 'verify props' , ( ) => {
317
+ afterEach ( 'Unmount modal' , emptyDOM ) ;
318
+
352
319
it ( 'verify default prop of shouldCloseOnOverlayClick' , ( ) => {
353
320
const modal = renderModal ( { isOpen : true } ) ;
354
321
expect ( modal . props . shouldCloseOnOverlayClick ) . toEqual ( true ) ;
@@ -361,6 +328,8 @@ describe('Modal', () => {
361
328
} ) ;
362
329
363
330
describe ( 'verify clicks' , ( ) => {
331
+ afterEach ( 'Unmount modal' , emptyDOM ) ;
332
+
364
333
it ( 'verify overlay click when shouldCloseOnOverlayClick sets to false' , ( ) => {
365
334
const requestCloseCallback = sinon . spy ( ) ;
366
335
const modal = renderModal ( {
@@ -395,9 +364,7 @@ describe('Modal', () => {
395
364
const modal = renderModal ( {
396
365
isOpen : true ,
397
366
shouldCloseOnOverlayClick : true ,
398
- onRequestClose ( ) {
399
- requestCloseCallback ( ) ;
400
- }
367
+ onRequestClose : requestCloseCallback
401
368
} ) ;
402
369
expect ( modal . props . isOpen ) . toEqual ( true ) ;
403
370
const overlay = TestUtils . scryRenderedDOMComponentsWithClass ( modal . portal , 'ReactModal__Overlay' ) ;
@@ -481,6 +448,7 @@ describe('Modal', () => {
481
448
} ) ;
482
449
483
450
modal . portal . closeWithTimeout ( ) ;
451
+ unmountModal ( ) ;
484
452
485
453
const overlay = TestUtils . findRenderedDOMComponentWithClass ( modal . portal , 'ReactModal__Overlay' ) ;
486
454
const content = TestUtils . findRenderedDOMComponentWithClass ( modal . portal , 'ReactModal__Content' ) ;
@@ -489,7 +457,6 @@ describe('Modal', () => {
489
457
expect ( / R e a c t M o d a l _ _ C o n t e n t - - b e f o r e - c l o s e / . test ( content . className ) ) . toBe ( true ) ;
490
458
491
459
modal . portal . closeWithoutTimeout ( ) ;
492
- unmountModal ( ) ;
493
460
} ) ;
494
461
495
462
it ( 'keeps the modal in the DOM until closeTimeoutMS elapses' , ( done ) => {
0 commit comments