import { defineComponent } from 'vue' ; import { mount } from '@vue/test-utils' ; import { renderHook , waitForNextUpdate } from '../utils' ; import { useForm } from '../../src' ; describe ( 'useFrom' , ( ) => { test ( 'basic' , async ( done ) => { const defaultValues = { name : 'wang' , age : 1 , info : { email : 'hello@example.com' , city : 'beijing' , } , notInclude : 'notInclude' , } ; const { result } = renderHook ( ( ) => useForm ( { defaultValues , } ) ) ; if ( result !== undefined ) { const nameField = result . useField ( 'name' , { rule : { required : true } , } ) ; expect ( result . values ) . toEqual ( defaultValues ) ; expect ( result . errors ) . toEqual ( { } ) ; expect ( nameField . value ) . toBe ( 'wang' ) ; nameField . value = 'victor' ; expect ( nameField . value ) . toBe ( 'victor' ) ; await nameField . validate ( ) ; expect ( result . errors . name ) . toBe ( undefined ) ; nameField . value = undefined ; await waitForNextUpdate ( ) ; expect ( nameField . error ) . toBeDefined ( ) ; expect ( result . errors . name ) . toBeDefined ( ) ; done ( ) ; } else { throw Error ; } } ) ; test ( 'nested' , async ( done ) => { const { result } = renderHook ( ( ) => useForm ( ) ) ; if ( result !== undefined ) { expect ( result . values ) . toEqual ( { } ) ; const nestedField = result . useField ( 'a.b.c.d' , { rule : { required : true } , } ) ; expect ( nestedField . value ) . toBeUndefined ( ) ; expect ( nestedField . error ) . toBeUndefined ( ) ; nestedField . value = 1 ; expect ( result . get ( 'a.b.c.d' ) ) . toBe ( 1 ) ; await waitForNextUpdate ( ) ; expect ( nestedField . error ) . toBeDefined ( ) ; } else { throw Error ; } done ( ) ; } ) ; test ( 'with component' , async ( done ) => { const mockFn = jest . fn ( ) ; const Form = defineComponent ( { setup ( ) { const { useField , handleSubmit , values , errors , set , } = useForm ( { defaultValues : { } , } ) ; const nameField = useField ( 'name' , { rule : { required : true } , } ) ; return { values , nameField , onSubmit : handleSubmit ( mockFn ) , errors , set , } ; } , render ( ) { return < form action = "" > < input type = "text" ref = { this . nameField . ref as any } value = { this . nameField . value } onInput = { ( e ) => { this . nameField . value = e . target . value ; } } /> < /form>; } , } ) ; const wrapper = mount ( Form ) ; expect ( wrapper . vm . values ) . toEqual ( { } ) ; const nameInput = wrapper . find ( 'input' ) ; await wrapper . vm . onSubmit ( ) ; expect ( mockFn ) . toBeCalledTimes ( 0 ) ; expect ( wrapper . vm . errors . name ) . toBeDefined ( ) ; await nameInput . setValue ( 'victor' ) ; expect ( wrapper . vm . values ) . toEqual ( { name : 'victor' } ) ; await wrapper . vm . onSubmit ( ) ; expect ( mockFn ) . toBeCalledTimes ( 1 ) ; expect ( mockFn ) . toBeCalledWith ( { name : 'victor' } ) ; expect ( wrapper . vm . errors . name ) . toBeUndefined ( ) ; wrapper . vm . set ( 'name' , 'wang' ) ; expect ( wrapper . vm . values ) . toEqual ( { name : 'wang' } ) ; await waitForNextUpdate ( ) ; expect ( nameInput . element . value ) . toBe ( 'wang' ) ; done ( ) ; } ) ; } ) ;