diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap index 949137b3178..e0c16f88fe0 100644 --- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap @@ -21,7 +21,7 @@ exports[`With popover opened 1`] = `
@@ -139,7 +142,7 @@ exports[`With popover opened 1`] = ` aria-expanded="false" aria-haspopup="menu" class="pf-v6-c-menu-toggle" - data-ouia-component-id="OUIA-Generated-MenuToggle-:r10:" + data-ouia-component-id="OUIA-Generated-MenuToggle-:r17:" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" style="width: 140px;" @@ -186,7 +189,7 @@ exports[`With popover opened 1`] = ` = ({ hasNoPadding = false, hasAutoWidth = false, elementToFocus, + ouiaId, + ouiaSafe = true, ...rest }: PopoverProps) => { // could make this a prop in the future (true | false | 'toggle') // const hideOnClick = true; const generatedId = useSSRSafeId(); const uniqueId = id || generatedId; + const ouiaProps = useOUIAProps(Popover.displayName, ouiaId, ouiaSafe); const triggerManually = isVisible !== null; const [visible, setVisible] = useState(false); const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap)); @@ -475,6 +481,7 @@ export const Popover: React.FunctionComponent = ({ maxWidth: hasCustomMaxWidth ? maxWidth : null }} {...rest} + {...ouiaProps} > diff --git a/packages/react-core/src/components/Popover/__tests__/Popover.test.tsx b/packages/react-core/src/components/Popover/__tests__/Popover.test.tsx index 85ae5a0001e..6d1c6009a7d 100644 --- a/packages/react-core/src/components/Popover/__tests__/Popover.test.tsx +++ b/packages/react-core/src/components/Popover/__tests__/Popover.test.tsx @@ -1,5 +1,5 @@ import { StrictMode } from 'react'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { Popover, PopoverPosition } from '../Popover'; test('popover renders close-button, header and body', () => { @@ -9,6 +9,7 @@ test('popover renders close-button, header and body', () => { position="top" isVisible hideOnOutsideClick + ouiaId="ouia-id" headerContent={
Popover Header
} bodyContent={
@@ -114,3 +115,45 @@ test('popover renders in strict mode', () => { expect(consoleError).not.toHaveBeenCalled(); expect(asFragment()).toMatchSnapshot(); }); + +test('Renders with custom ouiaId', () => { + render( + Popover Header
} bodyContent={
Popover body
}> +
Toggle Popover
+ + ); + expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-component-id', 'test-id'); +}); + +test('Renders with expected ouia component type', () => { + render( + Popover Header
} bodyContent={
Popover body
}> +
Toggle Popover
+ + ); + expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-component-type', 'PF6/Popover'); +}); + +test('Renders with ouiaSafe defaulting to true', () => { + render( + Popover Header
} bodyContent={
Popover body
}> +
Toggle Popover
+ + ); + expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-safe', 'true'); +}); + +test('Renders with ouiaSafe=false when specified', () => { + render( + Popover Header
} + bodyContent={
Popover body
} + > +
Toggle Popover
+ + ); + expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-safe', 'false'); +}); diff --git a/packages/react-core/src/helpers/OUIA/OUIA.md b/packages/react-core/src/helpers/OUIA/OUIA.md index 6dfd1c2dbf2..0519c5481c0 100644 --- a/packages/react-core/src/helpers/OUIA/OUIA.md +++ b/packages/react-core/src/helpers/OUIA/OUIA.md @@ -71,6 +71,7 @@ component. * [NavExpandable](/components/navigation) * [NavItem](/components/navigation) * [Pagination](/components/pagination) +* [Popover](/components/popover) * [Progress](/components/progress) * [Radio](/components/forms/radio) * [Select](/components/menus/select)