Skip to content

Commit a179f15

Browse files
test: add tests for year boundary handling in month picker range selection
Add tests to document and verify the expected behavior when selecting month ranges across year boundaries: - Verify keyboard-selected class only appears when preSelection is in the same year as the displayed month picker - Verify in-selecting-range class respects year boundaries - Verify multi-year ranges correctly highlight months in the viewed year These tests confirm that #5637 is working as intended - the month picker correctly handles year boundaries for both keyboard selection and range highlighting. Refs #5637 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 1e9e151 commit a179f15

1 file changed

Lines changed: 90 additions & 0 deletions

File tree

src/test/month_test.test.tsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -775,6 +775,50 @@ describe("Month", () => {
775775
expect(months.length).toBe(1);
776776
expect(months[0]?.textContent).toBe("Jun");
777777
});
778+
779+
it("should not add in-selecting-range class when viewing a different year than the range (#5637)", () => {
780+
// Scenario: User selected January 2025 as start date, now viewing 2024
781+
// January 2024 should NOT show as in-selecting-range
782+
const { container } = render(
783+
<Month
784+
preSelection={newDate("2025-01-15")}
785+
day={newDate("2024-01-01")} // Viewing 2024
786+
startDate={newDate("2025-01-01")} // Range starts in 2025
787+
selectingDate={newDate("2025-03-01")} // Selecting March 2025
788+
selectsRange
789+
showMonthYearPicker
790+
/>,
791+
);
792+
const months = container.querySelectorAll(
793+
".react-datepicker__month-text--in-selecting-range",
794+
);
795+
796+
// No months in 2024 should be highlighted since the range is entirely in 2025
797+
expect(months.length).toBe(0);
798+
});
799+
800+
it("should add in-selecting-range class correctly when range spans multiple years", () => {
801+
// Scenario: Range from Nov 2024 to Mar 2025, viewing 2024
802+
// Nov and Dec 2024 should be in range
803+
const { container } = render(
804+
<Month
805+
preSelection={newDate("2024-11-15")}
806+
day={newDate("2024-01-01")} // Viewing 2024
807+
startDate={newDate("2024-11-01")} // Range starts Nov 2024
808+
selectingDate={newDate("2025-03-01")} // Selecting March 2025
809+
selectsRange
810+
showMonthYearPicker
811+
/>,
812+
);
813+
const months = container.querySelectorAll(
814+
".react-datepicker__month-text--in-selecting-range",
815+
);
816+
817+
// Nov and Dec 2024 should be in range
818+
expect(months.length).toBe(2);
819+
expect(months[0]?.textContent).toBe("Nov");
820+
expect(months[1]?.textContent).toBe("Dec");
821+
});
778822
});
779823

780824
describe("selecting quarter range", () => {
@@ -2729,6 +2773,52 @@ describe("Month", () => {
27292773
expect(selected).not.toBeNull();
27302774
expect(keyboardSelected).toBeNull();
27312775
});
2776+
2777+
it("should not apply the keyboard-selected class when preSelection is in a different year than the displayed month picker (#5637)", () => {
2778+
// When viewing 2024 but preSelection is January 2025,
2779+
// January 2024 should NOT have keyboard-selected class
2780+
const preSelectionDate = newDate("2025-01-15"); // January 2025
2781+
const displayedYear = newDate("2024-01-01"); // Viewing 2024
2782+
2783+
const { container } = render(
2784+
<Month
2785+
day={displayedYear}
2786+
preSelection={preSelectionDate}
2787+
showMonthYearPicker
2788+
/>,
2789+
);
2790+
2791+
// January in the 2024 view should NOT be keyboard-selected
2792+
// because preSelection is January 2025 (different year)
2793+
const keyboardSelected = container.querySelector(
2794+
".react-datepicker__month-text--keyboard-selected",
2795+
);
2796+
2797+
expect(keyboardSelected).toBeNull();
2798+
});
2799+
2800+
it("should apply the keyboard-selected class when preSelection is in the same year as the displayed month picker", () => {
2801+
// When viewing 2025 and preSelection is January 2025,
2802+
// January 2025 SHOULD have keyboard-selected class
2803+
const preSelectionDate = newDate("2025-01-15"); // January 2025
2804+
const displayedYear = newDate("2025-06-01"); // Viewing 2025
2805+
2806+
const { container } = render(
2807+
<Month
2808+
day={displayedYear}
2809+
preSelection={preSelectionDate}
2810+
showMonthYearPicker
2811+
/>,
2812+
);
2813+
2814+
// January in the 2025 view SHOULD be keyboard-selected
2815+
const keyboardSelected = container.querySelector(
2816+
".react-datepicker__month-text--keyboard-selected",
2817+
);
2818+
2819+
expect(keyboardSelected).not.toBeNull();
2820+
expect(keyboardSelected?.textContent).toBe("Jan");
2821+
});
27322822
});
27332823

27342824
describe("Auto-Focus", () => {

0 commit comments

Comments
 (0)