@@ -451,170 +451,6 @@ describe('rc-segmented', () => {
451451 offsetParentSpy . mockRestore ( ) ;
452452 } ) ;
453453 } ) ;
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- } ) ;
618454
619455 it ( 'render segmented with options null/undefined' , ( ) => {
620456 const handleValueChange = jest . fn ( ) ;
0 commit comments