fix: unit tests

packages/form/src/components/Submit/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,7 +6,7 @@ exports[`Submit form is invalid 1`] = `
   position: relative;
 }
 
-.cache-1u1wsqu {
+.cache-1ehejze {
   -webkit-transition: border-color 0.2s ease,box-shadow 0.2s ease;
   transition: border-color 0.2s ease,box-shadow 0.2s ease;
   -webkit-appearance: none;
@@ -35,49 +35,49 @@ exports[`Submit form is invalid 1`] = `
   padding: 8px;
 }
 
-.cache-1u1wsqu::-webkit-input-placeholder {
+.cache-1ehejze::-webkit-input-placeholder {
   color: #727683;
   opacity: 0;
 }
 
-.cache-1u1wsqu::-moz-placeholder {
+.cache-1ehejze::-moz-placeholder {
   color: #727683;
   opacity: 0;
 }
 
-.cache-1u1wsqu:-ms-input-placeholder {
+.cache-1ehejze:-ms-input-placeholder {
   color: #727683;
   opacity: 0;
 }
 
-.cache-1u1wsqu::placeholder {
+.cache-1ehejze::placeholder {
   color: #727683;
   opacity: 0;
 }
 
-.cache-1u1wsqu:hover,
-.cache-1u1wsqu:focus {
-  border-color: #3b1a61;
+.cache-1ehejze:hover,
+.cache-1ehejze:focus {
+  border-color: #792dd4;
 }
 
-.cache-1u1wsqu:focus {
-  box-shadow: 0px 0px 0px 3px #5e127e40;
-  border-color: #3b1a61;
+.cache-1ehejze:focus {
+  box-shadow: 0px 0px 0px 3px #8c40ef40;
+  border-color: #792dd4;
 }
 
-.cache-1u1wsqu::-webkit-input-placeholder {
+.cache-1ehejze::-webkit-input-placeholder {
   opacity: 1;
 }
 
-.cache-1u1wsqu::-moz-placeholder {
+.cache-1ehejze::-moz-placeholder {
   opacity: 1;
 }
 
-.cache-1u1wsqu:-ms-input-placeholder {
+.cache-1ehejze:-ms-input-placeholder {
   opacity: 1;
 }
 
-.cache-1u1wsqu::placeholder {
+.cache-1ehejze::placeholder {
   opacity: 1;
 }
 
@@ -148,7 +148,7 @@ exports[`Submit form is invalid 1`] = `
       >
         <input
           autocomplete="on"
-          class="cache-1u1wsqu el3h3g92"
+          class="cache-1ehejze el3h3g92"
           name="toto"
           type="text"
           value="4"
@@ -277,7 +277,7 @@ exports[`Submit form is submitting 1`] = `
 
 exports[`Submit renders correctly  1`] = `
 <DocumentFragment>
-  .cache-z5af6 {
+  .cache-1nhcpqm {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -318,14 +318,14 @@ exports[`Submit renders correctly  1`] = `
   color: #ffffff;
 }
 
-.cache-z5af6:hover {
+.cache-1nhcpqm:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 <form>
     <button
-      class="cache-z5af6 e112qvla2"
+      class="cache-1nhcpqm e112qvla2"
       disabled=""
       type="submit"
     >
@@ -337,7 +337,7 @@ exports[`Submit renders correctly  1`] = `
 
 exports[`Submit renders correctly with icon and iconPosition  1`] = `
 <DocumentFragment>
-  .cache-uvmyyj {
+  .cache-158usla {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -378,7 +378,7 @@ exports[`Submit renders correctly with icon and iconPosition  1`] = `
   color: #ffffff;
 }
 
-.cache-uvmyyj:hover {
+.cache-158usla:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -394,7 +394,7 @@ exports[`Submit renders correctly with icon and iconPosition  1`] = `
 
 <form>
     <button
-      class="cache-uvmyyj e112qvla2"
+      class="cache-158usla e112qvla2"
       disabled=""
       type="submit"
     >

packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`SubmitErrorAlert should display an alert when submitError is present 1`] = `
 <DocumentFragment>
-  .cache-z5af6 {
+  .cache-1nhcpqm {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -43,7 +43,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
   color: #ffffff;
 }
 
-.cache-z5af6:hover {
+.cache-1nhcpqm:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -176,7 +176,7 @@ exports[`SubmitErrorAlert should display an alert when submitError is present 1`
 
 <form>
     <button
-      class="cache-z5af6 e112qvla2"
+      class="cache-1nhcpqm e112qvla2"
       disabled=""
       type="submit"
     >

packages/form/src/components/SubmitErrorAlert/__tests__/index.spec.tsx

@@ -8,12 +8,12 @@ import {
 } from '@jest/globals'
 import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { FORM_ERROR } from 'final-form'
 import { Form, Submit, SubmitErrorAlert } from '../..'
 import {
   shouldMatchEmotionSnapshot,
   shouldMatchEmotionSnapshotFormWrapper,
 } from '../../../../.jest/helpers'
+import { FORM_ERROR } from '../../../constants'
 import { mockErrors } from '../../../mocks'
 
 describe('SubmitErrorAlert', () => {

packages/form/src/hooks/__tests__/useOnFieldChange.spec.tsx

@@ -3,8 +3,11 @@ import { describe, expect, jest, test } from '@jest/globals'
 import { renderHook } from '@testing-library/react'
 import { theme as lightTheme } from '@ultraviolet/ui'
 import type { ReactElement } from 'react'
+import type { FieldValues } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 import { CheckboxField, Form, TextInputField } from '../../components'
 import { mockErrors } from '../../mocks'
+import type { CallbackFn } from '../useOnFieldChange'
 import { useOnFieldChange } from '../useOnFieldChange'
 
 type FormValues = {
@@ -27,19 +30,25 @@ const updated = {
   check: false,
 }
 
-const Wrapper = ({ children, initialValues }: Wrapers) => (
-  <ThemeProvider theme={lightTheme}>
-    <Form<FormValues>
-      initialValues={initialValues}
-      errors={mockErrors}
-      onRawSubmit={() => {}}
-    >
-      {children}
-      <CheckboxField name="check" />
-      <TextInputField name="textInputName" type="text" />
-    </Form>
-  </ThemeProvider>
-)
+const Wrapper = ({ children, initialValues }: Wrapers) => {
+  const methods = useForm({
+    values: initialValues,
+  })
+
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <Form<FormValues>
+        methods={methods}
+        errors={mockErrors}
+        onRawSubmit={() => {}}
+      >
+        {children}
+        <CheckboxField name="check" />
+        <TextInputField name="textInputName" type="text" />
+      </Form>
+    </ThemeProvider>
+  )
+}
 
 describe('useOnFieldChange', () => {
   test('should render correctly', () => {
@@ -71,7 +80,7 @@ describe('useOnFieldChange', () => {
   })
 
   test('should render when condition change', () => {
-    const callback = jest.fn()
+    const callback = jest.fn<CallbackFn<FieldValues, FormValues>>()
 
     let initialValues = initial
 

packages/form/src/hooks/useOnFieldChange.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 import type { DeepPartial, FieldPath, FieldValues } from 'react-hook-form'
 import { useFormContext } from 'react-hook-form'
 
-type CallbackFn<TFieldValues extends FieldValues, T> = (
+export type CallbackFn<TFieldValues extends FieldValues, T> = (
   value: T,
   values: DeepPartial<TFieldValues>,
 ) => void | Promise<void>
@@ -27,7 +27,7 @@ export const useOnFieldChange = <
     const subscription = watch(value => {
       if (previousValues.current !== value[fieldName] && enabled) {
         previousValues.current = value[fieldName]
-        void callback(value[fieldName], value)
+        callback(value[fieldName], value)?.catch(() => null)
       }
     })
 

packages/form/src/providers/ErrorContext/__tests__/__snapshots__/index.spec.tsx.snap

@@ -2,6 +2,8 @@
 
 exports[`ErrorProvider renders correctly  1`] = `
 <DocumentFragment>
-  Test
+  <form>
+    Test
+  </form>
 </DocumentFragment>
 `;