import * as React from 'react' ; import { mount } from 'enzyme' ; import * as Formik from 'formik' ; import { useResetFormOnSecurityChange , useConnectFormField , } from '../form-state' ; import type { ConnectFormFieldProps } from '../../types' ; jest . mock ( 'formik' ) ; const useFormikContext = Formik . useFormikContext as jest . MockedFunction < typeof Formik . useFormikContext > ; const useField = Formik . useField as jest . MockedFunction < typeof Formik . useField > ; describe ( 'ConnectModal state hooks' , ( ) => { afterEach ( ( ) => { jest . resetAllMocks ( ) ; } ) ; describe ( 'useResetFormOnSecurityChange' , ( ) => { const setErrors = jest . fn ( ) ; const setTouched = jest . fn ( ) ; const setValues = jest . fn ( ) ; const mockFormOnce = ( values , errors = { } , touched = { } ) : void => { useFormikContext . mockReturnValueOnce ( { values , errors , touched , setValues , setErrors , setTouched , } as any ) ; } ; const TestUseResetFormOnSecurityChange = ( ) : JSX . Element => { useResetFormOnSecurityChange ( ) ; return < > < />; } ; const render = ( ) : ReturnType < typeof mount > => { return mount ( < TestUseResetFormOnSecurityChange />); } ; it ( 'resets form values if values.securityType changes' , ( ) => { mockFormOnce ( { ssid : 'foo' , securityType : 'baz' , psk : 'baz' } ) ; mockFormOnce ( { ssid : 'foo' , securityType : 'qux' , psk : 'baz' } ) ; const wrapper = render ( ) ; wrapper . setProps ( { } ) ; expect ( setValues ) . toHaveBeenCalledTimes ( 1 ) ; expect ( setValues ) . toHaveBeenCalledWith ( { ssid : 'foo' , securityType : 'qux' , } ) ; } ) ; it ( 'resets form errors if values.securityType changes' , ( ) => { const errors = { ssid : 'missing!' , psk : 'too short!' } ; mockFormOnce ( { ssid : '' , securityType : 'baz' , psk : 'baz' } , errors ) ; mockFormOnce ( { ssid : '' , securityType : 'qux' , psk : 'baz' } , errors ) ; const wrapper = render ( ) ; wrapper . setProps ( { } ) ; expect ( setErrors ) . toHaveBeenCalledTimes ( 1 ) ; expect ( setErrors ) . toHaveBeenCalledWith ( { ssid : 'missing!' } ) ; } ) ; it ( 'resets form touched if values.securityType changes' , ( ) => { const touched = { ssid : false , psk : true } ; mockFormOnce ( { ssid : '' , securityType : 'baz' , psk : 'baz' } , { } , touched ) ; mockFormOnce ( { ssid : '' , securityType : 'qux' , psk : 'baz' } , { } , touched ) ; const wrapper = render ( ) ; wrapper . setProps ( { } ) ; expect ( setTouched ) . toHaveBeenCalledTimes ( 1 ) ; expect ( setTouched ) . toHaveBeenCalledWith ( { ssid : false , securityType : true , } , false ) ; } ) ; } ) ; describe ( 'useConnectFormField' , ( ) => { const fieldName = 'field-name' ; const onChange = jest . fn ( ) ; const onBlur = jest . fn ( ) ; const setValue = jest . fn ( ) ; const setTouched = jest . fn ( ) ; const mockFieldOnce = ( value ? , error ? , touched ? ) : void => { const fieldProps = { value , onChange , onBlur } ; const fieldMeta = { error , touched } ; const fieldHelpers = { setValue , setTouched } ; useField . mockReturnValueOnce ( [ fieldProps , fieldMeta , fieldHelpers ] ) ; } ; const MockField = ( props ) : JSX . Element => < > < />; const TestUseConnectFormField = ( ) : JSX . Element => { const fieldProps = useConnectFormField ( fieldName ) ; return < MockField { ... fieldProps } > < /MockField>; } ; const render = ( ) : ReturnType < typeof mount > => mount ( < TestUseConnectFormField />); it ( 'passes field name to useField' , ( ) => { mockFieldOnce ( ) ; render ( ) ; expect ( useField ) . toHaveBeenCalledWith ( fieldName ) ; } ) ; it ( 'passes down field props' , ( ) => { mockFieldOnce ( 'value' , 'error' , true ) ; const wrapper = render ( ) ; expect ( wrapper . find ( MockField ) . props ( ) ) . toEqual ( { value : 'value' , error : 'error' , onChange , onBlur , setValue , setTouched , } ) ; } ) ; it ( 'maps undefined to null' , ( ) => { mockFieldOnce ( undefined , undefined , true ) ; const wrapper = render ( ) ; expect ( wrapper . find ( MockField ) . props ( ) ) . toMatchObject ( { value : null , error : null , } ) ; } ) ; it ( 'sets error to null if not touched' , ( ) => { mockFieldOnce ( 'value' , 'error' , false ) ; const wrapper = render ( ) ; expect ( wrapper . find ( MockField ) . props ( ) ) . toMatchObject ( { value : 'value' , error : null , } ) ; } ) ; } ) ; } ) ;