fix(use-calendar-picker): added test for the fixed behaviour (nextui-…

…org#3785)
buchananwill · Sep 23, 2024 · d6b00bc · d6b00bc
1 parent 66108cd
commit d6b00bc
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 63 deletions.
diff --git a/packages/components/accordion/src/accordion-tree.tsx b/packages/components/accordion/src/accordion-tree.tsx
diff --git a/packages/components/calendar/src/calendar-header.tsx b/packages/components/calendar/src/calendar-header.tsx
@@ -18,6 +18,8 @@ export interface CalendarHeaderProps extends HTMLNextUIProps<"header"> {
   buttonPickerProps?: ButtonProps;
 }
 
+export const monthAndYearPickerToggle = "Month and year picker toggle";
+
 export function CalendarHeader(props: CalendarHeaderProps) {
   const {direction, date, currentMonth, buttonPickerProps} = props;
 
@@ -99,6 +101,7 @@ export function CalendarHeader(props: CalendarHeaderProps) {
   return showMonthAndYearPickers ? (
     <Button
       {...headerProps}
+      aria-label={monthAndYearPickerToggle}
       disableAnimation={disableAnimation}
       endContent={<ChevronDownIcon className="chevron-icon" />}
       onKeyDown={handleKeyDown}

diff --git a/packages/components/date-picker/__tests__/date-picker.test.tsx b/packages/components/date-picker/__tests__/date-picker.test.tsx
@@ -5,6 +5,7 @@ import {pointerMap, triggerPress} from "@nextui-org/test-utils";
 import userEvent from "@testing-library/user-event";
 import {CalendarDate, CalendarDateTime} from "@internationalized/date";
 import {NextUIProvider} from "@nextui-org/system";
+import {monthAndYearPickerToggle} from "@nextui-org/calendar/src/calendar-header";
 
 import {DatePicker as DatePickerBase, DatePickerProps} from "../src";
 
@@ -524,6 +525,7 @@ describe("DatePicker", () => {
 
   describe("Month and Year Picker", () => {
     const onHeaderExpandedChangeSpy = jest.fn();
+    const valueChangeSpy = jest.fn();
 
     afterEach(() => {
       onHeaderExpandedChangeSpy.mockClear();
@@ -600,6 +602,48 @@ describe("DatePicker", () => {
       expect(onHeaderExpandedChangeSpy).not.toHaveBeenCalled();
     });
 
+    it("should focus the month and year when pressed in the picker", () => {
+      const {getByRole, getByLabelText} = render(
+        <DatePicker
+          showMonthAndYearPickers
+          calendarProps={{
+            isHeaderExpanded: true,
+            onChange: valueChangeSpy,
+          }}
+          defaultValue={new CalendarDate(2024, 4, 26)}
+          label="Date"
+        />,
+      );
+      const dialogButton = getByRole("button");
+
+      triggerPress(dialogButton);
+
+      const dialog = getByRole("dialog");
+      const month = getByRole("button", {name: "April"});
+      const year = getByRole("button", {name: "2024"});
+
+      expect(dialog).toBeVisible();
+      expect(month).toHaveAttribute("data-value", "4");
+      expect(year).toHaveAttribute("data-value", "2024");
+
+      const button = getByLabelText(monthAndYearPickerToggle);
+
+      triggerPress(button);
+
+      const monthBefore = getByRole("button", {name: "March"});
+      const yearBefore = getByRole("button", {name: "2023"});
+
+      expect(monthBefore).toHaveAttribute("data-value", "3");
+      expect(yearBefore).toHaveAttribute("data-value", "2023");
+      expect(monthBefore).toHaveAttribute("tabindex", "-1");
+      expect(yearBefore).toHaveAttribute("tabindex", "-1");
+      triggerPress(monthBefore);
+      triggerPress(yearBefore);
+      expect(valueChangeSpy).not.toHaveBeenCalled();
+      expect(monthBefore).toHaveAttribute("tabindex", "0");
+      expect(yearBefore).toHaveAttribute("tabindex", "0");
+    });
+
     it("CalendarBottomContent should render correctly", () => {
       const {getByRole, getByTestId} = render(
         <DatePicker