fix(Forms): ensure Value.* component's transformIn can changes it…

…s value
dnbexperience · Sep 19, 2024 · 153fc12 · 153fc12
1 parent a8a41ad
commit 153fc12
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 32 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useValueProps.test.tsx b/packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useValueProps.test.tsx
@@ -10,15 +10,54 @@ import nbNO from '../../constants/locales/nb-NO'
 const nb = nbNO['nb-NO']
 
 describe('useValueProps', () => {
-  it('should call use "transformIn" to prepare value', () => {
-    const value = 1
+  describe('transformIn', () => {
+    it('should prepare value', () => {
+      const value = 1
 
-    const transformIn = (value) => value + 1
-    const { result } = renderHook(() =>
-      useValueProps({ value, transformIn })
-    )
+      const transformIn = (value) => value + 1
+      const { result } = renderHook(() =>
+        useValueProps({ value, transformIn })
+      )
 
-    expect(result.current.value).toBe(2)
+      expect(result.current.value).toBe(2)
+    })
+
+    it('should prepare value when function instance changes', () => {
+      const { result, rerender } = renderHook(useValueProps, {
+        initialProps: {
+          value: 1,
+          transformIn: (value: number) => value + 1,
+        },
+      })
+
+      expect(result.current.value).toBe(2)
+
+      rerender({ value: 2, transformIn: (value: number) => value + 2 })
+
+      expect(result.current.value).toBe(4)
+    })
+
+    it('should prepare value from context', () => {
+      const path = '/contextValue'
+
+      const transformIn = (value) => value + 1
+      const { result } = renderHook(
+        () => useValueProps({ path, transformIn }),
+        {
+          wrapper: ({ children }) => (
+            <Provider
+              data={{
+                contextValue: 1,
+              }}
+            >
+              {children}
+            </Provider>
+          ),
+        }
+      )
+
+      expect(result.current.value).toBe(2)
+    })
   })
 
   it('should call use "toInput" to prepare value', () => {
@@ -135,28 +174,6 @@ describe('useValueProps', () => {
     expect(result.current.value).toBe(2)
   })
 
-  it('should use "transformIn" to prepare value from context', () => {
-    const path = '/contextValue'
-
-    const transformIn = (value) => value + 1
-    const { result } = renderHook(
-      () => useValueProps({ path, transformIn }),
-      {
-        wrapper: ({ children }) => (
-          <Provider
-            data={{
-              contextValue: 1,
-            }}
-          >
-            {children}
-          </Provider>
-        ),
-      }
-    )
-
-    expect(result.current.value).toBe(2)
-  })
-
   it('should get value from data context', () => {
     const path = '/contextValue'
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useValueProps.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useValueProps.ts
@@ -80,9 +80,7 @@ export default function useValueProps<
   )
 
   const value = shouldBeVisible(path)
-    ? transformers.current.transformIn(
-        transformers.current.toInput(externalValue)
-      )
+    ? transformIn(toInput(externalValue))
     : undefined
 
   const label =