fix(forms): ensure useReactRouter to handle initial data given by url (…

…#3708) Fixes #3702
dnbexperience · Jun 14, 2024 · a16f1f7 · a16f1f7
1 parent 6045e42
commit a16f1f7
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 13 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/__tests__/useNextRouter.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/__tests__/useNextRouter.test.tsx
@@ -28,8 +28,9 @@ describe('useNextRouter', () => {
   const output = () => {
     return document.querySelector('output')
   }
-  const mockUrl = () => {
-    const search = 'existing-query=foo&bar=baz'
+  const mockUrl = (
+    { search } = { search: 'existing-query=foo&bar=baz' }
+  ) => {
     Object.defineProperty(window, 'location', {
       value: {
         pathname: 'http://localhost/',
@@ -241,4 +242,44 @@ describe('useNextRouter', () => {
       "Cannot read properties of undefined (reading 'push')"
     )
   })
+
+  it('should set initial state given by the url', () => {
+    const search = `existing-query=foo&bar=baz&${identifier}-step=1`
+    mockUrl({ search })
+
+    const { useRouter, usePathname, useSearchParams } = getHookMock()
+
+    const Step = () => {
+      const { activeIndex } = useStep(identifier)
+      return (
+        <Wizard.Step>
+          <output>{JSON.stringify({ activeIndex })}</output>
+          <Wizard.Buttons />
+        </Wizard.Step>
+      )
+    }
+
+    const MyForm = () => {
+      useNextRouter(identifier, {
+        useRouter,
+        usePathname,
+        useSearchParams,
+      })
+
+      return (
+        <Form.Handler>
+          <Wizard.Container mode="loose" id={identifier}>
+            <Step />
+            <Step />
+            <Step />
+          </Wizard.Container>
+        </Form.Handler>
+      )
+    }
+
+    render(<MyForm />)
+
+    expect(output()).toHaveTextContent('{"activeIndex":1}')
+    expect(window.history.pushState).toHaveBeenCalledTimes(0)
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/__tests__/useQueryLocator.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/__tests__/useQueryLocator.test.tsx
@@ -23,8 +23,9 @@ describe('useQueryLocator', () => {
   const output = () => {
     return document.querySelector('output')
   }
-  const mockUrl = () => {
-    const search = 'existing-query=foo&bar=baz'
+  const mockUrl = (
+    { search } = { search: 'existing-query=foo&bar=baz' }
+  ) => {
     Object.defineProperty(window, 'location', {
       value: {
         href: `http://localhost/?${search}`,
@@ -274,4 +275,38 @@ describe('useQueryLocator', () => {
       'URL is not a constructor'
     )
   })
+
+  it('should set initial state given by the url', () => {
+    const search = `existing-query=foo&bar=baz&${identifier}-step=1`
+    mockUrl({ search })
+
+    const Step = () => {
+      const { activeIndex } = useStep(identifier)
+      return (
+        <Wizard.Step>
+          <output>{JSON.stringify({ activeIndex })}</output>
+          <Wizard.Buttons />
+        </Wizard.Step>
+      )
+    }
+
+    const MyForm = () => {
+      useQueryLocator(identifier)
+
+      return (
+        <Form.Handler>
+          <Wizard.Container mode="loose" id={identifier}>
+            <Step />
+            <Step />
+            <Step />
+          </Wizard.Container>
+        </Form.Handler>
+      )
+    }
+
+    render(<MyForm />)
+
+    expect(output()).toHaveTextContent('{"activeIndex":1}')
+    expect(window.history.pushState).toHaveBeenCalledTimes(0)
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/__tests__/useReachRouter.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/__tests__/useReachRouter.test.tsx
@@ -22,8 +22,9 @@ describe('useReachRouter', () => {
   const output = () => {
     return document.querySelector('output')
   }
-  const mockUrl = () => {
-    const search = 'existing-query=foo&bar=baz'
+  const mockUrl = (
+    { search } = { search: 'existing-query=foo&bar=baz' }
+  ) => {
     Object.defineProperty(window, 'location', {
       value: {
         href: `http://localhost/?${search}`,
@@ -230,4 +231,40 @@ describe('useReachRouter', () => {
       'Invalid URL: invalid-url'
     )
   })
+
+  it('should set initial state given by the url', () => {
+    const search = `existing-query=foo&bar=baz&${identifier}-step=1`
+    mockUrl({ search })
+
+    const { useLocation, navigate } = getHookMock()
+
+    const Step = () => {
+      const { activeIndex } = useStep(identifier)
+      return (
+        <Wizard.Step>
+          <output>{JSON.stringify({ activeIndex })}</output>
+          <Wizard.Buttons />
+        </Wizard.Step>
+      )
+    }
+
+    const MyForm = () => {
+      useReachRouter(identifier, { useLocation, navigate })
+
+      return (
+        <Form.Handler>
+          <Wizard.Container mode="loose" id={identifier}>
+            <Step />
+            <Step />
+            <Step />
+          </Wizard.Container>
+        </Form.Handler>
+      )
+    }
+
+    render(<MyForm />)
+
+    expect(output()).toHaveTextContent('{"activeIndex":1}')
+    expect(window.history.pushState).toHaveBeenCalledTimes(0)
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/__tests__/useReactRouter.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/__tests__/useReactRouter.test.tsx
@@ -24,8 +24,9 @@ describe('useReactRouter', () => {
   const output = () => {
     return document.querySelector('output')
   }
-  const mockUrl = () => {
-    const search = 'existing-query=foo&bar=baz'
+  const mockUrl = (
+    { search } = { search: 'existing-query=foo&bar=baz' }
+  ) => {
     Object.defineProperty(window, 'location', {
       value: {
         href: `http://localhost/?${search}`,
@@ -43,7 +44,11 @@ describe('useReactRouter', () => {
   const getHookMock = () => {
     const forceUpdateRef: React.MutableRefObject<() => void> = createRef()
 
-    const get = jest.fn(() => {
+    const get = jest.fn((key = null) => {
+      if (key) {
+        const searchParams = new URLSearchParams(window.location.search)
+        return searchParams.get(key)
+      }
       return stepIndex
     })
     const set = jest.fn((key, index) => {
@@ -252,4 +257,40 @@ describe('useReactRouter', () => {
       'searchParams.set is not a function'
     )
   })
+
+  it('should set initial state given by the url', () => {
+    const search = `existing-query=foo&bar=baz&${identifier}-step=1`
+    mockUrl({ search })
+
+    const { useSearchParams } = getHookMock()
+
+    const Step = () => {
+      const { activeIndex } = useStep(identifier)
+      return (
+        <Wizard.Step>
+          <output>{JSON.stringify({ activeIndex })}</output>
+          <Wizard.Buttons />
+        </Wizard.Step>
+      )
+    }
+
+    const MyForm = () => {
+      useReactRouter(identifier, { useSearchParams })
+
+      return (
+        <Form.Handler>
+          <Wizard.Container mode="loose" id={identifier}>
+            <Step />
+            <Step />
+            <Step />
+          </Wizard.Container>
+        </Form.Handler>
+      )
+    }
+
+    render(<MyForm />)
+
+    expect(output()).toHaveTextContent('{"activeIndex":1}')
+    expect(window.history.pushState).toHaveBeenCalledTimes(0)
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useNextRouter.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useNextRouter.tsx
@@ -38,7 +38,7 @@ export default function useNextRouter(
   useLayoutEffect(() => {
     const routerIndex = getIndex()
     if (!isNaN(routerIndex)) {
-      setActiveIndex(routerIndex, {
+      setActiveIndex?.(routerIndex, {
         skipStepChangeCallFromHook: true,
         skipStepChangeCallBeforeMounted: true,
       })

diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useQueryLocator.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useQueryLocator.tsx
@@ -38,7 +38,7 @@ export default function useQueryLocator(id: string = undefined) {
       const popstateListener = () => {
         const routerIndex = getIndex()
         if (!isNaN(routerIndex)) {
-          setActiveIndex(routerIndex, {
+          setActiveIndex?.(routerIndex, {
             skipStepChangeCallFromHook: true,
             skipStepChangeCallBeforeMounted: true,
           })

diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useReachRouter.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useReachRouter.tsx
@@ -40,7 +40,7 @@ export default function useReachRouter(
   useLayoutEffect(() => {
     const routerIndex = getIndex()
     if (!isNaN(routerIndex)) {
-      setActiveIndex(routerIndex, {
+      setActiveIndex?.(routerIndex, {
         skipStepChangeCallFromHook: true,
         skipStepChangeCallBeforeMounted: true,
       })

diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useReactRouter.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/hooks/useReactRouter.tsx
@@ -35,7 +35,7 @@ export default function useReactRouter(
   useLayoutEffect(() => {
     const routerIndex = getIndex()
     if (!isNaN(routerIndex)) {
-      setActiveIndex(routerIndex, {
+      setActiveIndex?.(routerIndex, {
         skipStepChangeCallFromHook: true,
         skipStepChangeCallBeforeMounted: true,
       })