Add test ids to travel calendar days (#771)

* - add possibility to add data-testid to travel date components * - prettier
StenaIT · Aug 27, 2024 · 91f0c4a · 91f0c4a
1 parent 849b8c9
commit 91f0c4a
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 15 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
@@ -5,6 +5,7 @@ import { TravelDateCalendar } from "./TravelDateCalendar";
 import { Column, Heading, Row, Spacing } from "@stenajs-webui/core";
 import { Banner, Label } from "@stenajs-webui/elements";
 import { parseLocalizedDateString } from "../../../features/localize-date-format/LocalizedDateParser";
+import { isToday } from "date-fns";
 
 export default {
   title: "calendar/Calendar/TravelDateCalendar",
@@ -47,6 +48,27 @@ export const WithHeading = () => {
   );
 };
 
+export const WithTestId = () => {
+  const [value, setValue] = useState<string>("");
+
+  const testId = (date: Date) => {
+    if (isToday(date)) {
+      return "today";
+    }
+    return undefined;
+  };
+  return (
+    <div style={{ display: "inline-block" }}>
+      <TravelDateCalendar
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        dateTestId={testId}
+      />
+    </div>
+  );
+};
+
 export const Locales = () => {
   const locales = [
     "sv",

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
@@ -22,6 +22,7 @@ export interface TravelDateCalendarProps
   firstMonthInMonthPicker?: Date;
   numMonthsInMonthPicker?: number;
   size?: TravelCalendarSizeVariant;
+  dateTestId?: (date: Date) => string | undefined;
 }
 
 export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
@@ -36,6 +37,7 @@ export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
   headingLevel,
   numMonthsInMonthPicker = 12,
   firstMonthInMonthPicker = new Date(),
+  dateTestId,
   size = "medium",
 }) => {
   const inputProps = useTravelDateInput(
@@ -85,6 +87,7 @@ export const TravelDateCalendar: React.FC<TravelDateCalendarProps> = ({
           selectedEndDate={selectedDate}
           isValidDateRange={Boolean(selectedDate)}
           multiSelectable={false}
+          dateTestId={dateTestId}
         />
       )}
 

diff --git a/.../components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.stories.tsx b/.../components/calendar-types/travel-date-range-calendar/TravelDateRangeCalendar.stories.tsx
@@ -6,6 +6,7 @@ import { Column, Heading, Row, Spacing } from "@stenajs-webui/core";
 import { Banner, Label } from "@stenajs-webui/elements";
 import { TravelDateRangeInputValue } from "../../../features/travel-calendar/types";
 import { parseLocalizedDateString } from "../../../features/localize-date-format/LocalizedDateParser";
+import { isToday } from "date-fns";
 
 export default {
   title: "calendar/Calendar/TravelDateRangeCalendar",
@@ -52,6 +53,29 @@ export const WithHeading = () => {
   );
 };
 
+export const WithTestId = () => {
+  const [value, setValue] = useState<TravelDateRangeInputValue | undefined>(
+    undefined
+  );
+  const testId = (date: Date) => {
+    if (isToday(date)) {
+      return "today";
+    }
+    return undefined;
+  };
+
+  return (
+    <div style={{ display: "inline-block" }}>
+      <TravelDateRangeCalendar
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        dateTestId={testId}
+      />
+    </div>
+  );
+};
+
 export const Locales = () => {
   const locales = [
     "sv",

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
@@ -24,6 +24,7 @@ export interface TravelDateRangeCalendarProps
   firstMonthInMonthPicker?: Date;
   numMonthsInMonthPicker?: number;
   size?: TravelCalendarSizeVariant;
+  dateTestId?: (date: Date) => string | undefined;
 }
 
 export const TravelDateRangeCalendar: React.FC<
@@ -42,6 +43,7 @@ export const TravelDateRangeCalendar: React.FC<
   numMonthsInMonthPicker = 12,
   firstMonthInMonthPicker = new Date(),
   size = "medium",
+  dateTestId,
 }) => {
   const inputProps = useTravelDateRangeInput(
     value,
@@ -83,7 +85,12 @@ export const TravelDateRangeCalendar: React.FC<
       />
 
       {visiblePanel === "calendar" && (
-        <TravelCalendar {...inputProps} size={size} multiSelectable={true} />
+        <TravelCalendar
+          {...inputProps}
+          size={size}
+          multiSelectable={true}
+          dateTestId={dateTestId}
+        />
       )}
 
       {visiblePanel === "month-picker" && (

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
@@ -11,7 +11,7 @@ import {
 } from "@stenajs-webui/elements";
 import { parseLocalizedDateString } from "../../../features/localize-date-format/LocalizedDateParser";
 import { formatLocalizedDate } from "../../../features/localize-date-format/LocalizedDateFormatter";
-import { addDays } from "date-fns";
+import { addDays, isToday } from "date-fns";
 
 export default {
   title: "calendar/Input/TravelDateInput",
@@ -54,6 +54,28 @@ export const WithHeading = () => {
   );
 };
 
+export const WithTestId = () => {
+  const [value, setValue] = useState<string>("");
+
+  const testId = (date: Date) => {
+    if (isToday(date)) {
+      return "today";
+    }
+    return undefined;
+  };
+
+  return (
+    <div style={{ display: "inline-block", padding: "150px 80px" }}>
+      <TravelDateInput
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        dateTestId={testId}
+      />
+    </div>
+  );
+};
+
 export const Sizes = () => {
   const [value, setValue] = useState<string>("");
 

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
@@ -46,6 +46,7 @@ export interface TravelDateInputProps
   onHideCalendar?: () => void;
   renderBelowCalendar?: (args: RenderBelowSingleDateCalendarArgs) => ReactNode;
   size?: TravelCalendarSizeVariant;
+  dateTestId?: (date: Date) => string | undefined;
 }
 
 export const TravelDateInput: React.FC<TravelDateInputProps> = ({
@@ -65,6 +66,7 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
   onHideCalendar,
   renderBelowCalendar,
   size = "medium",
+  dateTestId,
 }) => {
   const [calendarOpen, setCalendarOpen] = useState(false);
   const [calendarInDom, setCalendarInDom] = useState(false);
@@ -204,6 +206,7 @@ export const TravelDateInput: React.FC<TravelDateInputProps> = ({
                   selectedStartDate={selectedDate}
                   selectedEndDate={selectedDate}
                   multiSelectable={false}
+                  dateTestId={dateTestId}
                 />
               )}
 

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
@@ -12,7 +12,7 @@ import {
 import { TravelDateRangeInputValue } from "../../../features/travel-calendar/types";
 import { parseLocalizedDateString } from "../../../features/localize-date-format/LocalizedDateParser";
 import { formatLocalizedDate } from "../../../features/localize-date-format/LocalizedDateFormatter";
-import { addWeeks } from "date-fns";
+import { addWeeks, isToday } from "date-fns";
 
 export default {
   title: "calendar/Input/TravelDateRangeInput",
@@ -59,6 +59,30 @@ export const WithHeading = () => {
   );
 };
 
+export const WithTestId = () => {
+  const [value, setValue] = useState<TravelDateRangeInputValue | undefined>(
+    undefined
+  );
+  const testId = (date: Date) => {
+    if (isToday(date)) {
+      return "today";
+    }
+    return undefined;
+  };
+
+  return (
+    <div style={{ display: "inline-block", padding: "150px 80px" }}>
+      <TravelDateRangeInput
+        value={value}
+        onValueChange={setValue}
+        localeCode={"sv"}
+        heading={"Select dates"}
+        dateTestId={testId}
+      />
+    </div>
+  );
+};
+
 export const Sizes = () => {
   const [value, setValue] = useState<TravelDateRangeInputValue | undefined>(
     undefined

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
@@ -48,6 +48,7 @@ export interface TravelDateRangeInputProps
   onHideCalendar?: () => void;
   renderBelowCalendar?: (args: RenderBelowCalendarArgs) => ReactNode;
   size?: TravelCalendarSizeVariant;
+  dateTestId?: (date: Date) => string | undefined;
 }
 
 export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
@@ -68,6 +69,7 @@ export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
   onHideCalendar,
   renderBelowCalendar,
   size = "medium",
+  dateTestId,
 }) => {
   const [calendarOpen, setCalendarOpen] = useState(false);
   const [calendarInDom, setCalendarInDom] = useState(false);
@@ -204,6 +206,7 @@ export const TravelDateRangeInput: React.FC<TravelDateRangeInputProps> = ({
                   {...inputProps}
                   size={size}
                   multiSelectable={true}
+                  dateTestId={dateTestId}
                 />
               )}
 

diff --git a/packages/calendar/src/features/travel-calendar/components/TravelCalendar.tsx b/packages/calendar/src/features/travel-calendar/components/TravelCalendar.tsx
@@ -24,6 +24,7 @@ export interface TravelCalendarProps {
   hoverDate: Date | undefined;
   today: Date;
   isDateDisabled: (date: Date) => boolean;
+  dateTestId?: (date: Date) => string | undefined;
   calendarId: string;
   todayIsInVisibleMonth: boolean;
   size?: TravelCalendarSizeVariant;
@@ -46,6 +47,7 @@ export const TravelCalendar: React.FC<TravelCalendarProps> = ({
   todayIsInVisibleMonth,
   size = "medium",
   multiSelectable,
+  dateTestId,
 }) => {
   return (
     <table
@@ -84,6 +86,7 @@ export const TravelCalendar: React.FC<TravelCalendarProps> = ({
                   todayIsInVisibleMonth={todayIsInVisibleMonth}
                   calendarId={calendarId}
                   isDateDisabled={isDateDisabled}
+                  dateTestId={dateTestId}
                 />
               ))}
             </tr>

diff --git a/packages/calendar/src/features/travel-calendar/components/TravelDateCell.tsx b/packages/calendar/src/features/travel-calendar/components/TravelDateCell.tsx
@@ -27,6 +27,7 @@ export interface TravelDateCellProps {
   todayIsInVisibleMonth: boolean;
   calendarId: string;
   isDateDisabled: (date: Date) => boolean;
+  dateTestId?: (date: Date) => string | undefined;
   size: TravelCalendarSizeVariant;
 }
 
@@ -46,6 +47,7 @@ export const TravelDateCell: React.FC<TravelDateCellProps> = ({
   calendarId,
   isDateDisabled,
   size,
+  dateTestId,
 }) => {
   const onKeyDown = useCallback<KeyboardEventHandler<HTMLTableDataCellElement>>(
     async (e) => {
@@ -125,6 +127,7 @@ export const TravelDateCell: React.FC<TravelDateCellProps> = ({
       {...(disabled
         ? undefined
         : { "aria-selected": isSelectionStart || isSelectionEnd })}
+      data-testid={dateTestId?.(day.date)}
     >
       <div className={styles.outline} />
 

diff --git a/packages/panels/src/components/sidebar-menu/items/RailMenuLink.tsx b/packages/panels/src/components/sidebar-menu/items/RailMenuLink.tsx
@@ -7,12 +7,11 @@ import {
 } from "@stenajs-webui/elements";
 import { Tooltip } from "@stenajs-webui/tooltip";
 
-export type RailMenuLinkProps =
-  | (
-      | MenuButtonLinkNotSelectedProps
-      | MenuButtonLinkWithSelectedProps
-      | MenuButtonLinkWithRenderLinkProps
-    ) & { label: string };
+export type RailMenuLinkProps = (
+  | MenuButtonLinkNotSelectedProps
+  | MenuButtonLinkWithSelectedProps
+  | MenuButtonLinkWithRenderLinkProps
+) & { label: string };
 
 export const RailMenuLink: React.FC<RailMenuLinkProps> = ({
   label,

diff --git a/packages/panels/src/components/sidebar-menu/items/SidebarMenuLink.tsx b/packages/panels/src/components/sidebar-menu/items/SidebarMenuLink.tsx
@@ -8,12 +8,11 @@ import {
 import { useRailContext } from "../rail/RailContext";
 import { RailMenuLink } from "./RailMenuLink";
 
-export type SidebarMenuLinkProps =
-  | (
-      | MenuButtonLinkNotSelectedProps
-      | MenuButtonLinkWithSelectedProps
-      | MenuButtonLinkWithRenderLinkProps
-    ) & { label: string };
+export type SidebarMenuLinkProps = (
+  | MenuButtonLinkNotSelectedProps
+  | MenuButtonLinkWithSelectedProps
+  | MenuButtonLinkWithRenderLinkProps
+) & { label: string };
 
 export const SidebarMenuLink: React.FC<SidebarMenuLinkProps> = (props) => {
   const isRail = useRailContext();