diff --git a/src/components/routingActions.js b/src/components/routingActions.js index 507715de2..a86ad6ec7 100644 --- a/src/components/routingActions.js +++ b/src/components/routingActions.js @@ -1,14 +1,15 @@ const validateActionArgs = func => { - return function (...args) { + return (...args) => { if (args.some(arg => typeof arg !== 'string')) throw new Error('Invalid redirect arguments'); return func(...args); }; }; const ROUTES_MAP = { - stap: validateActionArgs(stepSlug => `stap/${stepSlug}`), + cosign: validateActionArgs(cosignAction => `cosign/${cosignAction}`), 'afspraak-annuleren': validateActionArgs(() => 'afspraak-annuleren'), - cosign: cosignAction => validateActionArgs(`cosign/${cosignAction}`), + 'afspraak-maken': validateActionArgs(() => `afspraak-maken`), + stap: validateActionArgs(stepSlug => `stap/${stepSlug}`), }; export const getRedirectPathname = (action, actionArgs) => { diff --git a/src/sdk.js b/src/sdk.js index 7e41ac753..152964d7f 100644 --- a/src/sdk.js +++ b/src/sdk.js @@ -126,9 +126,9 @@ class OpenForm { const actionParams = query.get('_action_params'); query.delete('_action'); query.delete('_action_params'); - const newUrl = `${document.location.origin}${this.basePath}/${ - this.useHashRouting ? '#/' : '' - }${getRedirectPathname(action, actionParams)}?${query}`; + const newUrl = `${document.location.origin}${this.useHashRouting ? '/#' : ''}${ + this.basePath + }/${getRedirectPathname(action, actionParams)}${query.size ? '?' + query : ''}`; window.history.replaceState(null, '', newUrl); } diff --git a/src/sdk.spec.js b/src/sdk.spec.js index e9e4e7d15..83aae83e9 100644 --- a/src/sdk.spec.js +++ b/src/sdk.spec.js @@ -125,7 +125,7 @@ describe('OpenForm', () => { expect(form.clientBaseUrl).toEqual('http://localhost/some-subpath'); }); - it('should correctly set the formUrl (hash fragment routing)', () => { + it('should correctly set the formUrl (hash based routing)', () => { mswServer.use(...apiMocks); window.history.pushState({}, 'Dummy title', '/some-server-side/path'); const formRoot = document.createElement('div'); @@ -138,4 +138,76 @@ describe('OpenForm', () => { expect(form.clientBaseUrl).toEqual('http://localhost/some-server-side/path#/some-subpath'); }); + + it.each([ + [ + '/some-subpath?_action=afspraak-annuleren', + 'http://localhost/some-subpath/afspraak-annuleren', + ], + [ + '/some-subpath?_action=afspraak-maken', + 'http://localhost/some-subpath/afspraak-maken/producten', + ], + [ + '/some-subpath?_action=cosign&_action_params=check', + 'http://localhost/some-subpath/cosign/check', + ], + [ + '/some-subpath?_action=stap&_action_params=step-1', + 'http://localhost/some-subpath/stap/step-1', + ], + ])('should handle action redirects correctly', async (initialUrl, expected) => { + mswServer.use(...apiMocks); + const formRoot = document.createElement('div'); + window.history.pushState(null, '', initialUrl); + const form = new OpenForm(formRoot, { + baseUrl: BASE_URL, + basePath: '/some-subpath', + formId: '81a22589-abce-4147-a2a3-62e9a56685aa', + lang: 'nl', + }); + await act(async () => await form.init()); + + // wait for the loader to be removed when all network requests have completed + await waitForElementToBeRemoved(() => within(formRoot).getByRole('status')); + expect(location.href).toEqual(expected); + }); + + it.each([ + [ + '/some-subpath?_action=afspraak-annuleren', + 'http://localhost/#/some-subpath/afspraak-annuleren', + ], + [ + '/some-subpath?_action=afspraak-maken', + 'http://localhost/#/some-subpath/afspraak-maken/producten', + ], + [ + '/some-subpath?_action=cosign&_action_params=check', + 'http://localhost/#/some-subpath/cosign/check', + ], + [ + '/some-subpath?_action=stap&_action_params=step-1', + 'http://localhost/#/some-subpath/stap/step-1', + ], + ])( + 'should handle action redirects correctly (hash based routing)', + async (initialUrl, expected) => { + mswServer.use(...apiMocks); + const formRoot = document.createElement('div'); + window.history.pushState(null, '', initialUrl); + const form = new OpenForm(formRoot, { + baseUrl: BASE_URL, + basePath: '/some-subpath', + formId: '81a22589-abce-4147-a2a3-62e9a56685aa', + useHashRouting: true, + lang: 'nl', + }); + await act(async () => await form.init()); + + // wait for the loader to be removed when all network requests have completed + await waitForElementToBeRemoved(() => within(formRoot).getByRole('status')); + expect(location.href).toEqual(expected); + } + ); });