PRMDR - 759 unchecked radio buttons (#352)

* remove default check on radio button
nhsconnect · Apr 26, 2024 · 5d4cf7b · 5d4cf7b
1 parent a3dfb0f
commit 5d4cf7b
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 25 deletions.
diff --git a/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.test.tsx b/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.test.tsx
@@ -68,21 +68,34 @@ describe('DeleteDocumentsStage', () => {
                 expect(screen.getByText(patientName)).toBeInTheDocument();
                 expect(screen.getByText(`Date of birth: ${dob}`)).toBeInTheDocument();
                 expect(screen.getByText(/NHS number/)).toBeInTheDocument();
-                expect(screen.getByRole('radio', { name: 'Yes' })).toBeInTheDocument();
-                expect(screen.getByRole('radio', { name: 'No' })).toBeInTheDocument();
+                const yesButton = screen.getByRole('radio', { name: 'Yes' });
+                expect(yesButton).toBeInTheDocument();
+                expect(yesButton).not.toBeChecked();
+                const noButton = screen.getByRole('radio', { name: 'No' });
+                expect(noButton).toBeInTheDocument();
+                expect(noButton).not.toBeChecked();
                 expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
+                expect(screen.queryByTestId('delete-error-box')).not.toBeInTheDocument();
+                expect(screen.queryByTestId('delete-button-uncheck-message')).toHaveClass(
+                    'nhsuk-error-message-hidden',
+                );
             },
         );
 
         it('renders DocumentSearchResults when No is selected and Continue clicked, when user role is GP Admin', async () => {
             mockedUseRole.mockReturnValue(REPOSITORY_ROLE.GP_ADMIN);
 
             renderComponent(DOCUMENT_TYPE.LLOYD_GEORGE);
+            const noButton = screen.getByRole('radio', { name: 'No' });
+
+            expect(noButton).not.toBeChecked();
 
             act(() => {
-                userEvent.click(screen.getByRole('radio', { name: 'No' }));
+                userEvent.click(noButton);
+                expect(noButton).toBeChecked();
                 userEvent.click(screen.getByRole('button', { name: 'Continue' }));
             });
+            expect(screen.queryByTestId('delete-error-box')).not.toBeInTheDocument();
 
             await waitFor(() => {
                 expect(mockSetStage).toHaveBeenCalledWith(LG_RECORD_STAGE.RECORD);
@@ -193,6 +206,26 @@ describe('DeleteDocumentsStage', () => {
                 );
             });
         });
+
+        it('renders a error box when none of the options are checked', async () => {
+            mockedUseRole.mockReturnValue(REPOSITORY_ROLE.GP_ADMIN);
+
+            renderComponent(DOCUMENT_TYPE.LLOYD_GEORGE);
+            const noButton = screen.getByRole('radio', { name: 'No' });
+            const yesButton = screen.getByRole('radio', { name: 'Yes' });
+
+            expect(noButton).not.toBeChecked();
+            expect(yesButton).not.toBeChecked();
+
+            act(() => {
+                userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+            });
+            expect(await screen.findByText('You must select an option')).toBeInTheDocument();
+            expect(await screen.findByTestId('delete-button-uncheck-message')).toBeInTheDocument();
+            expect(screen.queryByTestId('delete-button-uncheck-message')).not.toHaveClass(
+                'nhsuk-error-message-hidden',
+            );
+        });
     });
 });
 

diff --git a/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.tsx b/app/src/components/blocks/deleteDocumentsStage/DeleteDocumentsStage.tsx
@@ -23,6 +23,7 @@ import { errorToParams } from '../../../helpers/utils/errorToParams';
 import { isMock } from '../../../helpers/utils/isLocal';
 import useConfig from '../../../helpers/hooks/useConfig';
 import useTitle from '../../../helpers/hooks/useTitle';
+import ErrorBox from '../../layout/errorBox/ErrorBox';
 
 export type Props = {
     docType: DOCUMENT_TYPE;
@@ -55,6 +56,7 @@ function DeleteDocumentsStage({
     const config = useConfig();
     const nhsNumber: string = patientDetails?.nhsNumber ?? '';
     const formattedNhsNumber = formatNhsNumber(nhsNumber);
+    const [showNoOptionSelectedMessage, setShowNoOptionSelectedMessage] = useState<boolean>(false);
 
     const dob: string = patientDetails?.birthDate
         ? getFormattedDate(new Date(patientDetails.birthDate))
@@ -120,6 +122,8 @@ function DeleteDocumentsStage({
                 await handleYesOption();
             } else if (fieldValues.deleteDocs === DELETE_DOCUMENTS_OPTION.NO) {
                 handleNoOption();
+            } else {
+                setShowNoOptionSelectedMessage(true);
             }
         }
     };
@@ -129,33 +133,57 @@ function DeleteDocumentsStage({
         <>
             <BackLink onClick={handleNoOption}>Go Back</BackLink>
             {deletionStage === SUBMISSION_STATE.FAILED && <ServiceError />}
+            {showNoOptionSelectedMessage && (
+                <ErrorBox
+                    messageTitle={'There is a problem '}
+                    messageLinkBody={'You must select an option'}
+                    errorBoxSummaryId={'error-box-summary'}
+                    errorInputLink={'#delete-docs'}
+                    dataTestId={'delete-error-box'}
+                />
+            )}
             <form onSubmit={handleSubmit(submit)}>
-                <Fieldset>
+                <Fieldset id="radio-selection">
                     <Fieldset.Legend isPageHeading>
                         Are you sure you want to permanently delete files for:
                     </Fieldset.Legend>
-                    <p>{patientInfo}</p>
-                    <Radios id="delete-docs">
-                        <Radios.Radio
-                            value={DELETE_DOCUMENTS_OPTION.YES}
-                            inputRef={deleteDocsRef}
-                            {...radioProps}
-                            id="yes-radio-button"
-                            data-testid="yes-radio-btn"
-                            defaultChecked
-                        >
-                            Yes
-                        </Radios.Radio>
-                        <Radios.Radio
-                            value={DELETE_DOCUMENTS_OPTION.NO}
-                            inputRef={deleteDocsRef}
-                            {...radioProps}
-                            id="no-radio-button"
-                            data-testid="no-radio-btn"
+                    <div>{patientInfo}</div>
+                    <div
+                        className={`nhsuk-form-group nhsuk-form-group--error${
+                            showNoOptionSelectedMessage ? '' : '-hidden'
+                        }`}
+                    >
+                        <span
+                            className={`nhsuk-error-message${
+                                showNoOptionSelectedMessage ? '' : '-hidden'
+                            }`}
+                            id="radio-error"
+                            data-testid="delete-button-uncheck-message"
                         >
-                            No
-                        </Radios.Radio>
-                    </Radios>
+                            Select whether you want to permanently delete these patient files
+                            <span className="nhsuk-u-visually-hidden">Error:</span>
+                        </span>
+                        <Radios id="delete-docs">
+                            <Radios.Radio
+                                value={DELETE_DOCUMENTS_OPTION.YES}
+                                inputRef={deleteDocsRef}
+                                {...radioProps}
+                                id="yes-radio-button"
+                                data-testid="yes-radio-btn"
+                            >
+                                Yes
+                            </Radios.Radio>
+                            <Radios.Radio
+                                value={DELETE_DOCUMENTS_OPTION.NO}
+                                inputRef={deleteDocsRef}
+                                {...radioProps}
+                                id="no-radio-button"
+                                data-testid="no-radio-btn"
+                            >
+                                No
+                            </Radios.Radio>
+                        </Radios>
+                    </div>
                 </Fieldset>
                 {deletionStage === SUBMISSION_STATE.PENDING ? (
                     <SpinnerButton id="delete-docs-spinner" status="Deleting..." disabled={true} />