import { MemoryRouter , Route , Switch } from 'react-router-dom' ; import { fireEvent , simpleRender } from 'test-utils' ; import { Required } from 'utility-types' ; import { GeneralStepper , StepperProps } from '../GeneralStepper' ; const ExampleButtonComponent = ( { onComplete , onCompleteText } ) => ( < > < button onClick = { ( ) => onComplete ( onCompleteText ) } > Click Me < /button> < />); const ExampleButtonFinalComponent = ( { onComplete , onCompleteText , resetFlow , completeButton } ) => ( < > < button onClick = { ( ) => onComplete ( onCompleteText ) } > Click Me < /button> < button onClick = { ( ) => resetFlow ( ) } > { completeButton } < /button> < />); const functionTest = ( _ , cb ) => { cb ( ) ; } ; const testSteps = [ { label : 'Test Component 1' , component : ExampleButtonComponent , props : { onCompleteText : 'Finished this1' } , actions : ( payload , cb ) => functionTest ( payload , cb ) } , { label : 'Test Component 2' , component : ExampleButtonFinalComponent , props : { onCompleteText : 'Finished this2' } } ] ; const defaultProps = { steps : testSteps , defaultBackPath : '/dashboard' , defaultBackPathLabel : 'Dashboard' , completeBtnText : 'Finished' } ; describe ( 'GeneralStepper' , ( ) => { let location ; const StepperComponent = ( props , path ? ) => ( < MemoryRouter initialEntries = { path ? [ path ] : undefined } > < Switch > < Route path = "*" render = { ( renderProps ) => { location = renderProps . location ; return < GeneralStepper { ... props } / > ; } } /> < /Switch> < /MemoryRouter>); const renderComponent = ( props ) => simpleRender ( < StepperComponent { ... props } / > ) ; test ( 'it renders step 1 correctly first' , async ( ) => { const { getByText } = renderComponent ( defaultProps ) ; const text = getByText ( 'Test Component 1' , { selector : 'p' } ) ; expect ( text ) . toBeInTheDocument ( ) ; } ) ; test ( 'it renders step 1 back button correctly' , async ( ) => { const { getByText } = renderComponent ( defaultProps ) ; const text = getByText ( defaultProps . defaultBackPathLabel , { selector : 'span' } ) ; expect ( text ) . toBeInTheDocument ( ) ; } ) ; test ( 'it correctly reroutes on step 1 back button click' , async ( ) => { const { getByText } = renderComponent ( defaultProps ) ; const text = getByText ( defaultProps . defaultBackPathLabel , { selector : 'span' } ) ; fireEvent . click ( text ) ; expect ( location . pathname ) . toEqual ( defaultProps . defaultBackPath ) ; } ) ; test ( 'it renders step 2 when goToNext is clicked in step 1' , async ( ) => { const { getByText } = renderComponent ( defaultProps ) ; const text = getByText ( 'Click Me' ) ; fireEvent . click ( text ) ; const newText = getByText ( 'Test Component 2' , { selector : 'p' } ) ; expect ( newText ) . toBeInTheDocument ( ) ; } ) ; test ( 'it renders step 1 when back button is clicked from step 2' , async ( ) => { const { getByText } = renderComponent ( defaultProps ) ; const text = getByText ( 'Click Me' ) ; fireEvent . click ( text ) ; const goBackButton = getByText ( `Test Component 1` , { selector : 'span' } ) ; fireEvent . click ( goBackButton ) ; const stepOneText = getByText ( 'Test Component 1' , { selector : 'p' } ) ; expect ( stepOneText ) . toBeInTheDocument ( ) ; } ) ; test ( 'it resets flow when resetFlow button is clicked from final component' , async ( ) => { const { getByText } = renderComponent ( defaultProps ) ; const text = getByText ( 'Click Me' ) ; fireEvent . click ( text ) ; const resetFlowButton = getByText ( defaultProps . completeBtnText ) ; fireEvent . click ( resetFlowButton ) ; const stepOneText = getByText ( 'Test Component 1' , { selector : 'p' } ) ; expect ( stepOneText ) . toBeInTheDocument ( ) ; } ) ; } ) ;