add domProps prop to toast (#6200)

* add domProps to toast options

i saw nothing

test

allow more toast props

review

props

-_-

* switch triggerPress to user.click

---------

Co-authored-by: Devon Govett <devongovett@gmail.com>
Co-authored-by: Danni <darobins@adobe.com>

packages/@react-spectrum/toast/src/Toast.tsx

@@ -14,7 +14,8 @@ import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {Button, ClearButton} from '@react-spectrum/button';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import CrossMedium from '@spectrum-icons/ui/CrossMedium';
-import {DOMRef} from '@react-types/shared';
+import {DOMProps, DOMRef} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
 import InfoMedium from '@spectrum-icons/ui/InfoMedium';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -27,7 +28,7 @@ import {ToasterContext} from './Toaster';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useToast} from '@react-aria/toast';
 
-export interface SpectrumToastValue {
+export interface SpectrumToastValue extends DOMProps {
   children: string,
   variant: 'positive' | 'negative' | 'info' | 'neutral',
   actionLabel?: string,
@@ -90,6 +91,7 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
     <div
       {...styleProps}
       {...toastProps}
+      {...filterDOMProps(props.toast.content)}
       ref={domRef}
       className={classNames(styles,
         'spectrum-Toast',

packages/@react-spectrum/toast/src/ToastContainer.tsx

@@ -11,6 +11,8 @@
  */
 
 import {AriaToastRegionProps} from '@react-aria/toast';
+import {DOMProps} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
 import React, {ReactElement, useEffect, useRef} from 'react';
 import {SpectrumToastValue, Toast} from './Toast';
 import {Toaster} from './Toaster';
@@ -19,7 +21,7 @@ import {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';
 
 export interface SpectrumToastContainerProps extends AriaToastRegionProps {}
 
-export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'> {
+export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'>, DOMProps {
   /** A label for the action button within the toast. */
   actionLabel?: string,
   /** Handler that is called when the action button is pressed. */
@@ -143,7 +145,8 @@ function addToast(children: string, variant: SpectrumToastValue['variant'], opti
     variant,
     actionLabel: options.actionLabel,
     onAction: options.onAction,
-    shouldCloseOnAction: options.shouldCloseOnAction
+    shouldCloseOnAction: options.shouldCloseOnAction,
+    ...filterDOMProps(options)
   };
 
   // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible

packages/@react-spectrum/toast/stories/Toast.stories.tsx

@@ -84,6 +84,26 @@ WithAction.story = {
   }
 };
 
+
+export const WithTestId = (args) => (
+  <RenderProvider {...args} actionLabel="Action" onAction={action('onAction')} data-testid="hello i am a test id" />
+);
+
+WithTestId.story = {
+  name: 'With test id',
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {id: 'landmark-main-is-top-level', enabled: false},
+          {id: 'landmark-no-duplicate-main', enabled: false},
+          {id: 'landmark-unique', enabled: false}
+        ]
+      }
+    }
+  }
+};
+
 export const WithDialog = (args) => (
   <DialogTrigger isDismissable>
     <Button variant="accent">Open dialog</Button>

packages/@react-spectrum/toast/test/ToastContainer.test.js

@@ -81,6 +81,20 @@ describe('Toast Provider and Container', function () {
     expect(queryByRole('alert')).toBeNull();
   });
 
+  it('supports testid prop', async () => {
+    const testid = 'toast-container';
+    const domProps = {
+      'data-testid': testid
+    };
+    let {getByRole, queryByTestId, getByTestId, queryByText} = renderComponent(<RenderToastButton {...domProps} />);
+    let button = getByRole('button');
+
+    expect(queryByTestId(testid)).toBeNull();
+    await user.click(button);
+    expect(getByTestId(testid)).not.toBeNull();
+    expect(queryByText(/Show Default Toast/)).not.toBeNull();
+  });
+
   it('should label icon by variant', async () => {
     let {getByRole} = renderComponent(<RenderToastButton variant="positive" />);
     let button = getByRole('button');