Skip to content

Commit 0618a6b

Browse files
mshrivercursoragent
mshriver
and
cursoragent
authored
chore(CalendarMonth): Include OUIAProps for CalendarMonth (#12593)
Add OUIA attribute support to CalendarMonth for better test automation. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 9a61fd1 commit 0618a6b

4 files changed

Lines changed: 39 additions & 8 deletions

File tree

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-mi
88
import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
99
import { css } from '@patternfly/react-styles';
1010
import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
11-
import { useSSRSafeId } from '../../helpers';
11+
import { useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers';
1212
import { isValidDate } from '../../helpers/datetimeUtils';
1313

1414
export enum Weekday {
@@ -63,7 +63,7 @@ export interface CalendarFormat {
6363
inlineProps?: CalendarMonthInlineProps;
6464
}
6565

66-
export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
66+
export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
6767
/** Additional classes to add to the outer div of the calendar month. */
6868
className?: string;
6969
/** Month/year to base other dates around. */
@@ -88,6 +88,10 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
8888
* monthAppendTo={document.getElementById('target')}
8989
*/
9090
monthAppendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
91+
/** Value to overwrite the randomly generated data-ouia-component-id.*/
92+
ouiaId?: number | string;
93+
/** 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. */
94+
ouiaSafe?: boolean;
9195
}
9296

9397
const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
@@ -151,8 +155,11 @@ export const CalendarMonth = ({
151155
isDateFocused = false,
152156
inlineProps,
153157
monthAppendTo = 'inline',
158+
ouiaId,
159+
ouiaSafe = true,
154160
...props
155161
}: CalendarProps) => {
162+
const ouiaProps = useOUIAProps(CalendarMonth.displayName, ouiaId, ouiaSafe);
156163
const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
157164
.map((monthNum) => new Date(1990, monthNum))
158165
.map(monthFormat);
@@ -293,7 +300,7 @@ export const CalendarMonth = ({
293300
const monthFormatted = monthFormat(focusedDate);
294301

295302
const calendarToRender = (
296-
<div className={css(styles.calendarMonth, className)} {...props}>
303+
<div className={css(styles.calendarMonth, className)} {...props} {...ouiaProps}>
297304
<div className={styles.calendarMonthHeader}>
298305
<div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-prev-month')}>
299306
<Button

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,23 @@ test('InlineProps render correct wrapper component and attributes', () => {
6464
const title = screen.getByText('Title');
6565
expect(title).toBeVisible();
6666
});
67+
68+
test('Renders with custom ouiaId', () => {
69+
const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
70+
expect(container.firstChild).toHaveAttribute('data-ouia-component-id', 'test-id');
71+
});
72+
73+
test('Renders with expected ouia component type', () => {
74+
const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
75+
expect(container.firstChild).toHaveAttribute('data-ouia-component-type', 'PF6/CalendarMonth');
76+
});
77+
78+
test('Renders with ouiaSafe defaulting to true', () => {
79+
const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
80+
expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'true');
81+
});
82+
83+
test('Renders with ouiaSafe=false when specified', () => {
84+
const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" ouiaSafe={false} />);
85+
expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'false');
86+
});

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,9 @@ exports[`With popover opened 1`] = `
8989
>
9090
<div
9191
class="pf-v6-c-calendar-month"
92+
data-ouia-component-id="OUIA-Generated-CalendarMonth-:r13:"
93+
data-ouia-component-type="PF6/CalendarMonth"
94+
data-ouia-safe="true"
9295
>
9396
<div
9497
class="pf-v6-c-calendar-month__header"
@@ -99,7 +102,7 @@ exports[`With popover opened 1`] = `
99102
<button
100103
aria-label="Previous month"
101104
class="pf-v6-c-button pf-m-plain"
102-
data-ouia-component-id="OUIA-Generated-Button-plain-:r14:"
105+
data-ouia-component-id="OUIA-Generated-Button-plain-:r15:"
103106
data-ouia-component-type="PF6/Button"
104107
data-ouia-safe="true"
105108
type="button"
@@ -134,15 +137,15 @@ exports[`With popover opened 1`] = `
134137
>
135138
<span
136139
hidden=""
137-
id="hidden-month-span:r13:"
140+
id="hidden-month-span:r14:"
138141
>
139142
Month
140143
</span>
141144
<button
142145
aria-expanded="false"
143146
aria-haspopup="menu"
144147
class="pf-v6-c-menu-toggle"
145-
data-ouia-component-id="OUIA-Generated-MenuToggle-:r17:"
148+
data-ouia-component-id="OUIA-Generated-MenuToggle-:r18:"
146149
data-ouia-component-type="PF6/MenuToggle"
147150
data-ouia-safe="true"
148151
style="width: 140px;"
@@ -189,7 +192,7 @@ exports[`With popover opened 1`] = `
189192
<input
190193
aria-invalid="false"
191194
aria-label="Select year"
192-
data-ouia-component-id="OUIA-Generated-TextInputBase-:r19:"
195+
data-ouia-component-id="OUIA-Generated-TextInputBase-:r1a:"
193196
data-ouia-component-type="PF6/TextInput"
194197
data-ouia-safe="true"
195198
type="number"
@@ -205,7 +208,7 @@ exports[`With popover opened 1`] = `
205208
<button
206209
aria-label="Next month"
207210
class="pf-v6-c-button pf-m-plain"
208-
data-ouia-component-id="OUIA-Generated-Button-plain-:r1a:"
211+
data-ouia-component-id="OUIA-Generated-Button-plain-:r1b:"
209212
data-ouia-component-type="PF6/Button"
210213
data-ouia-safe="true"
211214
type="button"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ component.
5151
* [Alert](/components/alert)
5252
* [Breadcrumb](/components/breadcrumb)
5353
* [Button](/components/button)
54+
* [CalendarMonth](/components/calendar-month)
5455
* [Card](/components/card)
5556
* [Checkbox](/components/forms/checkbox)
5657
* [Chip](/components/chip)

0 commit comments

Comments
 (0)