diff --git a/packages/react-core/src/components/Drawer/Drawer.tsx b/packages/react-core/src/components/Drawer/Drawer.tsx index eaa6c58dfcd..f26869bbe09 100644 --- a/packages/react-core/src/components/Drawer/Drawer.tsx +++ b/packages/react-core/src/components/Drawer/Drawer.tsx @@ -1,6 +1,7 @@ import { createContext, useRef } from 'react'; import styles from '@patternfly/react-styles/css/components/Drawer/drawer'; import { css } from '@patternfly/react-styles'; +import { useOUIAProps, OUIAProps } from '../../helpers'; export enum DrawerColorVariant { default = 'default', @@ -11,7 +12,7 @@ export enum DrawerColorVariant { noBackground = 'no-background' } -export interface DrawerProps extends React.HTMLProps { +export interface DrawerProps extends React.HTMLProps, OUIAProps { /** Additional classes added to the Drawer. */ className?: string; /** Content rendered in the drawer panel */ @@ -28,6 +29,10 @@ export interface DrawerProps extends React.HTMLProps { position?: 'start' | 'end' | 'bottom' | 'left' | 'right'; /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */ onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void; + /** 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 interface DrawerContextProps { @@ -59,8 +64,11 @@ export const Drawer: React.FunctionComponent = ({ isStatic = false, position = 'end', onExpand = () => {}, + ouiaId, + ouiaSafe = true, ...props }: DrawerProps) => { + const ouiaProps = useOUIAProps(Drawer.displayName, ouiaId, ouiaSafe); const drawerRef = useRef(undefined); const drawerContentRef = useRef(undefined); @@ -79,6 +87,7 @@ export const Drawer: React.FunctionComponent = ({ )} ref={drawerRef} {...props} + {...ouiaProps} > {children} diff --git a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx index 14a0f2f6295..67765d90b54 100644 --- a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx +++ b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx @@ -39,7 +39,7 @@ Object.values([ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.'; test(`Drawer isExpanded = ${isExpanded} and isInline = ${isInline} and isStatic = ${isStatic}`, () => { const { asFragment } = render( - + {drawerContent} @@ -187,3 +187,47 @@ test(`Renders with ${styles.modifiers.pill} class when specified`, () => { expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.pill); }); + +test('Renders with custom ouiaId', () => { + render( + + panel}> + content + + + ); + expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-id', 'test-id'); +}); + +test('Renders with expected ouia component type', () => { + render( + + panel}> + content + + + ); + expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-type', 'PF6/Drawer'); +}); + +test('Renders with ouiaSafe defaulting to true', () => { + render( + + panel}> + content + + + ); + expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'true'); +}); + +test('Renders with ouiaSafe=false when specified', () => { + render( + + panel}> + content + + + ); + expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'false'); +}); diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index 55ba3c0a2bc..94616ec5619 100644 --- a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -4,6 +4,9 @@ exports[`Drawer expands from bottom 1`] = `
@@ -292,6 +304,9 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
@@ -320,6 +335,9 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]