diff --git a/packages/react-core/src/components/DualListSelector/DualListSelector.tsx b/packages/react-core/src/components/DualListSelector/DualListSelector.tsx index 1c21c05f3f4..e3f99e85df1 100644 --- a/packages/react-core/src/components/DualListSelector/DualListSelector.tsx +++ b/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 = ({ @@ -30,10 +33,13 @@ export const DualListSelector: React.FunctionComponent = 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 ( @@ -41,6 +47,7 @@ export const DualListSelector: React.FunctionComponent = className={css(styles.dualListSelector, hasAnimations && isTree && styles.modifiers.animateExpand, className)} id={id || randomId} {...props} + {...ouiaProps} > {children} diff --git a/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx b/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx index 3d3601fe8a1..68cc9d85a26 100644 --- a/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx +++ b/packages/react-core/src/components/DualListSelector/__tests__/DualListSelector.test.tsx @@ -59,6 +59,31 @@ describe('Opt-in animations', () => { }); }); +test('Matches snapshot', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Renders with custom ouiaId', () => { + render(); + expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-component-id', 'test-id'); +}); + +test('Renders with expected ouia component type', () => { + render(); + expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-component-type', 'PF6/DualListSelector'); +}); + +test('Renders with ouiaSafe defaulting to true', () => { + render(); + expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-safe', 'true'); +}); + +test('Renders with ouiaSafe=false when specified', () => { + render(); + 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', () => { diff --git a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap index 01782bb3a14..54aa64d71a9 100644 --- a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap +++ b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap @@ -120,3 +120,16 @@ exports[`DualListSelector with search inputs 1`] = ` `; + +exports[`Matches snapshot 1`] = ` + +
+ +`; diff --git a/packages/react-core/src/helpers/OUIA/OUIA.md b/packages/react-core/src/helpers/OUIA/OUIA.md index bde424b89eb..7aa4bccaf8e 100644 --- a/packages/react-core/src/helpers/OUIA/OUIA.md +++ b/packages/react-core/src/helpers/OUIA/OUIA.md @@ -58,6 +58,7 @@ component. * [Content](/components/content) * [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)