useSyncFormTranslations: update to typescript and add unit test

Author: clairep94

client/common/useSyncFormTranslations.test.tsx

@@ -0,0 +1,46 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { render } from '@testing-library/react';
+import useSyncFormTranslations from './useSyncFormTranslations';
+
+describe('useSyncFormTranslations', () => {
+  it('resets and re-applies non-empty form values on language change', () => {
+    const reset = jest.fn();
+    const change = jest.fn();
+    const getState = jest.fn().mockReturnValue({
+      values: {
+        name: 'Alice',
+        email: '[email protected]',
+        emptyField: ''
+      }
+    });
+
+    const formMock = { getState, reset, change };
+
+    function TestComponent({ language }: { language: string }) {
+      const formRef = useRef<any>(formMock);
+      useSyncFormTranslations(formRef, language);
+
+      return null;
+    }
+
+    const { rerender } = render(<TestComponent language="en" />);
+    rerender(<TestComponent language="fr" />); // simulate language change
+
+    expect(reset).toHaveBeenCalled();
+
+    expect(change).toHaveBeenCalledWith('name', 'Alice');
+    expect(change).toHaveBeenCalledWith('email', '[email protected]');
+    expect(change).not.toHaveBeenCalledWith('emptyField', '');
+  });
+
+  it('does nothing if formRef.current is null', () => {
+    function TestComponent({ language }: { language: string }) {
+      const formRef = useRef<any>(null);
+      useSyncFormTranslations(formRef, language);
+      return null;
+    }
+
+    render(<TestComponent language="en" />);
+    // No error = pass
+  });
+});

client/common/useSyncFormTranslations.ts

@@ -1,9 +1,20 @@
-import { useEffect } from 'react';
+import { useEffect, MutableRefObject } from 'react';
 
-// Usage: useSyncFormTranslations(formRef, language)
-// This hook ensures that form values are preserved when the language changes.
-// Pass a ref to the form instance and the current language as arguments.
-const useSyncFormTranslations = (formRef, language) => {
+export interface FormLike {
+  getState(): { values: Record<string, unknown> };
+  reset(): void;
+  change(field: string, value: unknown): void;
+}
+
+/**
+ * This hook ensures that form values are preserved when the language changes.
+ * @param formRef
+ * @param language
+ */
+const useSyncFormTranslations = (
+  formRef: MutableRefObject<FormLike>,
+  language: string
+) => {
   useEffect(() => {
     const form = formRef.current;
     if (!form) return;