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 index bed662b574d..56fd1a3af39 100644 --- 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 ( + + {JSON.stringify({ activeIndex })} + + + ) + } + + const MyForm = () => { + useNextRouter(identifier, { + useRouter, + usePathname, + useSearchParams, + }) + + return ( + + + + + + + + ) + } + + render() + + 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 index 71ad2199ee7..394c90a162e 100644 --- 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 ( + + {JSON.stringify({ activeIndex })} + + + ) + } + + const MyForm = () => { + useQueryLocator(identifier) + + return ( + + + + + + + + ) + } + + render() + + 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 index e687c41bb3d..0fc7c7a2a63 100644 --- 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 ( + + {JSON.stringify({ activeIndex })} + + + ) + } + + const MyForm = () => { + useReachRouter(identifier, { useLocation, navigate }) + + return ( + + + + + + + + ) + } + + render() + + 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 index 800cd603744..386694304fe 100644 --- 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 ( + + {JSON.stringify({ activeIndex })} + + + ) + } + + const MyForm = () => { + useReactRouter(identifier, { useSearchParams }) + + return ( + + + + + + + + ) + } + + render() + + 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 index 2afb5d53b79..6a4bec8002e 100644 --- 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 index e103055e9e4..6784bc51a98 100644 --- 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 index 3999a9de303..e2b537aaf44 100644 --- 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 index d711ad14476..eb977174c60 100644 --- 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, })