Skip to content

Commit 18d8c90

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

5 files changed

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

0 commit comments

Comments
 (0)