Skip to content

Commit 778ae82

Browse files
mshrivercursoragent
andcommitted
chore(Progress): Include OUIAProps for Progress
Add OUIA attribute support to Progress for better test automation, and update dependent MultipleFileUploadStatusItem snapshots. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 8c89c01 commit 778ae82

5 files changed

Lines changed: 90 additions & 4 deletions

File tree

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
3333
</div>
3434
<div
3535
class="pf-v6-c-progress"
36+
data-ouia-component-type="PF6/Progress"
37+
data-ouia-safe="true"
3638
id="test-progress-id"
3739
>
3840
<div
@@ -152,6 +154,8 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
152154
</div>
153155
<div
154156
class="pf-v6-c-progress"
157+
data-ouia-component-type="PF6/Progress"
158+
data-ouia-safe="true"
155159
id="test-progress-id"
156160
>
157161
<div
@@ -268,6 +272,8 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
268272
</div>
269273
<div
270274
class="pf-v6-c-progress"
275+
data-ouia-component-type="PF6/Progress"
276+
data-ouia-safe="true"
271277
id="test-progress-id"
272278
>
273279
<div
@@ -386,6 +392,8 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
386392
</div>
387393
<div
388394
class="pf-v6-c-progress"
395+
data-ouia-component-type="PF6/Progress"
396+
data-ouia-safe="true"
389397
id="test-progress-id"
390398
>
391399
<div
@@ -504,6 +512,8 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
504512
</div>
505513
<div
506514
class="pf-v6-c-progress pf-m-warning"
515+
data-ouia-component-type="PF6/Progress"
516+
data-ouia-safe="true"
507517
id="test-progress-id"
508518
>
509519
<div
@@ -639,6 +649,8 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
639649
</div>
640650
<div
641651
class="pf-v6-c-progress"
652+
data-ouia-component-type="PF6/Progress"
653+
data-ouia-safe="true"
642654
id="test-progress-id"
643655
>
644656
<div
@@ -757,6 +769,8 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
757769
</div>
758770
<div
759771
class="pf-v6-c-progress"
772+
data-ouia-component-type="PF6/Progress"
773+
data-ouia-safe="true"
760774
id="test-progress-id"
761775
>
762776
<div
@@ -873,6 +887,8 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
873887
</div>
874888
<div
875889
class="pf-v6-c-progress"
890+
data-ouia-component-type="PF6/Progress"
891+
data-ouia-safe="true"
876892
id="test-progress-id"
877893
>
878894
<div

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import styles from '@patternfly/react-styles/css/components/Progress/progress';
33
import { css } from '@patternfly/react-styles';
44
import { ProgressContainer, ProgressMeasureLocation } from './ProgressContainer';
55
import { AriaProps } from './ProgressBar';
6-
import { GenerateId } from '../../helpers';
6+
import { GenerateId, getOUIAProps, OUIAProps } from '../../helpers';
77

88
export enum ProgressSize {
99
sm = 'sm',
1010
md = 'md',
1111
lg = 'lg'
1212
}
1313

14-
export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'label' | 'title'> {
14+
export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'label' | 'title'>, OUIAProps {
1515
/** Classname for progress component. */
1616
className?: string;
1717
/** Size variant of progress. */
@@ -50,6 +50,10 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
5050
helperText?: React.ReactNode;
5151
/** Flag indicating whether the status icon should be hidden, helpful when space is limited (such as within table cells). When set to true, you must ensure the context of the status is provided in another way, such as via the progress measure. */
5252
hideStatusIcon?: boolean;
53+
/** Value to overwrite the randomly generated data-ouia-component-id.*/
54+
ouiaId?: number | string;
55+
/** 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. */
56+
ouiaSafe?: boolean;
5357
}
5458

5559
class Progress extends Component<ProgressProps> {
@@ -70,7 +74,8 @@ class Progress extends Component<ProgressProps> {
7074
tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
7175
'aria-label': null as string,
7276
'aria-labelledby': null as string,
73-
'aria-describedby': null as string
77+
'aria-describedby': null as string,
78+
ouiaSafe: true
7479
};
7580

7681
render() {
@@ -94,6 +99,8 @@ class Progress extends Component<ProgressProps> {
9499
'aria-describedby': ariaDescribedBy,
95100
helperText,
96101
hideStatusIcon,
102+
ouiaId,
103+
ouiaSafe,
97104
...props
98105
} = this.props;
99106

@@ -147,6 +154,7 @@ class Progress extends Component<ProgressProps> {
147154
className
148155
)}
149156
id={id}
157+
{...getOUIAProps(Progress.displayName, ouiaId, ouiaSafe)}
150158
>
151159
<ProgressContainer
152160
parentId={id}

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Progress, ProgressSize } from '../Progress';
33
import { ProgressVariant, ProgressMeasureLocation } from '../ProgressContainer';
44

55
test('Simple progress', () => {
6-
const { asFragment } = render(<Progress value={33} id="progress-simple-example" />);
6+
const { asFragment } = render(<Progress value={33} id="progress-simple-example" ouiaId="ouia-id" />);
77
expect(asFragment()).toMatchSnapshot();
88
});
99

@@ -109,6 +109,26 @@ test('Renders passed helper text', () => {
109109
expect(screen.getByText('Test helper text')).toBeVisible();
110110
});
111111

112+
test('Renders with custom ouiaId', () => {
113+
render(<Progress value={33} id="progress-ouia-id" ouiaId="test-id" title="Test" />);
114+
expect(document.getElementById('progress-ouia-id')).toHaveAttribute('data-ouia-component-id', 'test-id');
115+
});
116+
117+
test('Renders with expected ouia component type', () => {
118+
render(<Progress value={33} id="progress-ouia-type" ouiaId="test-id" title="Test" />);
119+
expect(document.getElementById('progress-ouia-type')).toHaveAttribute('data-ouia-component-type', 'PF6/Progress');
120+
});
121+
122+
test('Renders with ouiaSafe defaulting to true', () => {
123+
render(<Progress value={33} id="progress-ouia-safe" ouiaId="test-id" title="Test" />);
124+
expect(document.getElementById('progress-ouia-safe')).toHaveAttribute('data-ouia-safe', 'true');
125+
});
126+
127+
test('Renders with ouiaSafe=false when specified', () => {
128+
render(<Progress value={33} id="progress-ouia-unsafe" ouiaId="test-id" ouiaSafe={false} title="Test" />);
129+
expect(document.getElementById('progress-ouia-unsafe')).toHaveAttribute('data-ouia-safe', 'false');
130+
});
131+
112132
describe('hideStatusIcon prop behavior', () => {
113133
test('shows status icon by default when hideStatusIcon is not set', () => {
114134
render(<Progress id="default-status-icon-test" value={100} variant="success" />);

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ exports[`Progress measure location inside 1`] = `
44
<DocumentFragment>
55
<div
66
class="pf-v6-c-progress pf-m-inside pf-m-lg pf-m-singleline"
7+
data-ouia-component-type="PF6/Progress"
8+
data-ouia-safe="true"
79
id="inside-progress"
810
>
911
<div
@@ -36,6 +38,8 @@ exports[`Progress measure location inside and small should render large 1`] = `
3638
<DocumentFragment>
3739
<div
3840
class="pf-v6-c-progress pf-m-inside pf-m-lg pf-m-singleline"
41+
data-ouia-component-type="PF6/Progress"
42+
data-ouia-safe="true"
3943
id="large-progress"
4044
>
4145
<div
@@ -68,6 +72,8 @@ exports[`Progress measure location none 1`] = `
6872
<DocumentFragment>
6973
<div
7074
class="pf-v6-c-progress pf-m-singleline"
75+
data-ouia-component-type="PF6/Progress"
76+
data-ouia-safe="true"
7177
id="none-progress"
7278
>
7379
<div
@@ -94,6 +100,8 @@ exports[`Progress measure location outside 1`] = `
94100
<DocumentFragment>
95101
<div
96102
class="pf-v6-c-progress pf-m-outside pf-m-singleline"
103+
data-ouia-component-type="PF6/Progress"
104+
data-ouia-safe="true"
97105
id="outside-progress"
98106
>
99107
<div
@@ -130,6 +138,8 @@ exports[`Progress measure location top 1`] = `
130138
<DocumentFragment>
131139
<div
132140
class="pf-v6-c-progress pf-m-singleline"
141+
data-ouia-component-type="PF6/Progress"
142+
data-ouia-safe="true"
133143
id="top-progress"
134144
>
135145
<div
@@ -166,6 +176,8 @@ exports[`Progress size lg 1`] = `
166176
<DocumentFragment>
167177
<div
168178
class="pf-v6-c-progress pf-m-lg pf-m-singleline"
179+
data-ouia-component-type="PF6/Progress"
180+
data-ouia-safe="true"
169181
id="lg-progress"
170182
>
171183
<div
@@ -202,6 +214,8 @@ exports[`Progress size md 1`] = `
202214
<DocumentFragment>
203215
<div
204216
class="pf-v6-c-progress pf-m-singleline"
217+
data-ouia-component-type="PF6/Progress"
218+
data-ouia-safe="true"
205219
id="md-progress"
206220
>
207221
<div
@@ -238,6 +252,8 @@ exports[`Progress size sm 1`] = `
238252
<DocumentFragment>
239253
<div
240254
class="pf-v6-c-progress pf-m-sm pf-m-singleline"
255+
data-ouia-component-type="PF6/Progress"
256+
data-ouia-safe="true"
241257
id="sm-progress"
242258
>
243259
<div
@@ -274,6 +290,8 @@ exports[`Progress variant danger 1`] = `
274290
<DocumentFragment>
275291
<div
276292
class="pf-v6-c-progress pf-m-danger pf-m-singleline"
293+
data-ouia-component-type="PF6/Progress"
294+
data-ouia-safe="true"
277295
id="danger-progress"
278296
>
279297
<div
@@ -327,6 +345,8 @@ exports[`Progress variant success 1`] = `
327345
<DocumentFragment>
328346
<div
329347
class="pf-v6-c-progress pf-m-success pf-m-singleline"
348+
data-ouia-component-type="PF6/Progress"
349+
data-ouia-safe="true"
330350
id="success-progress"
331351
>
332352
<div
@@ -380,6 +400,8 @@ exports[`Progress variant warning 1`] = `
380400
<DocumentFragment>
381401
<div
382402
class="pf-v6-c-progress pf-m-warning pf-m-singleline"
403+
data-ouia-component-type="PF6/Progress"
404+
data-ouia-safe="true"
383405
id="warning-progress"
384406
>
385407
<div
@@ -433,6 +455,8 @@ exports[`Progress with aria-valuetext 1`] = `
433455
<DocumentFragment>
434456
<div
435457
class="pf-v6-c-progress pf-m-singleline"
458+
data-ouia-component-type="PF6/Progress"
459+
data-ouia-safe="true"
436460
id="progress-aria-valuetext"
437461
>
438462
<div
@@ -470,6 +494,9 @@ exports[`Simple progress 1`] = `
470494
<DocumentFragment>
471495
<div
472496
class="pf-v6-c-progress pf-m-singleline"
497+
data-ouia-component-id="ouia-id"
498+
data-ouia-component-type="PF6/Progress"
499+
data-ouia-safe="true"
473500
id="progress-simple-example"
474501
>
475502
<div
@@ -506,6 +533,8 @@ exports[`additional label 1`] = `
506533
<DocumentFragment>
507534
<div
508535
class="pf-v6-c-progress pf-m-singleline"
536+
data-ouia-component-type="PF6/Progress"
537+
data-ouia-safe="true"
509538
id="additional-label"
510539
>
511540
<div
@@ -542,6 +571,8 @@ exports[`no value specified 1`] = `
542571
<DocumentFragment>
543572
<div
544573
class="pf-v6-c-progress pf-m-singleline"
574+
data-ouia-component-type="PF6/Progress"
575+
data-ouia-safe="true"
545576
id="no-value"
546577
>
547578
<div
@@ -578,6 +609,8 @@ exports[`value higher than maxValue 1`] = `
578609
<DocumentFragment>
579610
<div
580611
class="pf-v6-c-progress pf-m-singleline"
612+
data-ouia-component-type="PF6/Progress"
613+
data-ouia-safe="true"
581614
id="higher-max-value"
582615
>
583616
<div
@@ -614,6 +647,8 @@ exports[`value lower than minValue 1`] = `
614647
<DocumentFragment>
615648
<div
616649
class="pf-v6-c-progress pf-m-singleline"
650+
data-ouia-component-type="PF6/Progress"
651+
data-ouia-safe="true"
617652
id="lower-min-value"
618653
>
619654
<div
@@ -650,6 +685,8 @@ exports[`value scaled between minValue and maxValue 1`] = `
650685
<DocumentFragment>
651686
<div
652687
class="pf-v6-c-progress pf-m-singleline"
688+
data-ouia-component-type="PF6/Progress"
689+
data-ouia-safe="true"
653690
id="scaled-range-value"
654691
>
655692
<div
@@ -686,6 +723,8 @@ exports[`value scaled with maxValue 1`] = `
686723
<DocumentFragment>
687724
<div
688725
class="pf-v6-c-progress pf-m-singleline"
726+
data-ouia-component-type="PF6/Progress"
727+
data-ouia-safe="true"
689728
id="scaled-max-value"
690729
>
691730
<div
@@ -722,6 +761,8 @@ exports[`value scaled with minValue 1`] = `
722761
<DocumentFragment>
723762
<div
724763
class="pf-v6-c-progress pf-m-singleline"
764+
data-ouia-component-type="PF6/Progress"
765+
data-ouia-safe="true"
725766
id="scaled-min-value"
726767
>
727768
<div

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ component.
6666
* [NavExpandable](/components/navigation)
6767
* [NavItem](/components/navigation)
6868
* [Pagination](/components/pagination)
69+
* [Progress](/components/progress)
6970
* [Radio](/components/forms/radio)
7071
* [Select](/components/menus/select)
7172
* [Switch](/components/switch)

0 commit comments

Comments
 (0)