test: fix date-picker tests in stories

cultureamp · Jan 17, 2024 · 5b71d3b · 5b71d3b
1 parent 6a46e41
commit 5b71d3b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 38 deletions.
diff --git a/packages/components/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx b/packages/components/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx
@@ -96,29 +96,40 @@ const StickerSheetTemplate: StickerSheetStory = {
 const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   const canvas = within(canvasElement)
 
-  const getElementWithinCalendar = (id: string, name: string): HTMLElement => {
+  const getElementWithinCalendar = (
+    id: string,
+    monthName: string,
+    dayName: string
+  ): HTMLElement => {
     const calendar = canvas.getByTestId(id)
-    return within(calendar).getByRole("button", { name })
+    const month = within(calendar).getByRole("grid", { name: monthName })
+    return within(month).getByRole("gridcell", { name: dayName })
   }
 
   const calendarsPseudoStates = [
     {
       id: "id__calendar-range__start",
-      buttonDescription: "19th February (Saturday)",
+      monthName: "February 2022",
+      dayName: "19",
     },
     {
       id: "id__calendar-range__middle",
-      buttonDescription: "26th February (Saturday)",
+      monthName: "February 2022",
+      dayName: "26",
+    },
+    {
+      id: "id__calendar-range__end",
+      monthName: "March 2022",
+      dayName: "4",
     },
-    { id: "id__calendar-range__end", buttonDescription: "4th March (Friday)" },
   ]
 
-  calendarsPseudoStates.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(`${id}--hover`, buttonDescription).setAttribute(
+  calendarsPseudoStates.forEach(({ id, monthName, dayName }) => {
+    getElementWithinCalendar(`${id}--hover`, monthName, dayName).setAttribute(
       "data-sb-pseudo-styles",
       "hover"
     )
-    getElementWithinCalendar(`${id}--focus`, buttonDescription).setAttribute(
+    getElementWithinCalendar(`${id}--focus`, monthName, dayName).setAttribute(
       "data-sb-pseudo-styles",
       "focus"
     )

diff --git a/...ages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx b/...ages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx
@@ -109,9 +109,13 @@ const StickerSheetTemplate: StickerSheetStory = {
 const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   const canvas = within(canvasElement)
 
-  const getElementWithinCalendar = (id: string, name: string): HTMLElement => {
+  const getElementWithinCalendar = (
+    id: string,
+    role: string,
+    name: string
+  ): HTMLElement => {
     const calendar = canvas.getByTestId(id)
-    return within(calendar).getByRole("button", { name })
+    return within(calendar).getByRole(role, { name })
   }
 
   const todayCalendarIds = [
@@ -121,44 +125,33 @@ const applyStickerSheetStyles = (canvasElement: HTMLElement): void => {
   ]
 
   todayCalendarIds.forEach(id => {
-    getElementWithinCalendar(id, "1st May (Sunday)").classList.add(
-      styles.dayToday
-    )
+    getElementWithinCalendar(id, "gridcell", "1").classList.add(styles.dayToday)
   })
 
-  const calendarsHover = [
-    { id: "id--calendar--hover", buttonDescription: "5th September (Sunday)" },
+  const calendarsPseudoStates = [
+    {
+      id: "id--calendar",
+      role: "gridcell",
+      name: "5",
+    },
     {
-      id: "id--calendar-selected--hover",
-      buttonDescription: "5th September (Sunday)",
+      id: "id--calendar-selected",
+      role: "gridcell",
+      name: "5",
     },
     {
-      id: "id--calendar-navigation--hover",
-      buttonDescription: "Go to previous month",
+      id: "id--calendar-navigation",
+      role: "button",
+      name: "Go to previous month",
     },
   ]
 
-  calendarsHover.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(id, buttonDescription).setAttribute(
+  calendarsPseudoStates.forEach(({ id, role, name }) => {
+    getElementWithinCalendar(`${id}--hover`, role, name).setAttribute(
       "data-sb-pseudo-styles",
       "hover"
     )
-  })
-
-  const calendarsFocus = [
-    { id: "id--calendar--focus", buttonDescription: "5th September (Sunday)" },
-    {
-      id: "id--calendar-selected--focus",
-      buttonDescription: "5th September (Sunday)",
-    },
-    {
-      id: "id--calendar-navigation--focus",
-      buttonDescription: "Go to previous month",
-    },
-  ]
-
-  calendarsFocus.forEach(({ id, buttonDescription }) => {
-    getElementWithinCalendar(id, buttonDescription).setAttribute(
+    getElementWithinCalendar(`${id}--focus`, role, name).setAttribute(
       "data-sb-pseudo-styles",
       "focus"
     )

diff --git a/packages/components/src/Filter/FilterDatePicker/FilterDatePicker.spec.stories.tsx b/packages/components/src/Filter/FilterDatePicker/FilterDatePicker.spec.stories.tsx
@@ -61,7 +61,7 @@ export const SubmitInputViaEnterKey: Story = {
     })
 
     await step("Type value and press Enter key", async () => {
-      const inputDate = getByLabelText("Date")
+      const inputDate = getByLabelText("Date", { selector: "input" })
       await userEvent.click(inputDate)
       await userEvent.type(inputDate, "03/05/2022")
       await userEvent.keyboard("{Enter}")