chore(DualListSelector): Include OUIAProps for DualListSelector (#12597)

Add OUIA attribute support to DualListSelector for better test automation.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: mshriver

packages/react-core/src/components/DualListSelector/DualListSelector.tsx

@@ -1,14 +1,13 @@
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { useSSRSafeId } from '../../helpers';
+import { useSSRSafeId, useOUIAProps, OUIAProps, useHasAnimations } from '../../helpers';
 import { DualListSelectorContext } from './DualListSelectorContext';
-import { useHasAnimations } from '../../helpers';
 
 /** Acts as a container for all other DualListSelector sub-components when using a
  * composable dual list selector.
  */
 
-export interface DualListSelectorProps {
+export interface DualListSelectorProps extends OUIAProps {
   /** Additional classes applied to the dual list selector. */
   className?: string;
   /** ID of the dual list selector. */
@@ -22,6 +21,10 @@ export interface DualListSelectorProps {
    * the next breaking change release in favor of defaulting to always-rendered items.
    */
   hasAnimations?: boolean;
+  /** 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;
 }
 
 export const DualListSelector: React.FunctionComponent<DualListSelectorProps> = ({
@@ -30,17 +33,21 @@ export const DualListSelector: React.FunctionComponent<DualListSelectorProps> =
   id,
   isTree = false,
   hasAnimations: hasAnimationsProp,
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: DualListSelectorProps) => {
   const hasAnimations = useHasAnimations(hasAnimationsProp);
   const randomId = useSSRSafeId();
+  const ouiaProps = useOUIAProps(DualListSelector.displayName, ouiaId, ouiaSafe);
 
   return (
     <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
       <div
         className={css(styles.dualListSelector, hasAnimations && isTree && styles.modifiers.animateExpand, className)}
         id={id || randomId}
         {...props}
+        {...ouiaProps}
       >
         {children}
       </div>

packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx

@@ -59,6 +59,31 @@ describe('Opt-in animations', () => {
   });
 });
 
+test('Matches snapshot', () => {
+  const { asFragment } = render(<DualListSelector ouiaId="ouia-id" data-testid="test-id" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders with custom ouiaId', () => {
+  render(<DualListSelector data-testid="test-id" ouiaId="test-id" />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  render(<DualListSelector data-testid="test-id" ouiaId="test-id" />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-component-type', 'PF6/DualListSelector');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(<DualListSelector data-testid="test-id" ouiaId="test-id" />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  render(<DualListSelector data-testid="test-id" ouiaId="test-id" ouiaSafe={false} />);
+  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-safe', 'false');
+});
+
 // Following tests should be moved to a separate DualListSelectorPane test file
 describe('DualListSelector', () => {
   test('basic', () => {

packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap

@@ -120,3 +120,16 @@ exports[`DualListSelector with search inputs 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-dual-list-selector"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/DualListSelector"
+    data-ouia-safe="true"
+    data-testid="test-id"
+    id="pf-:re:"
+  />
+</DocumentFragment>
+`;

packages/react-core/src/helpers/OUIA/OUIA.md

@@ -59,6 +59,7 @@ component.
 * [DescriptionList](/components/description-list)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
+* [DualListSelector](/components/dual-list-selector)
 * [ExpandableSection](/components/expandable-section)
 * [Form](/components/forms/form)
 * [FormGroup](/components/forms/form)