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 (
+
+
+
+
+ )
+ }
+
+ 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 (
+
+
+
+
+ )
+ }
+
+ 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 (
+
+
+
+
+ )
+ }
+
+ 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 (
+
+
+
+
+ )
+ }
+
+ 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,
})