import { unstable_useDispatchEffect , useStateManager } from '@fluentui/react-bindings' ; import { createManager , ManagerFactory } from '@fluentui/state' ; import { shallow } from 'enzyme' ; import * as React from 'react' ; import * as ReactTestUtils from 'react-dom/test-utils' ; type TestState = { value : string ; } ; type TestActions = { change : ( value : string ) => void ; clear : ( ) => void ; } ; const createTestManager = config => createManager < TestState , TestActions > ( { ... config , actions : { change : ( value ) => ( ) => ( { value } ) , clear : ( ) => ( ) => ( { value : '' } ) , } , state : { value : '' , ... config . state , } , } ) ; type TestComponentProps = Partial < TestState > & { onChange : ( e : React . ChangeEvent | React . MouseEvent , value : TestComponentProps ) => void ; defaultValue ? : string ; value ? : string ; } ; const TestComponent = props => { const [ dispatch , dispatchEffect ] = unstable_useDispatchEffect < TestState > ( ( e , prevState , nextState ) => { if ( prevState . value !== nextState . value ) { props . onChange ( e as React . ChangeEvent | React . MouseEvent , { ... props , value : nextState . value , } ) ; } } ) ; const { state , actions } = useStateManager ( createTestManager , { mapPropsToInitialState : ( ) => ( { value : props . defaultValue } ) , mapPropsToState : ( ) => ( { value : props . value } ) , sideEffects : [ dispatchEffect ] , } ) ; return ( < > < input onChange = { e => dispatch ( e , actions . change , e . target . value ) } value = { state . value } / > < button onClick = { e => dispatch ( e , actions . clear ) } /> < />); } ; describe ( 'useDispatchEffect' , ( ) => { it ( 'calls an action with params' , ( ) => { const onChange = jest . fn ( ) ; const wrapper = shallow ( < TestComponent onChange = { onChange } / > ) ; ReactTestUtils . act ( ( ) => { wrapper . find ( 'input' ) . simulate ( 'change' , { target : { value : 'baz' } } ) ; } ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( 'baz' ) ; } ) ; it ( 'calls an action without params' , ( ) => { const onChange = jest . fn ( ) ; const wrapper = shallow ( < TestComponent defaultValue = "foo" onChange = { onChange } / > ) ; ReactTestUtils . act ( ( ) => { wrapper . find ( 'button' ) . simulate ( 'click' ) ; } ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( '' ) ; } ) ; } ) ;