diff --git a/frontend/src/components/App/App.tsx b/frontend/src/components/App/App.tsx index 9563c413e..e8bd2809a 100644 --- a/frontend/src/components/App/App.tsx +++ b/frontend/src/components/App/App.tsx @@ -18,6 +18,7 @@ import Profile from "../Profile/Profile"; import Reload from "../Reload/Reload"; import StoreProfile from "../StoreProfile/StoreProfile"; import useDisableRightClickOnTouchDevices from "../../hooks/useDisableRightClickOnTouchDevices"; +import { InternalRedirect } from "../InternalRedirect/InternalRedirect"; // App is the root component of our application @@ -75,6 +76,8 @@ const App = () => { + + {/* Experiment Collection */} diff --git a/frontend/src/components/Final/Final.test.jsx b/frontend/src/components/Final/Final.test.jsx index 74cb195df..4368ddf65 100644 --- a/frontend/src/components/Final/Final.test.jsx +++ b/frontend/src/components/Final/Final.test.jsx @@ -146,7 +146,7 @@ session="session-id" const el = screen.getByTestId('button-link'); expect(el).to.exist; - expect(el.getAttribute('href')).toBe('/aml'); + expect(el.getAttribute('href')).toBe('/redirect/aml'); }); it('Uses an anchor tag to navigate when button link is absolute', () => { @@ -162,4 +162,21 @@ session="session-id" expect(el).to.exist; expect(el.getAttribute('href')).toBe('https://example.com'); }); + + it('Calls onNext when there is no button link and the user clicks the button', async () => { + const onNextMock = vi.fn(); + render( + + + + ); + + fireEvent.click(screen.getByTestId('button')); + await waitFor(() => { + expect(onNextMock).toHaveBeenCalled(); + }); + }); }); diff --git a/frontend/src/components/Final/FinalButton.tsx b/frontend/src/components/Final/FinalButton.tsx index 816b1db6a..e37110664 100644 --- a/frontend/src/components/Final/FinalButton.tsx +++ b/frontend/src/components/Final/FinalButton.tsx @@ -30,8 +30,10 @@ const FinalButton: React.FC = ({ button, onNext }) => { // If the button has a link, it will render a Link component if the link is a relative URL if (isRelativeUrl(button.link)) { + const url = `/redirect${button.link}` + return ( - + {button.text} ) diff --git a/frontend/src/components/InternalRedirect/InternalRedirect.tsx b/frontend/src/components/InternalRedirect/InternalRedirect.tsx new file mode 100644 index 000000000..c6b00ad2e --- /dev/null +++ b/frontend/src/components/InternalRedirect/InternalRedirect.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Redirect, RouteComponentProps } from 'react-router-dom'; + +// this component is a route, so it will receive the route props +interface InternalRedirectProps extends RouteComponentProps {} + +export const InternalRedirect: React.FC = (props) => { + const { path } = props.match.params as { path: string }; + const { search } = props.location; + + // Redirect to the experiment path + return ; +} \ No newline at end of file diff --git a/frontend/src/config.ts b/frontend/src/config.ts index b3461f5f6..d91b37c9f 100644 --- a/frontend/src/config.ts +++ b/frontend/src/config.ts @@ -31,6 +31,7 @@ export const URLS = { experiment: "/:slug", experimentCollectionAbout: "/collection/:slug/about", experimentCollection: "/collection/:slug", + internalRedirect: "/redirect/:path", reloadParticipant: "/participant/reload/:id/:hash", theme: "/theme/:id", AMLHome: