From 633ea337e542416b465e5d6a96985a59e10371e4 Mon Sep 17 00:00:00 2001 From: mshriver Date: Mon, 20 Jul 2026 09:44:52 -0400 Subject: [PATCH 1/2] chore(Popover): Include OUIAProps for Popover Add OUIA attribute support to Popover for better test automation. OUIA attributes are applied to the FocusTrap dialog root. Co-authored-by: Cursor --- .../src/components/Popover/Popover.tsx | 13 ++++-- .../Popover/__tests__/Popover.test.tsx | 45 ++++++++++++++++++- packages/react-core/src/helpers/OUIA/OUIA.md | 1 + 3 files changed, 55 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx index 9585a13bf7d..2764f074a71 100644 --- a/packages/react-core/src/components/Popover/Popover.tsx +++ b/packages/react-core/src/components/Popover/Popover.tsx @@ -11,9 +11,8 @@ import { PopoverCloseButton } from './PopoverCloseButton'; import { PopoverArrow } from './PopoverArrow'; import popoverMaxWidth from '@patternfly/react-tokens/dist/esm/c_popover_MaxWidth'; import popoverMinWidth from '@patternfly/react-tokens/dist/esm/c_popover_MinWidth'; -import { FocusTrap } from '../../helpers'; +import { FocusTrap, useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers'; import { Popper } from '../../helpers/Popper/Popper'; -import { useSSRSafeId } from '../../helpers'; export enum PopoverPosition { auto = 'auto', @@ -35,7 +34,7 @@ export enum PopoverPosition { * that has a property specifically for passing in popover properties. */ -export interface PopoverProps { +export interface PopoverProps extends OUIAProps { /** Text announced by screen reader when alert severity variant is set to indicate * severity level. */ @@ -211,6 +210,10 @@ export interface PopoverProps { withFocusTrap?: boolean; /** The z-index of the popover. */ zIndex?: number; + /** Value to overwrite the randomly generated data-ouia-component-id.*/ + ouiaId?: number | string; + /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ + ouiaSafe?: boolean; } const alertStyle = { @@ -272,12 +275,15 @@ export const Popover: React.FunctionComponent = ({ 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)); @@ -473,6 +479,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 d971aeb61b2..8a80387064d 100644 --- a/packages/react-core/src/helpers/OUIA/OUIA.md +++ b/packages/react-core/src/helpers/OUIA/OUIA.md @@ -66,6 +66,7 @@ component. * [NavExpandable](/components/navigation) * [NavItem](/components/navigation) * [Pagination](/components/pagination) +* [Popover](/components/popover) * [Radio](/components/forms/radio) * [Select](/components/menus/select) * [Switch](/components/switch) From 0fee559bcab5d923250f9a0b67530f190b79c3d3 Mon Sep 17 00:00:00 2001 From: mshriver Date: Thu, 23 Jul 2026 07:01:45 -0400 Subject: [PATCH 2/2] Update snapshots for datepicker --- .../__snapshots__/DatePicker.test.tsx.snap | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) 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 1cbdedbbac2..581701c7a29 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`] = `