@@ -22,8 +22,6 @@ import {
22
22
PROPERTY_FLYOUT ,
23
23
PROPERTY_LEVEL ,
24
24
} from './const' ;
25
- import * as hooks from './hooks' ;
26
- import * as selectors from './selectors' ;
27
25
28
26
// Mock base flyout to a simple div to avoid complex internals
29
27
jest . mock ( '../flyout.component' , ( ) => {
@@ -118,18 +116,7 @@ jest.mock('../../observer/resize_observer', () => ({
118
116
useResizeObserver : ( ) => ( { width : 480 } ) ,
119
117
} ) ) ;
120
118
121
- // Import test utilities after mocks
122
- import {
123
- createTestState ,
124
- createTestSession ,
125
- createTestFlyout ,
126
- } from './__mocks__' ;
127
-
128
119
// Helper functions for tests - these can reference the mock functions defined above
129
- const createFlyoutManagerMock = ( ) => ( {
130
- state : createMockState ( ) ,
131
- ...createMockFunctions ( ) ,
132
- } ) ;
133
120
134
121
describe ( 'EuiManagedFlyout' , ( ) => {
135
122
const renderInProvider = ( ui : React . ReactElement ) =>
@@ -350,192 +337,4 @@ describe('EuiManagedFlyout', () => {
350
337
expect ( onClose ) . toHaveBeenCalledTimes ( 1 ) ;
351
338
} ) ;
352
339
} ) ;
353
-
354
- describe ( 'force unmount mechanism' , ( ) => {
355
- it ( 'triggers onClose when flyout is removed from state but component still exists' , ( ) => {
356
- const onClose = jest . fn ( ) ;
357
-
358
- // Mock that starts with flyout in state, then removes it
359
- let flyoutInState = true ;
360
- let isActive = true ;
361
-
362
- const useFlyoutManagerSpy = jest . spyOn ( hooks , 'useFlyoutManager' ) ;
363
- const useIsFlyoutActiveSpy = jest . spyOn ( selectors , 'useIsFlyoutActive' ) ;
364
-
365
- useFlyoutManagerSpy . mockImplementation ( ( ) => ( {
366
- state : {
367
- sessions : [ ] ,
368
- flyouts : flyoutInState
369
- ? [ { flyoutId : 'force-unmount-test' , level : LEVEL_MAIN as any } ]
370
- : [ ] ,
371
- layoutMode : 'side-by-side' ,
372
- } ,
373
- dispatch : jest . fn ( ) ,
374
- addFlyout : jest . fn ( ) ,
375
- closeFlyout : mockCloseFlyout ,
376
- setActiveFlyout : jest . fn ( ) ,
377
- setFlyoutWidth : jest . fn ( ) ,
378
- goBack : jest . fn ( ) ,
379
- goToFlyout : jest . fn ( ) ,
380
- getHistoryItems : jest . fn ( ( ) => [ ] ) ,
381
- } ) ) ;
382
-
383
- useIsFlyoutActiveSpy . mockImplementation ( ( ) => isActive ) ;
384
-
385
- const { rerender } = renderInProvider (
386
- < EuiManagedFlyout
387
- id = "force-unmount-test"
388
- level = { LEVEL_MAIN }
389
- onClose = { onClose }
390
- flyoutMenuProps = { { title : 'Test Flyout' } }
391
- />
392
- ) ;
393
-
394
- // Initially onClose should not be called
395
- expect ( onClose ) . not . toHaveBeenCalled ( ) ;
396
-
397
- // Simulate flyout being removed from state (e.g., back button clicked)
398
- act ( ( ) => {
399
- flyoutInState = false ;
400
- isActive = false ;
401
- rerender (
402
- < EuiManagedFlyout
403
- id = "force-unmount-test"
404
- level = { LEVEL_MAIN }
405
- onClose = { onClose }
406
- flyoutMenuProps = { { title : 'Test Flyout' } }
407
- />
408
- ) ;
409
- } ) ;
410
-
411
- // Force unmount should trigger onClose
412
- expect ( onClose ) . toHaveBeenCalledTimes ( 1 ) ;
413
- expect ( onClose ) . toHaveBeenCalledWith ( expect . any ( MouseEvent ) ) ;
414
-
415
- // Restore mocks
416
- useFlyoutManagerSpy . mockRestore ( ) ;
417
- useIsFlyoutActiveSpy . mockRestore ( ) ;
418
- } ) ;
419
-
420
- it ( 'does not trigger force unmount for new flyouts not yet in state' , ( ) => {
421
- const onClose = jest . fn ( ) ;
422
-
423
- const useFlyoutManagerSpy = jest . spyOn ( hooks , 'useFlyoutManager' ) ;
424
- const useIsFlyoutActiveSpy = jest . spyOn ( selectors , 'useIsFlyoutActive' ) ;
425
-
426
- useFlyoutManagerSpy . mockReturnValue ( {
427
- state : {
428
- sessions : [ ] ,
429
- flyouts : [ ] , // Empty - flyout never added to state
430
- layoutMode : 'side-by-side' ,
431
- } ,
432
- dispatch : jest . fn ( ) ,
433
- addFlyout : jest . fn ( ) ,
434
- closeFlyout : mockCloseFlyout ,
435
- setActiveFlyout : jest . fn ( ) ,
436
- setFlyoutWidth : jest . fn ( ) ,
437
- goBack : jest . fn ( ) ,
438
- goToFlyout : jest . fn ( ) ,
439
- getHistoryItems : jest . fn ( ( ) => [ ] ) ,
440
- } ) ;
441
-
442
- useIsFlyoutActiveSpy . mockReturnValue ( false ) ;
443
-
444
- renderInProvider (
445
- < EuiManagedFlyout
446
- id = "new-flyout-test"
447
- level = { LEVEL_MAIN }
448
- onClose = { onClose }
449
- flyoutMenuProps = { { title : 'New Flyout' } }
450
- />
451
- ) ;
452
-
453
- // onClose should NOT be called for new flyouts that were never in state
454
- expect ( onClose ) . not . toHaveBeenCalled ( ) ;
455
-
456
- // Restore mocks
457
- useFlyoutManagerSpy . mockRestore ( ) ;
458
- useIsFlyoutActiveSpy . mockRestore ( ) ;
459
- } ) ;
460
- } ) ;
461
-
462
- describe ( 'back button scenario simulation' , ( ) => {
463
- it ( 'handles the back button workflow correctly' , ( ) => {
464
- const onCloseB = jest . fn ( ) ;
465
-
466
- // Collection of test fixtures for state verification: A first, then A + B, then just A
467
- const sessionStates = [
468
- // Initial: Session A only
469
- {
470
- sessions : [ { main : 'session-a' , child : null , title : 'Session A' } ] ,
471
- flyouts : [ { flyoutId : 'session-a' , level : LEVEL_MAIN as any } ] ,
472
- } ,
473
- // Session B added
474
- {
475
- sessions : [
476
- { main : 'session-a' , child : null , title : 'Session A' } ,
477
- { main : 'session-b' , child : null , title : 'Session B' } ,
478
- ] ,
479
- flyouts : [
480
- { flyoutId : 'session-a' , level : LEVEL_MAIN as any } ,
481
- { flyoutId : 'session-b' , level : LEVEL_MAIN as any } ,
482
- ] ,
483
- } ,
484
- // Back button: Session B removed
485
- {
486
- sessions : [ { main : 'session-a' , child : null , title : 'Session A' } ] ,
487
- flyouts : [ { flyoutId : 'session-a' , level : LEVEL_MAIN as any } ] ,
488
- } ,
489
- ] ;
490
-
491
- let stateIndex = 1 ; // Start with both sessions
492
- const useFlyoutManagerSpy = jest . spyOn ( hooks , 'useFlyoutManager' ) ;
493
-
494
- useFlyoutManagerSpy . mockImplementation ( ( ) => ( {
495
- state : {
496
- ...sessionStates [ stateIndex ] ,
497
- layoutMode : 'side-by-side' ,
498
- } ,
499
- dispatch : jest . fn ( ) ,
500
- addFlyout : jest . fn ( ) ,
501
- closeFlyout : mockCloseFlyout ,
502
- setActiveFlyout : jest . fn ( ) ,
503
- setFlyoutWidth : jest . fn ( ) ,
504
- goBack : jest . fn ( ) ,
505
- goToFlyout : jest . fn ( ) ,
506
- getHistoryItems : jest . fn ( ( ) => [ ] ) ,
507
- } ) ) ;
508
-
509
- // Render Session B
510
- const { rerender } = renderInProvider (
511
- < EuiManagedFlyout
512
- id = "session-b"
513
- level = { LEVEL_MAIN }
514
- onClose = { onCloseB }
515
- flyoutMenuProps = { { title : 'Session B' } }
516
- />
517
- ) ;
518
-
519
- expect ( onCloseB ) . not . toHaveBeenCalled ( ) ;
520
-
521
- // Simulate back button: remove Session B from state
522
- act ( ( ) => {
523
- stateIndex = 2 ; // State with only Session A
524
- rerender (
525
- < EuiManagedFlyout
526
- id = "session-b"
527
- level = { LEVEL_MAIN }
528
- onClose = { onCloseB }
529
- flyoutMenuProps = { { title : 'Session B' } }
530
- />
531
- ) ;
532
- } ) ;
533
-
534
- // Session B's onClose should be called via force unmount
535
- expect ( onCloseB ) . toHaveBeenCalledTimes ( 1 ) ;
536
-
537
- // Restore mock
538
- useFlyoutManagerSpy . mockRestore ( ) ;
539
- } ) ;
540
- } ) ;
541
340
} ) ;
0 commit comments