@@ -451,170 +451,6 @@ describe('rc-segmented', () => {
451
451
offsetParentSpy . mockRestore ( ) ;
452
452
} ) ;
453
453
} ) ;
454
- describe ( 'render segmented with CSSMotion (vertical)' , ( ) => {
455
- it ( 'basic vertical' , ( ) => {
456
- const offsetParentSpy = jest
457
- . spyOn ( HTMLElement . prototype , 'offsetParent' , 'get' )
458
- . mockImplementation ( ( ) => {
459
- return container ;
460
- } ) ;
461
- const handleValueChange = jest . fn ( ) ;
462
- const { container, asFragment } = render (
463
- < Segmented
464
- options = { [ 'iOS' , 'Android' , 'Web3' ] }
465
- onChange = { ( value ) => handleValueChange ( value ) }
466
- vertical
467
- /> ,
468
- ) ;
469
- expect ( asFragment ( ) . firstChild ) . toMatchSnapshot ( ) ;
470
-
471
- expectMatchChecked ( container , [ true , false , false ] ) ;
472
- expect ( container . querySelectorAll ( '.rc-segmented-item' ) [ 0 ] ) . toHaveClass (
473
- 'rc-segmented-item-selected' ,
474
- ) ;
475
-
476
- // >>> Click: Web3
477
- fireEvent . click (
478
- container . querySelectorAll ( '.rc-segmented-item-input' ) [ 2 ] ,
479
- ) ;
480
- expect ( handleValueChange ) . toBeCalledWith ( 'Web3' ) ;
481
- expectMatchChecked ( container , [ false , false , true ] ) ;
482
-
483
- expect ( container . querySelectorAll ( '.rc-segmented-thumb' ) [ 0 ] ) . toHaveClass (
484
- 'rc-segmented-thumb-motion' ,
485
- ) ;
486
-
487
- // thumb appeared at `iOS`
488
- exceptThumbHaveStyle ( container , {
489
- '--thumb-start-top' : '0px' ,
490
- '--thumb-start-height' : '62px' ,
491
- } ) ;
492
-
493
- // Motion => active
494
- act ( ( ) => {
495
- jest . runAllTimers ( ) ;
496
- } ) ;
497
-
498
- // Motion enter end
499
- fireEvent . animationEnd ( container . querySelector ( '.rc-segmented-thumb' ) ! ) ;
500
- act ( ( ) => {
501
- jest . runAllTimers ( ) ;
502
- } ) ;
503
-
504
- // thumb should disappear
505
- expect ( container . querySelector ( '.rc-segmented-thumb' ) ) . toBeFalsy ( ) ;
506
-
507
- // >>> Click: Android
508
- fireEvent . click (
509
- container . querySelectorAll ( '.rc-segmented-item-input' ) [ 1 ] ,
510
- ) ;
511
- expect ( handleValueChange ) . toBeCalledWith ( 'Android' ) ;
512
- expectMatchChecked ( container , [ false , true , false ] ) ;
513
-
514
- // thumb should move
515
- expect ( container . querySelector ( '.rc-segmented-thumb' ) ) . toHaveClass (
516
- 'rc-segmented-thumb-motion' ,
517
- ) ;
518
-
519
- // thumb appeared at `Web3`
520
- exceptThumbHaveStyle ( container , {
521
- '--thumb-start-top' : '62px' , // Start position for 'Web3'
522
- '--thumb-start-height' : '76px' , // Height of the thumb
523
- } ) ;
524
-
525
- // Motion appear end
526
- act ( ( ) => {
527
- jest . runAllTimers ( ) ;
528
- } ) ;
529
- exceptThumbHaveStyle ( container , {
530
- '--thumb-active-top' : '180px' , // Active position for 'Android'
531
- '--thumb-active-height' : '118px' , // Final height of the thumb
532
- } ) ;
533
- fireEvent . animationEnd ( container . querySelector ( '.rc-segmented-thumb' ) ! ) ;
534
- act ( ( ) => {
535
- jest . runAllTimers ( ) ;
536
- } ) ;
537
-
538
- // thumb should disappear
539
- expect ( container . querySelector ( '.rc-segmented-thumb' ) ) . toBeFalsy ( ) ;
540
-
541
- offsetParentSpy . mockRestore ( ) ;
542
- } ) ;
543
-
544
- it ( 'quick switch vertical' , ( ) => {
545
- const offsetParentSpy = jest
546
- . spyOn ( HTMLElement . prototype , 'offsetParent' , 'get' )
547
- . mockImplementation ( ( ) => {
548
- return container ;
549
- } ) ;
550
- const { container } = render (
551
- < Segmented
552
- options = { [ 'IOS' , 'Android' , 'Web3' ] }
553
- defaultValue = "Android"
554
- vertical
555
- /> ,
556
- ) ;
557
-
558
- // >>> Click: Web3
559
- fireEvent . click (
560
- container . querySelectorAll ( '.rc-segmented-item-input' ) [ 2 ] ,
561
- ) ;
562
-
563
- // Motion to active
564
- act ( ( ) => {
565
- jest . runAllTimers ( ) ;
566
- } ) ;
567
- expect ( container . querySelector ( '.rc-segmented-thumb' ) ) . toHaveClass (
568
- 'rc-segmented-thumb-motion-appear-active' ,
569
- ) ;
570
-
571
- exceptThumbHaveStyle ( container , {
572
- '--thumb-active-top' : '180px' ,
573
- '--thumb-active-height' : '76px' ,
574
- } ) ;
575
-
576
- // >>> Click: IOS
577
- fireEvent . click (
578
- container . querySelectorAll ( '.rc-segmented-item-input' ) [ 0 ] ,
579
- ) ;
580
-
581
- exceptThumbHaveStyle ( container , {
582
- '--thumb-active-top' : '0px' ,
583
- '--thumb-active-height' : '62px' ,
584
- } ) ;
585
-
586
- offsetParentSpy . mockRestore ( ) ;
587
- } ) ;
588
-
589
- it ( 'stop animation early in hidden parent (vertical)' , ( ) => {
590
- const offsetParentSpy = jest
591
- . spyOn ( HTMLElement . prototype , 'offsetParent' , 'get' )
592
- . mockImplementation ( ( ) => null ) ;
593
- const Demo = ( ) => {
594
- const [ value , setValue ] = React . useState < string > ( 'iOS' ) ;
595
- React . useEffect ( ( ) => setValue ( 'Web3' ) , [ ] ) ;
596
- return (
597
- < Segmented
598
- options = { [ 'iOS' , 'Android' , 'Web3' ] }
599
- value = { value }
600
- vertical
601
- />
602
- ) ;
603
- } ;
604
-
605
- const { container } = render ( < Demo /> ) ;
606
-
607
- // stop animation early and place "selected" class
608
- expect ( container . querySelectorAll ( '.rc-segmented-item' ) [ 2 ] ) . toHaveClass (
609
- 'rc-segmented-item-selected' ,
610
- ) ;
611
-
612
- // thumb should disappear
613
- expect ( container . querySelector ( '.rc-segmented-thumb' ) ) . toBeFalsy ( ) ;
614
-
615
- offsetParentSpy . mockRestore ( ) ;
616
- } ) ;
617
- } ) ;
618
454
619
455
it ( 'render segmented with options null/undefined' , ( ) => {
620
456
const handleValueChange = jest . fn ( ) ;
0 commit comments