feat: allow dom props on alert dialog. add test ids to alert dialog buttons (#8370)

* 8369: allow dom props on alert dialog and buttons in it

* add tests

* add aria props

* lint

* naming

* naming

* add testid directly to button

* add testid directly to button

* add testid directly to button

Author: snow893

packages/@react-spectrum/dialog/src/AlertDialog.tsx

@@ -13,7 +13,7 @@
 import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {Button} from '@react-spectrum/button';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
-import {chain} from '@react-aria/utils';
+import {chain, filterDOMProps} from '@react-aria/utils';
 import {classNames, useStyleProps} from '@react-spectrum/utils';
 import {Content} from '@react-spectrum/view';
 import {Dialog} from './Dialog';
@@ -71,7 +71,8 @@ export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertD
       isHidden={styleProps.hidden}
       size="M"
       role="alertdialog"
-      ref={ref}>
+      ref={ref}
+      {...filterDOMProps(props)}>
       <Heading>{title}</Heading>
       {(variant === 'error' || variant === 'warning') &&
         <AlertMedium
@@ -85,7 +86,8 @@ export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertD
           <Button
             variant="secondary"
             onPress={() => chain(onClose(), onCancel())}
-            autoFocus={autoFocusButton === 'cancel'}>
+            autoFocus={autoFocusButton === 'cancel'}
+            data-testid="rsp-alertDialog-cancelButton">
             {cancelLabel}
           </Button>
         }
@@ -94,15 +96,17 @@ export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertD
             variant="secondary"
             onPress={() => chain(onClose(), onSecondaryAction())}
             isDisabled={isSecondaryActionDisabled}
-            autoFocus={autoFocusButton === 'secondary'}>
+            autoFocus={autoFocusButton === 'secondary'}
+            data-testid="rsp-alertDialog-secondaryButton">
             {secondaryActionLabel}
           </Button>
         }
         <Button
           variant={confirmVariant}
           onPress={() => chain(onClose(), onPrimaryAction())}
           isDisabled={isPrimaryActionDisabled}
-          autoFocus={autoFocusButton === 'primary'}>
+          autoFocus={autoFocusButton === 'primary'}
+          data-testid="rsp-alertDialog-confirmButton">
           {primaryActionLabel}
         </Button>
       </ButtonGroup>

packages/@react-spectrum/dialog/stories/AlertDialog.stories.tsx

@@ -172,8 +172,9 @@ export const AutoFocusCancel = () => renderAlert({
   onPrimaryAction: action('primary'),
   onSecondaryAction: action('secondary'),
   onCancel: action('cancel'),
-  autoFocusButton: 'cancel'
-});
+  autoFocusButton: 'cancel',
+  'data-testid': 'alert-dialog'
+} as SpectrumAlertDialogProps);
 
 AutoFocusCancel.story = {
   name: 'autoFocus cancel'

packages/@react-spectrum/dialog/test/AlertDialog.test.js

@@ -177,4 +177,30 @@ describe('AlertDialog', function () {
     let button = getByText('secondary').closest('button');
     expect(document.activeElement).toBe(button);
   });
+
+  it('can add test ids', function () {
+    let {getByTestId} = render(
+      <Provider theme={theme}>
+        <AlertDialog
+          variant="confirmation"
+          title="the title"
+          cancelLabel="cancel"
+          primaryActionLabel="confirm"
+          secondaryActionLabel="secondary"
+          autoFocusButton="secondary"
+          data-testid="alert-dialog">
+          Content body
+        </AlertDialog>
+      </Provider>
+    );
+
+    let dialog = getByTestId('alert-dialog');
+    expect(dialog).toBeDefined();
+    let cancelBtn = getByTestId('rsp-alertDialog-cancelButton');
+    expect(cancelBtn).toBeDefined();
+    let secondaryBtn = getByTestId('rsp-alertDialog-secondaryButton');
+    expect(secondaryBtn).toBeDefined();
+    let primaryBtn = getByTestId('rsp-alertDialog-confirmButton');
+    expect(primaryBtn).toBeDefined();
+  });
 });