🧪 Update tests for new functionality

Author: Daniel Requejo

src/test/component.test.ts

@@ -2,14 +2,14 @@ import { FormHandler } from '../FormHandler'
 import { mount } from '@vue/test-utils'
 import { expect, it, describe } from 'vitest'
 
-describe('FormHandler component testing', () => {
-  it('Form handler gets mounted', () => {
+describe('FormHandler', () => {
+  it('should mount', () => {
     expect(FormHandler).toBeTruthy()
 
     const wrapper = mount(FormHandler)
     expect(wrapper.exists()).toBeTruthy()
   })
-  it('Form handler scoped slot provides values and form state', () => {
+  it('should provide values and formState', () => {
     expect(FormHandler).toBeTruthy()
 
     const wrapper = mount(FormHandler, {
@@ -23,7 +23,7 @@ describe('FormHandler component testing', () => {
     expect(wrapper.html()).toContain('values')
     expect(wrapper.html()).toContain('formState')
   })
-  it('Form handler is correctly initialized', () => {
+  it('should be properly initialized', () => {
     const initialValues = {
       field1: 'something',
       field2: 'some other thing',

src/test/handler.test.ts

@@ -1,26 +1,26 @@
 import { initialState, useFormHandler } from '../useFormHandler'
 import { expect, it, describe } from 'vitest'
 
-describe('Form handler testing', () => {
-  it('Initial form state and values', () => {
+describe('useFormHandler()', () => {
+  it('should have correct initial state and values', () => {
     const { values, formState } = useFormHandler()
     expect(values).toStrictEqual({})
     expect(formState).toStrictEqual({ ...initialState() })
   })
-  it('Initial values should be applied without', () => {
+  it('should apply initialValues when specified', () => {
     const initialValues = {
       field: 'test',
     }
     const { values } = useFormHandler({ initialValues })
     expect(values).toStrictEqual(initialValues)
   })
-  it('Setting a value programmatically', async () => {
+  it('should set a value programmatically', async () => {
     const { values, setValue, formState } = useFormHandler()
     await setValue('field', 'oneTwoThree')
     expect(values.field).toBe('oneTwoThree')
     expect(formState.isDirty).toBeTruthy()
   })
-  it('Clearing a field programmatically', async () => {
+  it('should clear a field', async () => {
     const { register, values, setValue, formState, clearField } =
       useFormHandler()
     register('field')
@@ -31,7 +31,7 @@ describe('Form handler testing', () => {
     expect(values.field).toBe(null)
     expect(formState.isDirty).toBeFalsy()
   })
-  it('Clearing an initialized field leaves it dirty', async () => {
+  it('should leave an initialized field dirty when clearing', async () => {
     const { register, values, formState, clearField } = useFormHandler({
       initialValues: { field: 'value' },
     })
@@ -42,13 +42,13 @@ describe('Form handler testing', () => {
     expect(values.field).toBe(null)
     expect(formState.isDirty).toBeTruthy()
   })
-  it('Setting an error programmatically', async () => {
+  it('should set an error programmatically', async () => {
     const { formState, setError } = useFormHandler()
     setError('field', 'some error')
     expect(formState.errors).toStrictEqual({ field: 'some error' })
     expect(formState.isValid).toBeFalsy()
   })
-  it('Clearing an error programmatically', async () => {
+  it('should clear an error programmatically', async () => {
     const { formState, setError, clearError } = useFormHandler()
     const error = 'This field has an error'
     setError('field', error)
@@ -57,7 +57,7 @@ describe('Form handler testing', () => {
     expect(formState.errors.field).toBeUndefined()
     expect(formState.isValid).toBeTruthy()
   })
-  it('Clearing all errors of the form programmatically', async () => {
+  it('should clear all form errors programmatically', async () => {
     const { formState, setError, clearError } = useFormHandler()
     const error = 'some error'
     setError('field1', error)
@@ -70,7 +70,7 @@ describe('Form handler testing', () => {
     expect(formState.errors.field2).toBeUndefined()
     expect(formState.isValid).toBeTruthy()
   })
-  it('Resetting a field it back to its initial values and state', async () => {
+  it('should correctly reset a field', async () => {
     const { values, formState, resetField, setValue } = useFormHandler({
       initialValues: { field: 'value' },
     })
@@ -83,7 +83,7 @@ describe('Form handler testing', () => {
     expect(values.field).toBe('value')
     expect(formState.isDirty).toBeFalsy()
   })
-  it('Expecting modifiedValues to work', async () => {
+  it('should return correct modifiedValues', async () => {
     const { modifiedValues, setValue } = useFormHandler({
       initialValues: {
         field: 'something',
@@ -92,4 +92,21 @@ describe('Form handler testing', () => {
     await setValue('field2', 'another thing')
     expect(modifiedValues()).toStrictEqual({ field2: 'another thing' })
   })
+  it('should register field properly via build', () => {
+    const { build, values } = useFormHandler()
+    const form = build({
+      field: {},
+    })
+
+    expect(form.value.field.name).toBe('field')
+    expect(form.value.field.error).toBeUndefined()
+    expect(form.value.field.onBlur).toBeDefined()
+    expect(form.value.field.isDirty).toBeUndefined()
+    expect(form.value.field.isTouched).toBeUndefined()
+    expect(form.value.field.onClear).toBeDefined()
+    expect(form.value.field.onChange).toBeDefined()
+    expect(form.value.field.modelValue).toBe(null)
+    expect(form.value.field['onUpdate:modelValue']).toBeDefined()
+    expect(values.field).toBe(null)
+  })
 })

src/test/register.test.ts

@@ -1,8 +1,8 @@
 import { describe, it, expect } from 'vitest'
 import { useFormHandler } from '../useFormHandler'
 
-describe('Register function testing', () => {
-  it('Registering a field', () => {
+describe('register()', () => {
+  it('should register a field', () => {
     const { values, register } = useFormHandler()
     const field = register('field')
     expect(field.name).toBe('field')
@@ -16,31 +16,37 @@ describe('Register function testing', () => {
     expect(field['onUpdate:modelValue']).toBeDefined()
     expect(values.field).toBe(null)
   })
-  it('Specified native field should have native handlers', () => {
+  it('should apply native handlers by default', () => {
+    const { register } = useFormHandler()
+    const field = register('field')
+    expect(field.ref).toBeDefined()
+    expect(field.onChange).toBeDefined()
+  })
+  it('should apply native handlers when native is specified', () => {
     const { register } = useFormHandler()
     const field = register('field', { native: true })
     expect(field.ref).toBeDefined()
     expect(field.onChange).toBeDefined()
   })
-  it("Specified custom field shouldn't have native handlers", () => {
+  it('should not apply native handlers when native is set false', () => {
     const { register } = useFormHandler()
     const field = register('field', { native: false })
     expect(field.onChange).toBeUndefined()
     expect(field.modelValue).toBeDefined()
     expect(field['onUpdate:modelValue']).toBeDefined()
   })
-  it('Input registered with details receives dirty and touched states', () => {
+  it('should apply dirty and touched states when withDetails is specified', () => {
     const { register } = useFormHandler()
     const field = register('field', { withDetails: true })
     expect(field.isDirty).toBeDefined()
     expect(field.isTouched).toBeDefined()
   })
-  it('Registering a field with default value', () => {
+  it('should apply default value', () => {
     const { values, register } = useFormHandler()
     register('field', { defaultValue: 'something' })
     expect(values.field).toBe('something')
   })
-  it('Registered validations work on update via handler', async () => {
+  it('should trigger validation via handler', async () => {
     const { values, register, formState } = useFormHandler()
     const field = register('field', {
       validate: {
@@ -53,7 +59,7 @@ describe('Register function testing', () => {
       expect(formState.isValid).toBeFalsy()
     }
   })
-  it('Registered validations work on update via setter', async () => {
+  it('should trigger validation via setter', async () => {
     const { values, register, formState, setValue, triggerValidation } =
       useFormHandler()
     register('field', {