swap text on back button, add UT, fix missing return types (#766)

Author: kamenbachvarov-nhs

app/src/components/blocks/_downloadReport/downloadReportCompleteStage/DownloadReportCompleteStage.test.tsx

@@ -23,5 +23,6 @@ describe('DownloadReportCompleteStage', () => {
 
         expect(screen.getByTestId('home-button')).toBeInTheDocument();
         expect(screen.getByTestId('back-to-download-page-button')).toBeInTheDocument();
+        expect(screen.getByText('Go to home')).toBeInTheDocument();
     });
 });

app/src/components/blocks/_downloadReport/downloadReportCompleteStage/DownloadReportCompleteStage.tsx

@@ -3,12 +3,13 @@ import { routes } from '../../../../types/generic/routes';
 import { Button, Card } from 'nhsuk-react-components';
 import { getFormattedDate } from '../../../../helpers/utils/formatDate';
 import useTitle from '../../../../helpers/hooks/useTitle';
+import { JSX } from 'react';
 
 type Props = {
     report: ReportData;
 };
 
-const DownloadReportCompleteStage = (props: Props) => {
+const DownloadReportCompleteStage = (props: Props): JSX.Element => {
     useTitle({ pageTitle: 'Download complete' });
     return (
         <div className="report_download-complete">
@@ -37,7 +38,7 @@ const DownloadReportCompleteStage = (props: Props) => {
             </p>
 
             <Button href={routes.HOME} className="mr-6" data-testid="home-button">
-                Return to Home
+                Go to home
             </Button>
             <Button
                 secondary

app/src/components/blocks/_downloadReport/downloadReportSelectStage/DownloadReportSelectStage.test.tsx

@@ -1,13 +1,13 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import { act } from 'react';
+import { act, JSX } from 'react';
 import DownloadReportSelectStage from './DownloadReportSelectStage';
 import { getReportByType, REPORT_TYPE } from '../../../../types/generic/reports';
 import { LinkProps } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { routes } from '../../../../types/generic/routes';
 import downloadReport from '../../../../helpers/requests/downloadReport';
-import { beforeEach, describe, expect, it, vi, MockedFunction } from 'vitest';
+import { beforeEach, describe, expect, it, vi, MockedFunction, Mock } from 'vitest';
 
 const mockDownloadReport = downloadReport as MockedFunction<typeof downloadReport>;
 
@@ -16,15 +16,15 @@ vi.mock('react-router-dom', async () => {
     const actual = await vi.importActual('react-router-dom');
     return {
         ...actual,
-        Link: (props: LinkProps) => <a {...props} role="link" />,
-        useNavigate: () => mockedUseNavigate,
+        Link: (props: LinkProps): JSX.Element => <a {...props} role="link" />,
+        useNavigate: (): Mock => mockedUseNavigate,
     };
 });
 vi.mock('../../../../helpers/hooks/useBaseAPIUrl');
 vi.mock('../../../../helpers/hooks/useBaseAPIHeaders');
 vi.mock('../../../../helpers/requests/downloadReport');
 vi.mock('../../../../helpers/utils/isLocal', () => ({
-    isMock: () => false,
+    isMock: (): boolean => false,
 }));
 
 describe('DownloadReportSelectStage', () => {
@@ -47,6 +47,7 @@ describe('DownloadReportSelectStage', () => {
                 ).toBeInTheDocument();
             });
             expect(screen.queryByTestId('error-notification-banner')).not.toBeInTheDocument();
+            expect(screen.getByText('Go to home')).toBeInTheDocument();
         });
 
         it('should render error notification when download fails', async () => {

app/src/components/blocks/_downloadReport/downloadReportSelectStage/DownloadReportSelectStage.tsx

@@ -7,7 +7,7 @@ import useBaseAPIUrl from '../../../../helpers/hooks/useBaseAPIUrl';
 import useBaseAPIHeaders from '../../../../helpers/hooks/useBaseAPIHeaders';
 import { AxiosError } from 'axios';
 import { isMock } from '../../../../helpers/utils/isLocal';
-import { ReactNode, useRef } from 'react';
+import { JSX, ReactNode, useRef } from 'react';
 import NotificationBanner from '../../../layout/notificationBanner/NotificationBanner';
 import SpinnerButton from '../../../generic/spinnerButton/SpinnerButton';
 import React from 'react';
@@ -16,19 +16,19 @@ type Props = {
     report: ReportData;
 };
 
-const DownloadReportSelectStage = (props: Props) => {
+const DownloadReportSelectStage = (props: Props): JSX.Element => {
     const baseUrl = useBaseAPIUrl();
     const baseHeaders = useBaseAPIHeaders();
     const navigate = useNavigate();
     const [downloading, setDownloading] = React.useState(false);
     const [downloadError, setDownloadError] = React.useState<ReactNode>(null);
     const scrollToRef = useRef<HTMLDivElement>(null);
 
-    const handleSuccess = () => {
+    const handleSuccess = (): void => {
         navigate(`${routeChildren.REPORT_DOWNLOAD_COMPLETE}?reportType=${props.report.reportType}`);
     };
 
-    const noDataContent = () => {
+    const noDataContent = (): JSX.Element => {
         return (
             <>
                 <h3>Report could not be created</h3>
@@ -50,7 +50,7 @@ const DownloadReportSelectStage = (props: Props) => {
         );
     };
 
-    const serverErrorContent = () => {
+    const serverErrorContent = (): JSX.Element => {
         return (
             <>
                 <h3>Download failed</h3>
@@ -70,7 +70,7 @@ const DownloadReportSelectStage = (props: Props) => {
         );
     };
 
-    const handleError = (errorCode: number) => {
+    const handleError = (errorCode: number): void => {
         if (errorCode === 403) {
             navigate(routes.SESSION_EXPIRED);
             return;
@@ -81,7 +81,7 @@ const DownloadReportSelectStage = (props: Props) => {
         scrollToRef.current?.scrollIntoView();
     };
 
-    const handleDownload = async (fileType: string) => {
+    const handleDownload = async (fileType: string): Promise<void> => {
         setDownloading(true);
 
         try {
@@ -100,7 +100,7 @@ const DownloadReportSelectStage = (props: Props) => {
         setDownloading(false);
     };
 
-    const DownloadLinks = (fileTypes: FileTypeData[]) => {
+    const DownloadLinks = (fileTypes: FileTypeData[]): JSX.Element | JSX.Element[] => {
         if (downloading) {
             return (
                 <SpinnerButton id="download-spinner" status="Downloading report" disabled={true} />
@@ -113,7 +113,7 @@ const DownloadReportSelectStage = (props: Props) => {
                     data-testid={`download-${fileType.extension}-button`}
                     secondary
                     className="mb-5"
-                    onClick={async () => {
+                    onClick={async (): Promise<void> => {
                         handleDownload(fileType.extension);
                     }}
                     key={fileType.extension}
@@ -132,7 +132,7 @@ const DownloadReportSelectStage = (props: Props) => {
                 href={routes.HOME}
                 className="mb-5"
             >
-                Return to Home
+                Go to home
             </BackLink>
             {downloadError && (
                 <NotificationBanner

app/src/pages/patientSearchPage/PatientSearchPage.test.tsx

@@ -57,6 +57,7 @@ describe('PatientSearchPage', () => {
                     screen.getByText('A 10-digit number, for example, 485 777 3456'),
                 ).toBeInTheDocument();
                 expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument();
+                expect(screen.getByText('Go to home')).toBeInTheDocument();
             },
         );
         it.skip("displays a loading spinner when the patients details are being requested when user role is '%s'", async (role) => {

app/src/pages/patientSearchPage/PatientSearchPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { JSX, useState } from 'react';
 import { routes } from '../../types/generic/routes';
 import { FieldValues, useForm } from 'react-hook-form';
 import ErrorBox from '../../components/layout/errorBox/ErrorBox';
@@ -26,7 +26,7 @@ import { REPOSITORY_ROLE } from '../../types/generic/authRole';
 
 export const incorrectFormatMessage = "Enter patient's 10 digit NHS number";
 
-function PatientSearchPage() {
+function PatientSearchPage(): JSX.Element {
     const [, setPatientDetails] = usePatientDetailsContext();
     const [submissionState, setSubmissionState] = useState<SEARCH_STATES>(SEARCH_STATES.IDLE);
     const [statusCode, setStatusCode] = useState<null | number>(null);
@@ -49,7 +49,7 @@ function PatientSearchPage() {
     const isError = (statusCode && statusCode >= 500) || !inputError;
     const baseUrl = useBaseAPIUrl();
     const baseHeaders = useBaseAPIHeaders();
-    const handleSuccess = (patientDetails: PatientDetails) => {
+    const handleSuccess = (patientDetails: PatientDetails): void => {
         setPatientDetails(patientDetails);
         setSubmissionState(SEARCH_STATES.SUCCEEDED);
         navigate(routes.VERIFY_PATIENT);
@@ -59,12 +59,12 @@ function PatientSearchPage() {
     const pageTitle = 'Search for a patient';
     useTitle({ pageTitle: pageTitle });
 
-    const setFailedSubmitState = (statusCode: number | null) => {
+    const setFailedSubmitState = (statusCode: number | null): void => {
         setStatusCode(statusCode);
         setSubmissionState(SEARCH_STATES.FAILED);
     };
 
-    const handleSearch = async (data: FieldValues) => {
+    const handleSearch = async (data: FieldValues): Promise<void> => {
         setSubmissionState(SEARCH_STATES.SEARCHING);
         setInputError(null);
         setStatusCode(null);
@@ -117,7 +117,7 @@ function PatientSearchPage() {
             setFailedSubmitState(error.response?.status ?? null);
         }
     };
-    const handleError = (fields: FieldValues) => {
+    const handleError = (fields: FieldValues): void => {
         const errorMessages = Object.entries(fields).map(
             ([k, v]: [string, { message: string }]) => v.message,
         );
@@ -126,7 +126,7 @@ function PatientSearchPage() {
     return (
         <>
             <BackLink asElement="a" href={routes.HOME}>
-                Return to Home
+                Go to home
             </BackLink>
             {(submissionState === SEARCH_STATES.FAILED ||
                 inputError === incorrectFormatMessage) && (