Fix confirm button resets in confirmation modal

mongodb · Jun 1, 2024 · 2ca0752 · 2ca0752
1 parent 5b15616
commit 2ca0752
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 86 deletions.
diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
@@ -8,6 +8,8 @@ import {
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 
+import { LGIDS_MODAL } from '@leafygreen-ui/modal';
+
 import { LGIDS_CONFIRMATION_MODAL } from '../constants';
 import ConfirmationModal from '..';
 
@@ -238,90 +240,76 @@ describe('packages/confirmation-modal', () => {
       expect(confirmationButton).toHaveAttribute('aria-disabled', 'true');
     });
 
-    describe('resets the confirm button when the modal closes', () => {
-      test('on confirm', async () => {
-        const { findByTestId, getByLabelText, getByRole, rerender } =
-          renderModal({
-            open: true,
-            requiredInputText: 'Confirm',
-          });
-
-        const modal = getByRole('dialog');
-
-        const confirmationButton = await findByTestId(
-          LGIDS_CONFIRMATION_MODAL.confirm,
-        );
-        expect(confirmationButton).toHaveAttribute('aria-disabled', 'true');
-
-        let textInput = getByLabelText('Type "Confirm" to confirm your action');
-
-        fireEvent.change(textInput, { target: { value: 'Confirm' } });
-        expect(confirmationButton).not.toHaveAttribute('aria-disabled', 'true');
-
-        userEvent.click(confirmationButton as HTMLButtonElement);
-
-        await waitForElementToBeRemoved(modal);
-
-        rerender(
-          <ConfirmationModal
-            title="Title text"
-            open={true}
-            requiredInputText="Confirm"
-          >
-            Content text
-          </ConfirmationModal>,
-        );
-
-        textInput = getByLabelText('Type "Confirm" to confirm your action');
-
-        expect(textInput).toHaveValue('');
-        expect(confirmationButton).toHaveAttribute('aria-disabled', 'true');
-      });
-
-      test('on cancel', async () => {
-        const { findByTestId, getByLabelText, getByRole, rerender } =
-          renderModal({
-            open: true,
-            requiredInputText: 'Confirm',
-          });
-
-        const modal = getByRole('dialog');
-
-        const confirmationButton = await findByTestId(
-          LGIDS_CONFIRMATION_MODAL.confirm,
-        );
-        expect(confirmationButton).toHaveAttribute('aria-disabled', 'true');
-
-        const cancelButton = await findByTestId(
-          LGIDS_CONFIRMATION_MODAL.cancel,
-        );
-
-        let textInput = getByLabelText('Type "Confirm" to confirm your action');
-
-        fireEvent.change(textInput, { target: { value: 'Confirm' } });
-        expect(confirmationButton).not.toHaveAttribute('aria-disabled', 'true');
-
-        userEvent.click(cancelButton as HTMLButtonElement);
-
-        await waitForElementToBeRemoved(modal);
-
-        rerender(
-          <ConfirmationModal
-            title="Title text"
-            buttonText="Confirm"
-            open={true}
-            requiredInputText="Confirm"
-          >
-            Content text
-          </ConfirmationModal>,
+    const requiredInputTextCases = [
+      { describeCase: 'when requiredInputText is provided, confirm button is reset', requiredInputText: 'Confirm', disabledAfterReopeningModal: true },
+      { describeCase: 'when requiredInputText is undefined, confirm button is not reset', requiredInputText: undefined, disabledAfterReopeningModal: false },
+    ];
+
+    const buttonClickCases = [
+      { testCase: 'on cancel', testId: LGIDS_CONFIRMATION_MODAL.cancel },
+      { testCase: 'on confirm', testId: LGIDS_CONFIRMATION_MODAL.confirm },
+      { testCase: 'on modal close', testId: LGIDS_MODAL.close },
+    ];
+
+    describe.each(requiredInputTextCases)(
+      '$describeCase',
+      ({ requiredInputText, disabledAfterReopeningModal }) => {
+        test.each(buttonClickCases)(
+          '$testCase',
+          async ({ testId }) => {
+            const { findByTestId, getByLabelText, getByRole, rerender } =
+              renderModal({
+                open: true,
+                requiredInputText,
+              });
+
+            const modal = getByRole('dialog');
+            const confirmationButton = await findByTestId(
+              LGIDS_CONFIRMATION_MODAL.confirm,
+            );
+            const buttonToClick = await findByTestId(
+              testId
+            );
+            expect(confirmationButton).toHaveAttribute(
+              'aria-disabled',
+              disabledAfterReopeningModal.toString(),
+            );
+
+            let textInput;
+
+            if (requiredInputText) {
+              textInput = getByLabelText(`Type "${requiredInputText}" to confirm your action`);
+              fireEvent.change(textInput, { target: { value: requiredInputText } });
+              expect(confirmationButton).not.toHaveAttribute('aria-disabled', 'true');
+            }
+
+            userEvent.click(buttonToClick);
+
+            await waitForElementToBeRemoved(modal);
+
+            rerender(
+              <ConfirmationModal
+                title="Title text"
+                open={true}
+                requiredInputText={requiredInputText}
+              >
+                Content text
+              </ConfirmationModal>,
+            );
+
+            if (requiredInputText) {
+              textInput = getByLabelText(`Type "${requiredInputText}" to confirm your action`);
+              expect(textInput).toHaveValue('');
+            }
+
+            expect(confirmationButton).toHaveAttribute(
+              'aria-disabled',
+              disabledAfterReopeningModal.toString(),
+            );
+          },
         );
-
-        textInput = getByLabelText('Type "Confirm" to confirm your action');
-
-        expect(textInput).toHaveValue('');
-        expect(confirmationButton).toHaveAttribute('aria-disabled', 'true');
-      });
-    });
+      },
+    );
   });
 
   describe('confirm is not disabled when', () => {

diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx
@@ -76,14 +76,19 @@ export const ConfirmationModal = React.forwardRef(
     // TODO: remove - onCancel is deprecated
     const _onCancel = onCancel || cancelButtonProps?.onClick;
 
+    const resetConfirmButton = () => {
+      if (!requiredInputText) return;
+      setConfirmEnabled(false);
+    }
+
     const handleConfirm = () => {
       _onConfirm?.();
-      setConfirmEnabled(false);
+      resetConfirmButton();
     };
 
     const handleCancel = () => {
       _onCancel?.();
-      setConfirmEnabled(false);
+      resetConfirmButton();
     };
 
     // TODO: remove - submitDisabled is deprecated
@@ -94,7 +99,7 @@ export const ConfirmationModal = React.forwardRef(
       <Modal
         {...modalProps}
         contentClassName={baseModalStyle}
-        setOpen={_onCancel}
+        setOpen={handleCancel}
         darkMode={darkMode}
         ref={forwardRef}
       >