From 2407102120fe116870ab9d0ea95b59fd3af5566a Mon Sep 17 00:00:00 2001
From: Yoorkevich <85652227+Yoorkevich@users.noreply.github.com>
Date: Wed, 28 Aug 2024 09:54:51 +0200
Subject: [PATCH] Add data test ids for travel calendar month buttons (#773)

* - add data-testIds to buttons in MonthHeader

* - rename stories

* - remove undefined from prop
---
 .../travel-date-calendar/TravelDateCalendar.stories.tsx   | 8 +++++++-
 .../travel-date-calendar/TravelDateCalendar.tsx           | 6 ++++++
 .../TravelDateRangeCalendar.stories.tsx                   | 7 ++++++-
 .../TravelDateRangeCalendar.tsx                           | 6 ++++++
 .../travel-date-input/TravelDateInput.stories.tsx         | 7 ++++++-
 .../input-types/travel-date-input/TravelDateInput.tsx     | 6 ++++++
 .../TravelDateRangeInput.stories.tsx                      | 7 ++++++-
 .../travel-date-range-input/TravelDateRangeInput.tsx      | 6 ++++++
 .../features/travel-calendar/components/MonthHeader.tsx   | 6 ++++++
 9 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.stories.tsx b/packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.stories.tsx
index 87b7a86b8..616272738 100644
--- a/packages/calendar/src/components/calendar-types/travel-date-calendar/TravelDateCalendar.stories.tsx
+++ b/packages/calendar/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,6 +57,10 @@ export const WithTestId = () => {
     }
     return undefined;
   };
+
+  const previousMonthButtonTestId = "prev-month-button";
+  const nextMonthButtonTestId = "next-month-button";
+
   return (
     <div style={{ display: "inline-block" }}>
       <TravelDateCalendar
@@ -64,6 +68,8 @@ export const WithTestId = () => {
         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
index cf602e58e..8028f5975 100644
--- 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/packages/calendar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.stories.tsx b/packages/calendar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.stories.tsx
index f31b9563d..bb3ce90d0 100644
--- a/packages/calendar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.stories.tsx
+++ b/packages/calendar/src/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,6 +64,9 @@ export const WithTestId = () => {
     return undefined;
   };
 
+  const previousMonthButtonTestId = "prev-month-button";
+  const nextMonthButtonTestId = "next-month-button";
+
   return (
     <div style={{ display: "inline-block" }}>
       <TravelDateRangeCalendar
@@ -71,6 +74,8 @@ export const WithTestId = () => {
         onValueChange={setValue}
         localeCode={"sv"}
         dateTestId={testId}
+        previousMonthButtonTestId={previousMonthButtonTestId}
+        nextMonthButtonTestId={nextMonthButtonTestId}
       />
     </div>
   );
diff --git a/packages/calendar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx b/packages/calendar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx
index fdbf9f079..eefe93a48 100644
--- a/packages/calendar/src/components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.tsx
+++ b/packages/calendar/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
index e71d1e61d..4906592f6 100644
--- 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,6 +64,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" }}>
       <TravelDateInput
@@ -71,6 +74,8 @@ export const WithTestId = () => {
         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
index a9f15ab41..d7d69eb58 100644
--- 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/packages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.stories.tsx b/packages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.stories.tsx
index ea0b633ea..873aba8a3 100644
--- a/packages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.stories.tsx
+++ b/packages/calendar/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/packages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.tsx b/packages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.tsx
index 19af415f5..6b94250f2 100644
--- a/packages/calendar/src/components/input-types/travel-date-range-input/TravelDateRangeInput.tsx
+++ b/packages/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
index 4170274c3..215144075 100644
--- 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>