chore(CalendarMonth): Include OUIAProps for CalendarMonth

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

@@ -8,7 +8,7 @@
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
-import { useSSRSafeId } from '../../helpers';
+import { useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 
 export enum Weekday {
@@ -63,7 +63,7 @@
   inlineProps?: CalendarMonthInlineProps;
 }
 
-export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
   /** Additional classes to add to the outer div of the calendar month. */
   className?: string;
   /** Month/year to base other dates around. */
@@ -88,6 +88,10 @@
    * monthAppendTo={document.getElementById('target')}
    */
   monthAppendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
+  /** 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;
 }
 
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
@@ -151,8 +155,11 @@
   isDateFocused = false,
   inlineProps,
   monthAppendTo = 'inline',
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: CalendarProps) => {
+  const ouiaProps = useOUIAProps(CalendarMonth.displayName, ouiaId, ouiaSafe);
   const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
     .map((monthNum) => new Date(1990, monthNum))
     .map(monthFormat);
@@ -189,14 +196,14 @@
     } else if (!dateProp) {
       setFocusedDate(today);
     }
   }, [dateProp]);
 
   useEffect(() => {
     // Calendar month should not be focused on page load
     if ((shouldFocus || isDateFocused) && focusedDateValidated && focusRef.current) {
       focusRef.current.focus();
     }
   }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 
   const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
     setFocusedDate(newDate);
@@ -293,7 +300,7 @@
   const monthFormatted = monthFormat(focusedDate);
 
   const calendarToRender = (
-    <div className={css(styles.calendarMonth, className)} {...props}>
+    <div className={css(styles.calendarMonth, className)} {...props} {...ouiaProps}>
       <div className={styles.calendarMonthHeader}>
         <div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-prev-month')}>
           <Button

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

@@ -64,3 +64,28 @@ test('InlineProps render correct wrapper component and attributes', () => {
   const title = screen.getByText('Title');
   expect(title).toBeVisible();
 });
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="ouia-id" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders with custom ouiaId', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-type', 'PF6/CalendarMonth');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" ouiaSafe={false} />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'false');
+});