Add data test ids for travel calendar month buttons (#773)

* - add data-testIds to buttons in MonthHeader * - rename stories * - remove undefined from prop
StenaIT · Aug 28, 2024 · 2407102 · 2407102
1 parent ba6da0b
commit 2407102
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 4 deletions.
diff --git a/...alendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.stories.tsx b/...alendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.stories.tsx
@@ -48,7 +48,7 @@ export const WithHeading = () => {
   );
 };
 
-export const WithTestId = () => {
+export const WithTestIds = () => {
   const [value, setValue] = useState<string>("");
 
   const testId = (date: Date) => {
@@ -57,13 +57,19 @@ export const WithTestId = () => {
     }
     return undefined;
   };
+
+  const previousMonthButtonTestId = "prev-month-button";
+  const nextMonthButtonTestId = "next-month-button";
+
   return (
     <div style={{ display: "inline-block" }}>
       <TravelDateCalendar
         value={value}
         onValueChange={setValue}
         localeCode={"sv"}
         dateTestId={testId}
+        previousMonthButtonTestId={previousMonthButtonTestId}
+        nextMonthButtonTestId={nextMonthButtonTestId}
       />
     </div>
   );

diff --git a/packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.tsx b/packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.tsx
@@ -23,6 +23,8 @@ export interface TravelDateCalendarProps
   numMonthsInMonthPicker?: number;
   size?: TravelCalendarSizeVariant;
   dateTestId?: (date: Date) => string | undefined;
+  previousMonthButtonTestId?: string;
+  nextMonthButtonTestId?: string;
 }
 
 export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
@@ -39,6 +41,8 @@ export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
   firstMonthInMonthPicker = new Date(),
   dateTestId,
   size = "medium",
+  previousMonthButtonTestId,
+  nextMonthButtonTestId,
 }) => {
   const inputProps = useTravelDateInput(
     value,
@@ -77,6 +81,8 @@ export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
         previousMonthButtonAriaLabel={previousMonthButtonAriaLabel}
         nextMonthButtonAriaLabel={nextMonthButtonAriaLabel}
         calendarSize={size}
+        previousMonthButtonTestId={previousMonthButtonTestId}
+        nextMonthButtonTestId={nextMonthButtonTestId}
       />
 
       {visiblePanel === "calendar" && (

diff --git a/.../components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.stories.tsx b/.../components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.stories.tsx
@@ -53,7 +53,7 @@ export const WithHeading = () => {
   );
 };
 
-export const WithTestId = () => {
+export const WithTestIds = () => {
   const [value, setValue] = useState<TravelDateRangeInputValue | undefined>(
     undefined
   );
@@ -64,13 +64,18 @@ export const WithTestId = () => {
     return undefined;
   };
 
+  const previousMonthButtonTestId = "prev-month-button";
+  const nextMonthButtonTestId = "next-month-button";
+
   return (
     <div style={{ display: "inline-block" }}>
       <TravelDateRangeCalendar
         value={value}
         onValueChange={setValue}
         localeCode={"sv"}
         dateTestId={testId}
+        previousMonthButtonTestId={previousMonthButtonTestId}
+        nextMonthButtonTestId={nextMonthButtonTestId}
       />
     </div>
   );

diff --git a/...ndar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx b/...ndar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx
@@ -25,6 +25,8 @@ export interface TravelDateRangeCalendarProps
   numMonthsInMonthPicker?: number;
   size?: TravelCalendarSizeVariant;
   dateTestId?: (date: Date) => string | undefined;
+  previousMonthButtonTestId?: string;
+  nextMonthButtonTestId?: string;
 }
 
 export const TravelDateRangeCalendar: React.FC<
@@ -44,6 +46,8 @@ export const TravelDateRangeCalendar: React.FC<
   firstMonthInMonthPicker = new Date(),
   size = "medium",
   dateTestId,
+  previousMonthButtonTestId,
+  nextMonthButtonTestId,
 }) => {
   const inputProps = useTravelDateRangeInput(
     value,
@@ -82,6 +86,8 @@ export const TravelDateRangeCalendar: React.FC<
         previousMonthButtonAriaLabel={previousMonthButtonAriaLabel}
         nextMonthButtonAriaLabel={nextMonthButtonAriaLabel}
         calendarSize={size}
+        previousMonthButtonTestId={previousMonthButtonTestId}
+        nextMonthButtonTestId={nextMonthButtonTestId}
       />
 
       {visiblePanel === "calendar" && (

diff --git a/packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.stories.tsx b/packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.stories.tsx
@@ -54,7 +54,7 @@ export const WithHeading = () => {
   );
 };
 
-export const WithTestId = () => {
+export const WithTestIds = () => {
   const [value, setValue] = useState<string>("");
 
   const testId = (date: Date) => {
@@ -64,13 +64,18 @@ export const WithTestId = () => {
     return undefined;
   };
 
+  const previousMonthButtonTestId = "prev-month-button";
+  const nextMonthButtonTestId = "next-month-button";
+
   return (
     <div style={{ display: "inline-block", padding: "150px 80px" }}>
       <TravelDateInput
         value={value}
         onValueChange={setValue}
         localeCode={"sv"}
         dateTestId={testId}
+        previousMonthButtonTestId={previousMonthButtonTestId}
+        nextMonthButtonTestId={nextMonthButtonTestId}
       />
     </div>
   );

diff --git a/packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.tsx b/packages/calendar/src/components/input-types/travel-date-input/TravelDateInput.tsx
@@ -47,6 +47,8 @@ export interface TravelDateInputProps
   renderBelowCalendar?: (args: RenderBelowSingleDateCalendarArgs) => ReactNode;
   size?: TravelCalendarSizeVariant;
   dateTestId?: (date: Date) => string | undefined;
+  previousMonthButtonTestId?: string;
+  nextMonthButtonTestId?: string;
 }
 
 export const TravelDateInput: React.FC<TravelDateInputProps> = ({
@@ -67,6 +69,8 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
   renderBelowCalendar,
   size = "medium",
   dateTestId,
+  previousMonthButtonTestId,
+  nextMonthButtonTestId,
 }) => {
   const [calendarOpen, setCalendarOpen] = useState(false);
   const [calendarInDom, setCalendarInDom] = useState(false);
@@ -196,6 +200,8 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
                 previousMonthButtonAriaLabel={previousMonthButtonAriaLabel}
                 nextMonthButtonAriaLabel={nextMonthButtonAriaLabel}
                 calendarSize={size}
+                previousMonthButtonTestId={previousMonthButtonTestId}
+                nextMonthButtonTestId={nextMonthButtonTestId}
               />
 
               {visiblePanel === "calendar" && (

diff --git a/...endar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.stories.tsx b/...endar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.stories.tsx
@@ -59,7 +59,7 @@ export const WithHeading = () => {
   );
 };
 
-export const WithTestId = () => {
+export const WithTestIds = () => {
   const [value, setValue] = useState<TravelDateRangeInputValue | undefined>(
     undefined
   );
@@ -70,6 +70,9 @@ export const WithTestId = () => {
     return undefined;
   };
 
+  const previousMonthButtonTestId = "prev-month-button";
+  const nextMonthButtonTestId = "next-month-button";
+
   return (
     <div style={{ display: "inline-block", padding: "150px 80px" }}>
       <TravelDateRangeInput
@@ -78,6 +81,8 @@ export const WithTestId = () => {
         localeCode={"sv"}
         heading={"Select dates"}
         dateTestId={testId}
+        previousMonthButtonTestId={previousMonthButtonTestId}
+        nextMonthButtonTestId={nextMonthButtonTestId}
       />
     </div>
   );

diff --git a/...ages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.tsx b/...ages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.tsx
@@ -49,6 +49,8 @@ export interface TravelDateRangeInputProps
   renderBelowCalendar?: (args: RenderBelowCalendarArgs) => ReactNode;
   size?: TravelCalendarSizeVariant;
   dateTestId?: (date: Date) => string | undefined;
+  previousMonthButtonTestId?: string;
+  nextMonthButtonTestId?: string;
 }
 
 export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
@@ -70,6 +72,8 @@ export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
   renderBelowCalendar,
   size = "medium",
   dateTestId,
+  previousMonthButtonTestId,
+  nextMonthButtonTestId,
 }) => {
   const [calendarOpen, setCalendarOpen] = useState(false);
   const [calendarInDom, setCalendarInDom] = useState(false);
@@ -199,6 +203,8 @@ export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
                 previousMonthButtonAriaLabel={previousMonthButtonAriaLabel}
                 nextMonthButtonAriaLabel={nextMonthButtonAriaLabel}
                 calendarSize={size}
+                previousMonthButtonTestId={previousMonthButtonTestId}
+                nextMonthButtonTestId={nextMonthButtonTestId}
               />
 
               {visiblePanel === "calendar" && (

diff --git a/packages/calendar/src/features/travel-calendar/components/MonthHeader.tsx b/packages/calendar/src/features/travel-calendar/components/MonthHeader.tsx
@@ -24,6 +24,8 @@ export interface MonthHeaderProps {
   setVisibleMonth: (date: Date) => void;
   prevMonthDisabled: boolean;
   calendarSize: TravelCalendarSizeVariant;
+  previousMonthButtonTestId?: string;
+  nextMonthButtonTestId?: string;
 }
 
 export const MonthHeader: React.FC<MonthHeaderProps> = ({
@@ -37,6 +39,8 @@ export const MonthHeader: React.FC<MonthHeaderProps> = ({
   visibleMonth,
   prevMonthDisabled,
   calendarSize,
+  previousMonthButtonTestId,
+  nextMonthButtonTestId,
 }) => {
   return (
     <Row alignSelf={"center"} justifyContent={"space-between"} width={"100%"}>
@@ -59,12 +63,14 @@ export const MonthHeader: React.FC<MonthHeaderProps> = ({
           disabled={prevMonthDisabled}
           aria-label={previousMonthButtonAriaLabel}
           size={calendarSize === "small" ? "medium" : "large"}
+          data-testid={previousMonthButtonTestId}
         />
         <SecondaryButton
           leftIcon={stenaArrowRight}
           onClick={() => setVisibleMonth(addMonths(visibleMonth, 1))}
           aria-label={nextMonthButtonAriaLabel}
           size={calendarSize === "small" ? "medium" : "large"}
+          data-testid={nextMonthButtonTestId}
         />
       </Row>
     </Row>