Prmdr 452: On-screen back button fix for the search screens (#150)

nhsconnect · Nov 21, 2023 · 502862c · 502862c
1 parent 1bb30b6
commit 502862c
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 4 deletions.
diff --git a/app/src/components/generic/backButton/BackButton.test.tsx b/app/src/components/generic/backButton/BackButton.test.tsx
@@ -3,9 +3,12 @@ import { render, screen, waitFor } from '@testing-library/react';
 import * as ReactRouter from 'react-router';
 import userEvent from '@testing-library/user-event';
 import BackButton from './BackButton';
+import { routes } from '../../../types/generic/routes';
+import { endpoints } from '../../../types/generic/endpoints';
+import { useBaseAPIUrl } from '../../../providers/configProvider/ConfigProvider';
 
 describe('BackButton', () => {
-    it('navigates to previous page when clicking the back button', async () => {
+    it('navigates to previous page when clicking the back buttonand not on the search pages', async () => {
         const history = createMemoryHistory({
             initialEntries: ['/', '/example'],
             initialIndex: 1,
@@ -23,4 +26,64 @@ describe('BackButton', () => {
             expect(history.location.pathname).toBe('/');
         });
     });
+
+    it('calls the login handler when clicking the back button on the upload search page', async () => {
+        const test_location_prefix = useBaseAPIUrl();
+
+        const history = createMemoryHistory({
+            initialEntries: ['/', '/example'],
+            initialIndex: 1,
+        });
+
+        //Override the default window.location property as it is not configurable so can't be mocked by jest
+        Object.defineProperty(window, 'location', {
+            configurable: true,
+            enumerable: true,
+            value: new URL(window.location.href),
+        });
+
+        window.location.replace = jest.fn();
+
+        render(
+            <ReactRouter.Router navigator={history} location={routes.UPLOAD_SEARCH}>
+                <BackButton />
+            </ReactRouter.Router>,
+        );
+
+        userEvent.click(screen.getByText('Back'));
+
+        await waitFor(() => {
+            expect(window.location.replace).toBeCalledWith(test_location_prefix + endpoints.LOGIN);
+        });
+    });
+
+    it('calls the login handler when clicking the back button on the download search page', async () => {
+        const test_location_prefix = useBaseAPIUrl();
+
+        const history = createMemoryHistory({
+            initialEntries: ['/', '/example'],
+            initialIndex: 1,
+        });
+
+        //Override the default window.location property as it is not configurable so can't be mocked by jest
+        Object.defineProperty(window, 'location', {
+            configurable: true,
+            enumerable: true,
+            value: new URL(window.location.href),
+        });
+
+        window.location.replace = jest.fn();
+
+        render(
+            <ReactRouter.Router navigator={history} location={routes.DOWNLOAD_SEARCH}>
+                <BackButton />
+            </ReactRouter.Router>,
+        );
+
+        userEvent.click(screen.getByText('Back'));
+
+        await waitFor(() => {
+            expect(window.location.replace).toBeCalledWith(test_location_prefix + endpoints.LOGIN);
+        });
+    });
 });
diff --git a/app/src/components/generic/backButton/BackButton.tsx b/app/src/components/generic/backButton/BackButton.tsx
@@ -1,14 +1,26 @@
 import { BackLink } from 'nhsuk-react-components';
 import React from 'react';
 import type { MouseEvent } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate, useLocation } from 'react-router';
+import { endpoints } from '../../../types/generic/endpoints';
+import { useBaseAPIUrl } from '../../../providers/configProvider/ConfigProvider';
+import { routes } from '../../../types/generic/routes';
 
 const BackButton = () => {
     const navigate = useNavigate();
+    const location = useLocation();
+    const baseAPIUrl = useBaseAPIUrl();
 
     const onBack = (e: MouseEvent<HTMLAnchorElement>) => {
         e.preventDefault();
-        navigate(-1);
+        if (
+            location.pathname === routes.UPLOAD_SEARCH ||
+            location.pathname === routes.DOWNLOAD_SEARCH
+        ) {
+            window.location.replace(`${baseAPIUrl}${endpoints.LOGIN}`);
+        } else {
+            navigate(-1);
+        }
     };
 
     return (

diff --git a/app/src/pages/patientSearchPage/PatientSearchPage.test.tsx b/app/src/pages/patientSearchPage/PatientSearchPage.test.tsx
@@ -43,7 +43,7 @@ describe('PatientSearchPage', () => {
             },
         );
         it.each(authorisedRoles)(
-            "rdisplays a loading spinner when the patients details are being requested when user role is '%s'",
+            "displays a loading spinner when the patients details are being requested when user role is '%s'",
             async (role) => {
                 mockedUseRole.mockReturnValue(role);