@@ -451,39 +451,56 @@ describe('rc-segmented', () => {
451
451
offsetParentSpy . mockRestore ( ) ;
452
452
} ) ;
453
453
} ) ;
454
- describe ( 'render segmented with CSSMotion: vertical ' , ( ) => {
455
- it ( 'quick switch ' , ( ) => {
454
+ describe ( 'Segmented component vertical layout animation ' , ( ) => {
455
+ it ( 'should apply correct styles during animation for vertical layout ' , ( ) => {
456
456
const offsetParentSpy = jest
457
457
. spyOn ( HTMLElement . prototype , 'offsetParent' , 'get' )
458
- . mockImplementation ( ( ) => {
459
- return container ;
460
- } ) ;
458
+ . mockImplementation ( ( ) => container ) ;
459
+
460
+ const handleValueChange = jest . fn ( ) ;
461
461
const { container } = render (
462
462
< Segmented
463
+ options = { [ 'Option 1' , 'Option 2' , 'Option 3' ] }
464
+ onChange = { ( value ) => handleValueChange ( value ) }
463
465
vertical
464
- options = { [ 'IOS' , 'Android' , 'Web3' ] }
465
- defaultValue = "Android"
466
466
/> ,
467
467
) ;
468
468
469
- // >>> Click: Web3
469
+ // Initial state check
470
+ expectMatchChecked ( container , [ true , false , false ] ) ;
471
+ expect ( container . querySelectorAll ( '.rc-segmented-item' ) [ 0 ] ) . toHaveClass (
472
+ 'rc-segmented-item-selected' ,
473
+ ) ;
474
+
475
+ // Click: Option 3
470
476
fireEvent . click (
471
477
container . querySelectorAll ( '.rc-segmented-item-input' ) [ 2 ] ,
472
478
) ;
479
+ expect ( handleValueChange ) . toBeCalledWith ( 'Option 3' ) ;
480
+ expectMatchChecked ( container , [ false , false , true ] ) ;
473
481
474
- // Motion to active
475
- act ( ( ) => {
476
- jest . runAllTimers ( ) ;
477
- } ) ;
482
+ // Thumb animation start for vertical layout
478
483
expect ( container . querySelector ( '.rc-segmented-thumb' ) ) . toHaveClass (
479
- 'rc-segmented-thumb-motion-appear-active ' ,
484
+ 'rc-segmented-thumb-motion' ,
480
485
) ;
481
486
482
487
exceptThumbHaveStyle ( container , {
483
- '--thumb-active -top' : '0px' ,
484
- '--thumb-active-width ' : '0px' ,
488
+ '--thumb-start -top' : '0px' ,
489
+ '--thumb-start-height ' : '0px' , // Example height
485
490
} ) ;
486
491
492
+ // Simulate animation end
493
+ act ( ( ) => {
494
+ jest . runAllTimers ( ) ;
495
+ } ) ;
496
+ fireEvent . animationEnd ( container . querySelector ( '.rc-segmented-thumb' ) ! ) ;
497
+ act ( ( ) => {
498
+ jest . runAllTimers ( ) ;
499
+ } ) ;
500
+
501
+ // Final check for thumb position
502
+ exceptThumbHaveStyle ( container , { } ) ;
503
+
487
504
offsetParentSpy . mockRestore ( ) ;
488
505
} ) ;
489
506
} ) ;
0 commit comments