feat(form) - Add transformer hook (#986)

* add context and utility

* feat(form) - add transformer to the description

* changes

* fix mock tests

* sanitize

* fix tests

Author: gabrielseco

src/components/form/fields/tests/CheckBoxField.test.tsx

@@ -8,9 +8,13 @@ import { CheckboxFieldDefault } from '@/src/components/form/fields/default/Check
 import { $TSFixMe } from '@/src/types/remoteFlows';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('CheckBoxField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/CountryField.test.tsx

@@ -13,7 +13,13 @@ import { JSFField, $TSFixMe } from '@/src/types/remoteFlows';
 import { CountryFieldDefault } from '@/src/components/form/fields/default/CountryFieldDefault';
 
 // Mock dependencies
-vi.mock('@/src/context');
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 type CountryFieldProps = JSFField & {
   placeholder?: string;

src/components/form/fields/tests/DatePickerField.test.tsx

@@ -8,9 +8,13 @@ import { DatePickerFieldDefault } from '@/src/components/form/fields/default/Dat
 import { $TSFixMe } from '@/src/types/remoteFlows';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 vi.mock('date-fns', async () => {
   const actual = await vi.importActual('date-fns');

src/components/form/fields/tests/FieldSetField.test.tsx

@@ -6,9 +6,13 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 import { FieldsetToggleButtonDefault } from '@/src/components/form/fields/default/FieldsetToggleButtonDefault';
 import { TextFieldDefault } from '@/src/components/form/fields/default/TextFieldDefault';
 
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 vi.mock('@/src/components/shared/zendesk-drawer/ZendeskTriggerButton', () => ({
   ZendeskTriggerButton: ({ zendeskId, children, className }: $TSFixMe) => (

src/components/form/fields/tests/FileUploadField.test.tsx

@@ -8,9 +8,13 @@ import { FileUploadFieldDefault } from '@/src/components/form/fields/default/Fil
 import { $TSFixMe } from '@/src/types/remoteFlows';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('FileUploadField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/MultiSelectField.test.tsx

@@ -10,9 +10,13 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 type MultiSelectFieldProps = React.ComponentProps<typeof MultiSelectField>;
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('MultiSelectField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/NumberField.test.tsx

@@ -10,9 +10,13 @@ import { NumberFieldDefault } from '@/src/components/form/fields/default/NumberF
 import { TextFieldDefault } from '@/src/components/form/fields/default/TextFieldDefault';
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('NumberField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/RadioGroupField.test.tsx

@@ -19,9 +19,13 @@ type RadioGroupFieldProps = JSFField & {
 };
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('RadioGroupField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/SelectField.test.tsx

@@ -10,9 +10,13 @@ import { $TSFixMe } from '@/src/types/remoteFlows';
 type SelectFieldProps = React.ComponentProps<typeof SelectField>;
 
 // Mock dependencies
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 describe('SelectField Component', () => {
   const mockOnChange = vi.fn();

src/components/form/fields/tests/TelField.test.tsx

@@ -8,9 +8,13 @@ import { TelFieldDefault } from '../default/TelFieldDefault';
 import { $TSFixMe } from '@/src/types/remoteFlows';
 import { yupResolver } from '@hookform/resolvers/yup';
 
-vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(),
-}));
+vi.mock('@/src/context', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/src/context')>();
+  return {
+    ...actual,
+    useFormFields: vi.fn(),
+  };
+});
 
 // Helper function to interact with Radix UI Select
 async function fillRadixSelect(labelText: string, countryName: string) {