LG-1636: Adds data-testids to confirmation modal (#2201)

* adds data-testids to confirmation modal * Update ConfirmationModal.tsx --------- Co-authored-by: Shaneeza <[email protected]>
mongodb · Feb 1, 2024 · ae4afdc · ae4afdc
1 parent 0b3fe09
commit ae4afdc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/.changeset/many-seals-compare.md b/.changeset/many-seals-compare.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/confirmation-modal': patch
+---
+
+Adds `data-testids` to better support end-to-end testing
diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx
@@ -59,6 +59,7 @@ export const ConfirmationModal = React.forwardRef(
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             darkMode={darkMode}
+            data-testid="lg-confirmation-modal-confirmation-input"
           ></TextInput>
         );
       }
@@ -87,7 +88,11 @@ export const ConfirmationModal = React.forwardRef(
               />
             </div>
           )}
-          <H3 as="h1" className={cx(titleStyle)}>
+          <H3
+            as="h1"
+            className={cx(titleStyle)}
+            data-testid="lg-confirmation-modal-title"
+          >
             {title}
           </H3>
           {children}
@@ -99,10 +104,15 @@ export const ConfirmationModal = React.forwardRef(
             disabled={!confirmEnabled || submitDisabled}
             onClick={onConfirm}
             className={buttonStyle}
+            data-testid="lg-confirmation-modal-footer-confirm-button"
           >
             {buttonText}
           </Button>
-          <Button onClick={onCancel} className={buttonStyle}>
+          <Button
+            onClick={onCancel}
+            className={buttonStyle}
+            data-testid="lg-confirmation-modal-footer-cancel-button"
+          >
             Cancel
           </Button>
         </Footer>