test: fix datepicker tests

packages/date-picker/src/DatePicker/DatePicker.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { render, screen, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { ValidationResponse } from "../types"
 import { DatePicker } from "./DatePicker"
@@ -166,9 +166,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
 
-      const dateToSelect = screen.getByRole("button", {
-        name: "6th March (Sunday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
 
       const input = screen.getByLabelText("Input label")
@@ -193,9 +192,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -233,9 +231,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.getByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -278,9 +275,8 @@ describe("<DatePicker /> - Focus element", () => {
         expect(screen.getByRole("dialog")).toBeVisible()
       })
 
-      const selectedDate = screen.getByRole("button", {
-        name: "1st March (Tuesday)",
-      })
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const selectedDate = within(month).getByRole("gridcell", { name: "1" })
       expect(selectedDate).toHaveFocus()
     })
 
@@ -418,9 +414,9 @@ describe("<DatePicker /> - Validation", () => {
       await waitFor(() => {
         expect(screen.queryByRole("dialog")).toBeVisible()
       })
-      const dateToSelect = screen.getByRole("button", {
-        name: "6th March (Sunday)",
-      })
+
+      const month = screen.getByRole("grid", { name: "March 2022" })
+      const dateToSelect = within(month).getByRole("gridcell", { name: "6" })
       await user.click(dateToSelect)
       await waitFor(() => {
         expect(onValidate).toBeCalledTimes(1)

packages/date-picker/src/utils/isSelectingDayInCalendar.spec.tsx

@@ -1,15 +1,14 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render, screen, within } from "@testing-library/react"
 import { CalendarSingle } from "../_subcomponents/Calendar"
 import { isSelectingDayInCalendar } from "./isSelectingDayInCalendar"
 
 describe("isSelectingDayInCalendar", () => {
   it("returns true when target is a Calendar day", () => {
     render(<CalendarSingle defaultMonth={new Date("2022-02-01")} />)
-    const calendarDayElement = screen.getByRole("button", {
-      name: "1st February (Tuesday)",
-    })
-    expect(isSelectingDayInCalendar(calendarDayElement)).toBe(true)
+    const targetMonth = screen.getByRole("grid", { name: "February 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "1" })
+    expect(isSelectingDayInCalendar(targetDay)).toBe(true)
   })
 
   it("returns false when target is not a Calendar day", () => {

packages/date-picker/src/utils/setFocusInCalendar.spec.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render, screen, within } from "@testing-library/react"
 import { format } from "date-fns"
 import { enUS } from "date-fns/locale"
 import { CalendarSingle, CalendarSingleProps } from "../_subcomponents/Calendar"
@@ -18,38 +18,43 @@ const CalendarWrapper = (props: Partial<CalendarSingleProps>): JSX.Element => (
 )
 
 const today = new Date()
-const todayFormatted = format(today, "do MMMM (eeee)") // e.g 6th June (Monday)
+const todayMonth = format(today, "MMMM yyyy") // e.g "June 2023"
+const todayDay = today.getDate().toString() // e.g "6"
 
 describe("setFocusInCalendar", () => {
   it("should focus on today when no date is selected", () => {
     render(<CalendarWrapper />)
 
-    const dayToFocus = screen.getByRole("button", { name: todayFormatted })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: todayMonth })
+    const targetDay = within(targetMonth).getByRole("gridcell", {
+      name: todayDay,
+    })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on the selected day", () => {
     render(<CalendarWrapper selected={new Date("2022-08-15")} />)
 
-    const dayToFocus = screen.getByRole("button", {
-      name: "15th August (Monday)",
-    })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: "August 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "15" })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on today when selected date is invalid", () => {
     render(<CalendarWrapper selected={new Date("potato")} />)
 
-    const dayToFocus = screen.getByRole("button", { name: todayFormatted })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: todayMonth })
+    const targetDay = within(targetMonth).getByRole("gridcell", {
+      name: todayDay,
+    })
+    expect(targetDay).toHaveFocus()
   })
 
   it("should focus on the first of the month when there is no selected day nor in the current month", () => {
     render(<CalendarWrapper defaultMonth={new Date("2022-05-01")} />)
 
-    const dayToFocus = screen.getByRole("button", {
-      name: "1st May (Sunday)",
-    })
-    expect(dayToFocus).toHaveFocus()
+    const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "1" })
+    expect(targetDay).toHaveFocus()
   })
 })