import { useAutoControlled } from '@fluentui/react-bindings' ; import { shallow } from 'enzyme' ; import * as React from 'react' ; import * as ReactTestUtils from 'react-dom/test-utils' ; type TestComponentProps = { defaultValue ? : string ; value ? : string ; initialValue ? : string ; onChange ? : ( value : string ) => void ; } ; const TestComponent = props => { const [ value , setValue ] = useAutoControlled ( { defaultValue : props . defaultValue , value : props . value , initialValue : props . initialValue , } ) ; return ( < input onChange = { e => { setValue ( e . target . value ) ; if ( props . onChange ) props . onChange ( e . target . value ) ; } } value = { value || '' } />); } ; describe ( 'useAutoControlled' , ( ) => { it ( 'defaults to "undefined"' , ( ) => { const wrapper = shallow ( < TestComponent />); expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( '' ) ; } ) ; it ( 'defaults to `initialValue` if specified' , ( ) => { const wrapper = shallow ( < TestComponent initialValue = "foo" / > ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( 'foo' ) ; } ) ; it ( 'sets default values of controlled props to the state' , ( ) => { const wrapper = shallow ( < TestComponent defaultValue = "foo" / > ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( 'foo' ) ; } ) ; it ( 'sets values of controlled props to the state' , ( ) => { const wrapper = shallow ( < TestComponent value = "foo" / > ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( 'foo' ) ; } ) ; it ( 'handles state updates' , ( ) => { const wrapper = shallow ( < TestComponent />); ReactTestUtils . act ( ( ) => { wrapper . find ( 'input' ) . simulate ( 'change' , { target : { value : 'foo' } } ) ; } ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( 'foo' ) ; } ) ; it ( 'handles state updates with a default value' , ( ) => { const wrapper = shallow ( < TestComponent defaultValue = "foo" / > ) ; ReactTestUtils . act ( ( ) => { wrapper . find ( 'input' ) . simulate ( 'change' , { target : { value : 'bar' } } ) ; } ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( 'bar' ) ; } ) ; it ( 'ignores state updates if controlled' , ( ) => { const wrapper = shallow ( < TestComponent value = "foo" / > ) ; ReactTestUtils . act ( ( ) => { wrapper . find ( 'input' ) . simulate ( 'change' , { target : { value : 'bar' } } ) ; } ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( 'foo' ) ; } ) ; it ( 'sets values of controlled props to the state on updates' , ( ) => { const wrapper = shallow ( < TestComponent value = "foo" / > ) ; ReactTestUtils . act ( ( ) => { wrapper . setProps ( { value : 'bar' } ) ; } ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( 'bar' ) ; ReactTestUtils . act ( ( ) => { wrapper . setProps ( { value : 'baz' } ) ; } ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( 'baz' ) ; } ) ; it ( 'keeps last value of controlled prop in the state if value gets "undefined"' , ( ) => { const wrapper = shallow ( < TestComponent defaultValue = "foo" / > ) ; ReactTestUtils . act ( ( ) => { wrapper . setProps ( { value : undefined } ) ; } ) ; expect ( wrapper . find ( 'input' ) . prop ( 'value' ) ) . toBe ( 'foo' ) ; } ) ; } ) ;