@@ -9,7 +9,13 @@ const Simulate = TestUtils.Simulate;
9
9
import sinon from 'sinon' ;
10
10
import expect from 'expect' ;
11
11
12
- describe ( 'Modal' , function ( ) {
12
+ describe ( 'Modal' , ( ) => {
13
+ afterEach ( 'check if test cleaned up rendered modals' , function ( ) {
14
+ var overlay = document . querySelectorAll ( '.ReactModal__Overlay' ) ;
15
+ var content = document . querySelectorAll ( '.ReactModal__Content' ) ;
16
+ expect ( overlay . length ) . toBe ( 0 ) ;
17
+ expect ( content . length ) . toBe ( 0 ) ;
18
+ } ) ;
13
19
14
20
it ( 'scopes tab navigation to the modal' ) ;
15
21
it ( 'focuses the last focused element when tabbing in from browser chrome' ) ;
@@ -116,7 +122,7 @@ describe('Modal', function () {
116
122
unmountModal ( ) ;
117
123
done ( ) ;
118
124
}
119
- } , null , function ( ) { } ) ;
125
+ } , null ) ;
120
126
121
127
renderModal ( {
122
128
isOpen : true ,
@@ -174,6 +180,7 @@ describe('Modal', function () {
174
180
preventDefault : function ( ) { tabPrevented = true ; }
175
181
} ) ;
176
182
expect ( tabPrevented ) . toEqual ( true ) ;
183
+ unmountModal ( ) ;
177
184
} ) ;
178
185
179
186
it ( 'supports portalClassName' , function ( ) {
@@ -236,15 +243,16 @@ describe('Modal', function () {
236
243
} ) ;
237
244
238
245
it ( 'adds class to body when open' , function ( ) {
239
- renderModal ( { isOpen : false } ) ;
246
+ renderModal ( { isOpen : false } ) ;
240
247
expect ( document . body . className . indexOf ( 'ReactModal__Body--open' ) !== - 1 ) . toEqual ( false ) ;
248
+ unmountModal ( ) ;
241
249
242
- renderModal ( { isOpen : true } ) ;
243
- expect ( document . body . className . indexOf ( 'ReactModal__Body--open' ) !== - 1 ) . toEqual ( true ) ;
244
-
245
- renderModal ( { isOpen : false } ) ;
246
- expect ( document . body . className . indexOf ( 'ReactModal__Body--open' ) !== - 1 ) . toEqual ( false ) ;
250
+ renderModal ( { isOpen : true } ) ;
251
+ expect ( document . body . className . indexOf ( 'ReactModal__Body--open' ) !== - 1 ) . toEqual ( true ) ;
247
252
unmountModal ( ) ;
253
+
254
+ renderModal ( { isOpen : false } ) ;
255
+ expect ( document . body . className . indexOf ( 'ReactModal__Body--open' ) !== - 1 ) . toEqual ( false ) ;
248
256
} ) ;
249
257
250
258
it ( 'removes class from body when unmounted without closing' , function ( ) {
@@ -441,26 +449,50 @@ describe('Modal', function () {
441
449
expect ( event . constructor . name ) . toEqual ( 'SyntheticEvent' ) ;
442
450
} ) ;
443
451
444
- //it('adds --before-close for animations', function() {
445
- //var node = document.createElement('div');
446
-
447
- //var component = ReactDOM.render(React.createElement(Modal, {
448
- //isOpen: true,
449
- //ariaHideApp: false,
450
- //closeTimeoutMS: 50,
451
- //}), node);
452
-
453
- //component = ReactDOM.render(React.createElement(Modal, {
454
- //isOpen: false,
455
- //ariaHideApp: false,
456
- //closeTimeoutMS: 50,
457
- //}), node);
458
-
459
- // It can't find these nodes, I didn't spend much time on this
460
- //var overlay = document.querySelector('.ReactModal__Overlay');
461
- //var content = document.querySelector('.ReactModal__Content');
462
- //ok(overlay.className.match(/ReactModal__Overlay--before-close/));
463
- //ok(content.className.match(/ReactModal__Content--before-close/));
464
- //unmountModal();
465
- //});
452
+ it ( 'adds --before-close for animations' , ( ) => {
453
+ const closeTimeoutMS = 50 ;
454
+ const modal = renderModal ( {
455
+ isOpen : true ,
456
+ closeTimeoutMS
457
+ } ) ;
458
+
459
+ modal . portal . closeWithTimeout ( ) ;
460
+
461
+ const overlay = TestUtils . findRenderedDOMComponentWithClass ( modal . portal , 'ReactModal__Overlay' ) ;
462
+ const content = TestUtils . findRenderedDOMComponentWithClass ( modal . portal , 'ReactModal__Content' ) ;
463
+
464
+ expect ( / R e a c t M o d a l _ _ O v e r l a y - - b e f o r e - c l o s e / . test ( overlay . className ) ) . toBe ( true ) ;
465
+ 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 ) ;
466
+
467
+ modal . portal . closeWithoutTimeout ( ) ;
468
+ unmountModal ( ) ;
469
+ } ) ;
470
+
471
+ it ( 'keeps the modal in the DOM until closeTimeoutMS elapses' , ( done ) => {
472
+ const closeTimeoutMS = 50 ;
473
+
474
+ renderModal ( {
475
+ isOpen : true ,
476
+ closeTimeoutMS
477
+ } ) ;
478
+
479
+ unmountModal ( ) ;
480
+
481
+ const checkDOM = ( expectMounted ) => {
482
+ const overlay = document . querySelectorAll ( '.ReactModal__Overlay' ) ;
483
+ const content = document . querySelectorAll ( '.ReactModal__Content' ) ;
484
+ const numNodes = expectMounted ? 1 : 0 ;
485
+ expect ( overlay . length ) . toBe ( numNodes ) ;
486
+ expect ( content . length ) . toBe ( numNodes ) ;
487
+ } ;
488
+
489
+ // content is still mounted after modal is gone
490
+ checkDOM ( true ) ;
491
+
492
+ setTimeout ( ( ) => {
493
+ // content is unmounted after specified timeout
494
+ checkDOM ( false ) ;
495
+ done ( ) ;
496
+ } , closeTimeoutMS ) ;
497
+ } ) ;
466
498
} ) ;
0 commit comments