Merge pull request #306 from NHSDigital/feature/CCM-8603-prevent-dbl-click

bhansell1 · web-flow · commit fdb414b7fc2a · 2025-02-18T15:45:10.000Z
CCM-8603: prevent dbl click
diff --git a/frontend/src/__tests__/app/create-and-submit-templates/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/create-and-submit-templates/__snapshots__/page.test.tsx.snap
@@ -63,7 +63,6 @@ exports[`matches the snapshot 1`] = `
         <a
           aria-disabled="false"
           class="nhsuk-button"
-          data-testid="link-button"
           draggable="false"
           href="/templates/manage-templates"
           role="button"
diff --git a/frontend/src/__tests__/app/manage-templates/page.test.tsx b/frontend/src/__tests__/app/manage-templates/page.test.tsx
@@ -35,12 +35,12 @@ describe('ManageTemplatesPage', () => {
 
     expect(screen.getByTestId('page-content-wrapper')).toBeInTheDocument();
     expect(screen.getByTestId('page-heading')).toBeInTheDocument();
-    expect(screen.getByTestId('link-button')).toBeInTheDocument();
-    expect(screen.getByTestId('link-button')).toHaveAttribute(
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveAttribute(
       'href',
       manageTemplatesContent.createTemplateButton.url
     );
-    expect(screen.getByTestId('link-button')).toHaveTextContent(
+    expect(screen.getByRole('button')).toHaveTextContent(
       manageTemplatesContent.createTemplateButton.text
     );
 
@@ -52,12 +52,12 @@ describe('ManageTemplatesPage', () => {
 
     expect(screen.getByTestId('page-content-wrapper')).toBeInTheDocument();
     expect(screen.getByTestId('page-heading')).toBeInTheDocument();
-    expect(screen.getByTestId('link-button')).toBeInTheDocument();
-    expect(screen.getByTestId('link-button')).toHaveAttribute(
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveAttribute(
       'href',
       manageTemplatesContent.createTemplateButton.url
     );
-    expect(screen.getByTestId('link-button')).toHaveTextContent(
+    expect(screen.getByRole('button')).toHaveTextContent(
       manageTemplatesContent.createTemplateButton.text
     );
 
diff --git a/frontend/src/__tests__/components/molecules/NHSNotifyButton.test.tsx b/frontend/src/__tests__/components/molecules/NHSNotifyButton.test.tsx
@@ -1,25 +1,60 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
-import { ButtonType } from '@atoms/NHSNotifyButton/button.types';
 
-const buttonProps: ButtonType = {
-  children: 'Button text',
-};
-
-describe('Footer component', () => {
+describe('NHS Notify button', () => {
   it('renders component correctly as a button', () => {
-    render(<NHSNotifyButton {...buttonProps} />);
+    render(
+      <NHSNotifyButton data-testid='button'> Button text</NHSNotifyButton>
+    );
 
-    expect(screen.getByTestId('link-button')).toBeInTheDocument();
-    expect(screen.getByTestId('link-button')).toHaveTextContent('Button text');
+    expect(screen.getByTestId('button')).toBeInTheDocument();
+    expect(screen.getByTestId('button')).toHaveTextContent('Button text');
   });
 
   it('renders component correctly as a link button', () => {
-    const linkButtonProps: ButtonType = { ...buttonProps, href: '#' };
-    render(<NHSNotifyButton {...linkButtonProps} />);
+    render(
+      <NHSNotifyButton data-testid='link-button' href='#'>
+        {' '}
+        Button text
+      </NHSNotifyButton>
+    );
 
     expect(screen.getByTestId('link-button')).toBeInTheDocument();
     expect(screen.getByTestId('link-button')).toHaveTextContent('Button text');
     expect(screen.getByTestId('link-button')).toHaveAttribute('href', '#');
   });
+
+  it('debounces multiple clicks', async () => {
+    const onClick = jest.fn();
+
+    render(
+      <NHSNotifyButton data-testid='button' onClick={onClick}>
+        {' '}
+        Button text
+      </NHSNotifyButton>
+    );
+
+    const button = screen.getByTestId('button');
+
+    fireEvent.click(button);
+    fireEvent.click(button);
+    fireEvent.click(button);
+    fireEvent.click(button);
+    fireEvent.click(button);
+    fireEvent.click(button);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('default onClick does nothing', async () => {
+    const container = render(
+      <NHSNotifyButton data-testid='button'>Button text</NHSNotifyButton>
+    );
+
+    const button = screen.getByTestId('button');
+
+    fireEvent.click(button);
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
 });
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/NHSNotifyButton.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/NHSNotifyButton.test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NHS Notify button default onClick does nothing 1`] = `
+<DocumentFragment>
+  <button
+    aria-disabled="false"
+    class="nhsuk-button"
+    data-testid="button"
+    type="submit"
+  >
+    Button text
+  </button>
+</DocumentFragment>
+`;
diff --git a/frontend/src/components/atoms/NHSNotifyButton/NHSNotifyButton.tsx b/frontend/src/components/atoms/NHSNotifyButton/NHSNotifyButton.tsx
@@ -1,15 +1,20 @@
 'use client';
 
 import { Button } from 'nhsuk-react-components';
-import { ButtonType } from './button.types';
 
 export function NHSNotifyButton({
   children,
   href,
   ...rest
-}: ButtonType & React.ComponentProps<typeof Button>) {
+}: React.ComponentProps<typeof Button>) {
   return (
-    <Button {...rest} href={href} data-testid='link-button'>
+    <Button
+      preventDoubleClick
+      debounceTimeout={10_000}
+      onClick={() => {}}
+      href={href}
+      {...rest}
+    >
       {children}
     </Button>
   );
diff --git a/frontend/src/components/forms/DeleteTemplate/DeleteTemplate.tsx b/frontend/src/components/forms/DeleteTemplate/DeleteTemplate.tsx
@@ -4,9 +4,9 @@ import { FC } from 'react';
 import { useFormState } from 'react-dom';
 import { ChannelTemplate } from 'nhs-notify-web-template-management-utils';
 import { deleteTemplatePageContent } from '@content/content';
-import { Button } from 'nhsuk-react-components';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
 import { NHSNotifyFormWrapper } from '@molecules/NHSNotifyFormWrapper/NHSNotifyFormWrapper';
+import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 import {
   deleteTemplateYesAction,
   deleteTemplateNoAction,
@@ -37,14 +37,16 @@ export const DeleteTemplate: FC<DeleteTemplateProps> = ({ template }) => {
               style: { display: 'inline' },
             }}
           >
-            <Button secondary>{noButtonText}</Button>
+            <NHSNotifyButton secondary>{noButtonText}</NHSNotifyButton>
           </NHSNotifyFormWrapper>
           <NHSNotifyFormWrapper
             action={action}
             formAttributes={{ style: { display: 'inline' } }}
             formId='delete-template-yes'
           >
-            <Button className='nhsuk-button--warning'>{yesButtonText}</Button>
+            <NHSNotifyButton className='nhsuk-button--warning'>
+              {yesButtonText}
+            </NHSNotifyButton>
           </NHSNotifyFormWrapper>
         </div>
       </div>
diff --git a/frontend/src/components/forms/EmailTemplateForm/EmailTemplateForm.tsx b/frontend/src/components/forms/EmailTemplateForm/EmailTemplateForm.tsx
@@ -7,7 +7,6 @@ import {
   HintText,
   Label,
   Textarea,
-  Button,
   BackLink,
 } from 'nhsuk-react-components';
 import { getBasePath } from '@utils/get-base-path';
@@ -28,6 +27,7 @@ import { FormSection } from '@molecules/FormSection/FormSection';
 import { useTextInput } from '@hooks/use-text-input.hook';
 import { ChannelGuidance } from '@molecules/ChannelGuidance/ChannelGuidance';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
+import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 
 export const EmailTemplateForm: FC<
   PageComponentProps<EmailTemplate | Draft<EmailTemplate>>
@@ -133,9 +133,12 @@ export const EmailTemplateForm: FC<
                   data-testid='emailTemplateMessage-input'
                 />
               </FormSection>
-              <Button type='submit' id='create-email-template-submit-button'>
+              <NHSNotifyButton
+                type='submit'
+                id='create-email-template-submit-button'
+              >
                 {buttonText}
-              </Button>
+              </NHSNotifyButton>
             </NHSNotifyFormWrapper>
           </div>
           <div className='nhsuk-grid-column-one-third'>
diff --git a/frontend/src/components/forms/NhsAppTemplateForm/NhsAppTemplateForm.tsx b/frontend/src/components/forms/NhsAppTemplateForm/NhsAppTemplateForm.tsx
@@ -7,7 +7,6 @@ import {
   HintText,
   Label,
   Textarea,
-  Button,
   BackLink,
 } from 'nhsuk-react-components';
 import { getBasePath } from '@utils/get-base-path';
@@ -28,6 +27,7 @@ import { useTextInput } from '@hooks/use-text-input.hook';
 import { useJsEnabledStyle } from '@hooks/use-js-enabled-style.hook';
 import { ChannelGuidance } from '@molecules/ChannelGuidance/ChannelGuidance';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
+import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 
 export const NhsAppTemplateForm: FC<
   PageComponentProps<NHSAppTemplate | Draft<NHSAppTemplate>>
@@ -103,9 +103,9 @@ export const NhsAppTemplateForm: FC<
                 {nhsAppTemplateMessage.length}
                 {characterCountText}
               </p>
-              <Button type='submit' id='create-nhs-app-template-submit-button'>
+              <NHSNotifyButton id='create-nhs-app-template-submit-button'>
                 {buttonText}
-              </Button>
+              </NHSNotifyButton>
             </NHSNotifyFormWrapper>
           </div>
           <div className='nhsuk-grid-column-one-third'>
diff --git a/frontend/src/components/forms/SmsTemplateForm/SmsTemplateForm.tsx b/frontend/src/components/forms/SmsTemplateForm/SmsTemplateForm.tsx
@@ -6,7 +6,6 @@ import { MessageFormatting } from '@molecules/MessageFormatting/MessageFormattin
 import { NHSNotifyFormWrapper } from '@molecules/NHSNotifyFormWrapper/NHSNotifyFormWrapper';
 import { Personalisation } from '@molecules/Personalisation/Personalisation';
 import {
-  Button,
   HintText,
   Label,
   Textarea,
@@ -28,6 +27,7 @@ import { createSmsTemplatePageContent as content } from '@content/content';
 import { MAX_SMS_CHARACTER_LENGTH } from '@utils/constants';
 import { ChannelGuidance } from '@molecules/ChannelGuidance/ChannelGuidance';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
+import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 import { processFormActions } from './server-action';
 import { calculateHowManySmsMessages } from './view-actions';
 
@@ -111,9 +111,9 @@ export const SmsTemplateForm: FC<
                   {content.smsPricingText}
                 </a>
               </p>
-              <Button id='create-sms-template-submit-button'>
+              <NHSNotifyButton id='create-sms-template-submit-button'>
                 {content.buttonText}
-              </Button>
+              </NHSNotifyButton>
             </NHSNotifyFormWrapper>
           </div>
           <div className='nhsuk-grid-column-one-third'>
diff --git a/frontend/src/components/forms/SubmitTemplate/SubmitTemplate.tsx b/frontend/src/components/forms/SubmitTemplate/SubmitTemplate.tsx
@@ -1,13 +1,14 @@
 'use client';
 
 import { FC } from 'react';
-import { WarningCallout, Button } from 'nhsuk-react-components';
+import { WarningCallout } from 'nhsuk-react-components';
 import { SubmitTemplatePageComponentProps } from 'nhs-notify-web-template-management-utils';
 import { submitTemplateContent } from '@content/content';
 import { NHSNotifyFormWrapper } from '@molecules/NHSNotifyFormWrapper/NHSNotifyFormWrapper';
 import { getBasePath } from '@utils/get-base-path';
 import { submitTemplate } from '@forms/SubmitTemplate/server-action';
 import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
+import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 
 export const SubmitTemplate: FC<SubmitTemplatePageComponentProps> = ({
   templateName,
@@ -60,15 +61,17 @@ export const SubmitTemplate: FC<SubmitTemplatePageComponentProps> = ({
               value={templateId}
               readOnly
             />
-            <Button
+            <NHSNotifyButton
               secondary
               id='go-back-button'
               className='nhsuk-u-margin-right-3'
               href={`${getBasePath()}/${goBackPath}/${templateId}`}
             >
               {goBackButtonText}
-            </Button>
-            <Button id='submit-template-button'>{buttonText}</Button>
+            </NHSNotifyButton>
+            <NHSNotifyButton id='submit-template-button'>
+              {buttonText}
+            </NHSNotifyButton>
           </NHSNotifyFormWrapper>
         </div>
       </div>
diff --git a/frontend/src/components/molecules/NHSNotifyRadioButtonForm/NHSNotifyRadioButtonForm.tsx b/frontend/src/components/molecules/NHSNotifyRadioButtonForm/NHSNotifyRadioButtonForm.tsx
@@ -1,6 +1,7 @@
-import { Radios, Fieldset, Button } from 'nhsuk-react-components';
+import { Radios, Fieldset } from 'nhsuk-react-components';
 import { FormState } from 'nhs-notify-web-template-management-utils';
 import { NHSNotifyFormWrapper } from '@molecules/NHSNotifyFormWrapper/NHSNotifyFormWrapper';
+import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 
 export type NHSNotifyRadioButtonFormProps = {
   formId: string;
@@ -71,12 +72,12 @@ export const NHSNotifyRadioButtonForm = ({
         ))}
       </Radios>
     </Fieldset>
-    <Button
+    <NHSNotifyButton
       type='submit'
       data-testid='submit-button'
       id={`${formId}-submit-button`}
     >
       {buttonText}
-    </Button>
+    </NHSNotifyButton>
   </NHSNotifyFormWrapper>
 );
