Skip to content

Commit d3a8a4a

Browse files
mshrivercursoragent
mshriver
and
cursoragent
committed
chore(Drawer): Include OUIAProps for Drawer
Add OUIA attribute support to Drawer for better test automation. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 8c89c01 commit d3a8a4a

4 files changed

Lines changed: 94 additions & 16 deletions

File tree

‎packages/react-core/src/components/Drawer/Drawer.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createContext, useRef } from 'react';
22
import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
33
import { css } from '@patternfly/react-styles';
4+
import { useOUIAProps, OUIAProps } from '../../helpers';
45

56
export enum DrawerColorVariant {
67
default = 'default',
@@ -11,7 +12,7 @@ export enum DrawerColorVariant {
1112
noBackground = 'no-background'
1213
}
1314

14-
export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
15+
export interface DrawerProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
1516
/** Additional classes added to the Drawer. */
1617
className?: string;
1718
/** Content rendered in the drawer panel */
@@ -28,6 +29,10 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
2829
position?: 'start' | 'end' | 'bottom' | 'left' | 'right';
2930
/** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
3031
onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
32+
/** Value to overwrite the randomly generated data-ouia-component-id.*/
33+
ouiaId?: number | string;
34+
/** 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. */
35+
ouiaSafe?: boolean;
3136
}
3237

3338
export interface DrawerContextProps {
@@ -59,8 +64,11 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
5964
isStatic = false,
6065
position = 'end',
6166
onExpand = () => {},
67+
ouiaId,
68+
ouiaSafe = true,
6269
...props
6370
}: DrawerProps) => {
71+
const ouiaProps = useOUIAProps(Drawer.displayName, ouiaId, ouiaSafe);
6472
const drawerRef = useRef<HTMLDivElement>(undefined);
6573
const drawerContentRef = useRef<HTMLDivElement>(undefined);
6674

@@ -79,6 +87,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
7987
)}
8088
ref={drawerRef}
8189
{...props}
90+
{...ouiaProps}
8291
>
8392
{children}
8493
</div>

‎packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ Object.values([
3939
'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.';
4040
test(`Drawer isExpanded = ${isExpanded} and isInline = ${isInline} and isStatic = ${isStatic}`, () => {
4141
const { asFragment } = render(
42-
<Drawer isExpanded={isExpanded}>
42+
<Drawer isExpanded={isExpanded} ouiaId="ouia-id">
4343
<DrawerContent panelContent={panelContent}>
4444
<DrawerContentBody>{drawerContent}</DrawerContentBody>
4545
</DrawerContent>
@@ -187,3 +187,47 @@ test(`Renders with ${styles.modifiers.pill} class when specified`, () => {
187187

188188
expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.pill);
189189
});
190+
191+
test('Renders with custom ouiaId', () => {
192+
render(
193+
<Drawer data-testid="drawer" ouiaId="test-id">
194+
<DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
195+
<DrawerContentBody>content</DrawerContentBody>
196+
</DrawerContent>
197+
</Drawer>
198+
);
199+
expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-id', 'test-id');
200+
});
201+
202+
test('Renders with expected ouia component type', () => {
203+
render(
204+
<Drawer data-testid="drawer" ouiaId="test-id">
205+
<DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
206+
<DrawerContentBody>content</DrawerContentBody>
207+
</DrawerContent>
208+
</Drawer>
209+
);
210+
expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-type', 'PF6/Drawer');
211+
});
212+
213+
test('Renders with ouiaSafe defaulting to true', () => {
214+
render(
215+
<Drawer data-testid="drawer" ouiaId="test-id">
216+
<DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
217+
<DrawerContentBody>content</DrawerContentBody>
218+
</DrawerContent>
219+
</Drawer>
220+
);
221+
expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'true');
222+
});
223+
224+
test('Renders with ouiaSafe=false when specified', () => {
225+
render(
226+
<Drawer data-testid="drawer" ouiaId="test-id" ouiaSafe={false}>
227+
<DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
228+
<DrawerContentBody>content</DrawerContentBody>
229+
</DrawerContent>
230+
</Drawer>
231+
);
232+
expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'false');
233+
});

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

Lines changed: 38 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ exports[`Drawer expands from bottom 1`] = `
44
<DocumentFragment>
55
<div
66
class="pf-v6-c-drawer pf-m-expanded pf-m-panel-bottom"
7+
data-ouia-component-id="OUIA-Generated-Drawer-:rd:"
8+
data-ouia-component-type="PF6/Drawer"
9+
data-ouia-safe="true"
710
>
811
<div
912
class="pf-v6-c-drawer__main"
@@ -19,7 +22,7 @@ exports[`Drawer expands from bottom 1`] = `
1922
</div>
2023
<div
2124
class="pf-v6-c-drawer__panel"
22-
id="pf-drawer-panel-:r8:"
25+
id="pf-drawer-panel-:re:"
2326
>
2427
<div
2528
class="pf-v6-c-drawer__head"
@@ -36,7 +39,7 @@ exports[`Drawer expands from bottom 1`] = `
3639
<button
3740
aria-label="Close drawer panel"
3841
class="pf-v6-c-button pf-m-plain"
39-
data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
42+
data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
4043
data-ouia-component-type="PF6/Button"
4144
data-ouia-safe="true"
4245
type="button"
@@ -77,6 +80,9 @@ exports[`Drawer has resizable callback and id 1`] = `
7780
<DocumentFragment>
7881
<div
7982
class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
83+
data-ouia-component-id="OUIA-Generated-Drawer-:rj:"
84+
data-ouia-component-type="PF6/Drawer"
85+
data-ouia-safe="true"
8086
>
8187
<div
8288
class="pf-v6-c-drawer__main"
@@ -128,7 +134,7 @@ exports[`Drawer has resizable callback and id 1`] = `
128134
<button
129135
aria-label="Close drawer panel"
130136
class="pf-v6-c-button pf-m-plain"
131-
data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
137+
data-ouia-component-id="OUIA-Generated-Button-plain-:rl:"
132138
data-ouia-component-type="PF6/Button"
133139
data-ouia-safe="true"
134140
type="button"
@@ -170,6 +176,9 @@ exports[`Drawer has resizable css and color variants 1`] = `
170176
<DocumentFragment>
171177
<div
172178
class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
179+
data-ouia-component-id="OUIA-Generated-Drawer-:rg:"
180+
data-ouia-component-type="PF6/Drawer"
181+
data-ouia-safe="true"
173182
>
174183
<div
175184
class="pf-v6-c-drawer__main"
@@ -185,11 +194,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
185194
</div>
186195
<div
187196
class="pf-v6-c-drawer__panel pf-m-resizable pf-m-secondary"
188-
id="pf-drawer-panel-:ra:"
197+
id="pf-drawer-panel-:rh:"
189198
style="--pf-v6-c-drawer__panel--md--FlexBasis: 300px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v6-c-drawer__panel--md--FlexBasis--max: 400px;"
190199
>
191200
<div
192-
aria-controls="pf-drawer-panel-:ra:"
201+
aria-controls="pf-drawer-panel-:rh:"
193202
aria-label="Resize"
194203
aria-orientation="vertical"
195204
aria-valuemax="100"
@@ -222,7 +231,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
222231
<button
223232
aria-label="Close drawer panel"
224233
class="pf-v6-c-button pf-m-plain"
225-
data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
234+
data-ouia-component-id="OUIA-Generated-Button-plain-:ri:"
226235
data-ouia-component-type="PF6/Button"
227236
data-ouia-safe="true"
228237
type="button"
@@ -264,6 +273,9 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
264273
<DocumentFragment>
265274
<div
266275
class="pf-v6-c-drawer"
276+
data-ouia-component-id="ouia-id"
277+
data-ouia-component-type="PF6/Drawer"
278+
data-ouia-safe="true"
267279
>
268280
<div
269281
class="pf-v6-c-drawer__main"
@@ -280,7 +292,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
280292
<div
281293
class="pf-v6-c-drawer__panel"
282294
hidden=""
283-
id="pf-drawer-panel-:r2:"
295+
id="pf-drawer-panel-:r4:"
284296
inert=""
285297
/>
286298
</div>
@@ -292,6 +304,9 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
292304
<DocumentFragment>
293305
<div
294306
class="pf-v6-c-drawer"
307+
data-ouia-component-id="ouia-id"
308+
data-ouia-component-type="PF6/Drawer"
309+
data-ouia-safe="true"
295310
>
296311
<div
297312
class="pf-v6-c-drawer__main"
@@ -308,7 +323,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
308323
<div
309324
class="pf-v6-c-drawer__panel"
310325
hidden=""
311-
id="pf-drawer-panel-:r5:"
326+
id="pf-drawer-panel-:r9:"
312327
inert=""
313328
/>
314329
</div>
@@ -320,6 +335,9 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
320335
<DocumentFragment>
321336
<div
322337
class="pf-v6-c-drawer pf-m-expanded"
338+
data-ouia-component-id="ouia-id"
339+
data-ouia-component-type="PF6/Drawer"
340+
data-ouia-safe="true"
323341
>
324342
<div
325343
class="pf-v6-c-drawer__main"
@@ -335,7 +353,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
335353
</div>
336354
<div
337355
class="pf-v6-c-drawer__panel"
338-
id="pf-drawer-panel-:r0:"
356+
id="pf-drawer-panel-:r1:"
339357
>
340358
<div
341359
class="pf-v6-c-drawer__head"
@@ -352,7 +370,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
352370
<button
353371
aria-label="Close drawer panel"
354372
class="pf-v6-c-button pf-m-plain"
355-
data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
373+
data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
356374
data-ouia-component-type="PF6/Button"
357375
data-ouia-safe="true"
358376
type="button"
@@ -393,6 +411,9 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
393411
<DocumentFragment>
394412
<div
395413
class="pf-v6-c-drawer pf-m-expanded"
414+
data-ouia-component-id="ouia-id"
415+
data-ouia-component-type="PF6/Drawer"
416+
data-ouia-safe="true"
396417
>
397418
<div
398419
class="pf-v6-c-drawer__main"
@@ -408,7 +429,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
408429
</div>
409430
<div
410431
class="pf-v6-c-drawer__panel"
411-
id="pf-drawer-panel-:r6:"
432+
id="pf-drawer-panel-:rb:"
412433
>
413434
<div
414435
class="pf-v6-c-drawer__head"
@@ -425,7 +446,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
425446
<button
426447
aria-label="Close drawer panel"
427448
class="pf-v6-c-button pf-m-plain"
428-
data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
449+
data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
429450
data-ouia-component-type="PF6/Button"
430451
data-ouia-safe="true"
431452
type="button"
@@ -466,6 +487,9 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
466487
<DocumentFragment>
467488
<div
468489
class="pf-v6-c-drawer pf-m-expanded"
490+
data-ouia-component-id="ouia-id"
491+
data-ouia-component-type="PF6/Drawer"
492+
data-ouia-safe="true"
469493
>
470494
<div
471495
class="pf-v6-c-drawer__main"
@@ -481,7 +505,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
481505
</div>
482506
<div
483507
class="pf-v6-c-drawer__panel"
484-
id="pf-drawer-panel-:r3:"
508+
id="pf-drawer-panel-:r6:"
485509
>
486510
<div
487511
class="pf-v6-c-drawer__head"
@@ -498,7 +522,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
498522
<button
499523
aria-label="Close drawer panel"
500524
class="pf-v6-c-button pf-m-plain"
501-
data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
525+
data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
502526
data-ouia-component-type="PF6/Button"
503527
data-ouia-safe="true"
504528
type="button"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ component.
5555
* [Checkbox](/components/forms/checkbox)
5656
* [Chip](/components/chip)
5757
* [Content](/components/content)
58+
* [Drawer](/components/drawer)
5859
* [Dropdown](/components/menus/dropdown)
5960
* [DropdownItem](/components/menus/dropdown)
6061
* [Form](/components/forms/form)

0 commit comments

Comments
 (0)