From 409b744980a53ce54e18aa045dd158d0012ee7ba Mon Sep 17 00:00:00 2001 From: ryantanrk <ryantanrk@gmail.com> Date: Sat, 1 Jun 2024 09:26:15 +0800 Subject: [PATCH 1/3] chore: migrate month_test.test.js to typescript --- src/day.tsx | 6 +- ...month_test.test.js => month_test.test.tsx} | 379 ++++++++++-------- 2 files changed, 224 insertions(+), 161 deletions(-) rename test/{month_test.test.js => month_test.test.tsx} (89%) diff --git a/src/day.tsx b/src/day.tsx index 155b085ed..ab7889974 100644 --- a/src/day.tsx +++ b/src/day.tsx @@ -47,7 +47,7 @@ interface DayProps month: number; onClick?: React.MouseEventHandler<HTMLDivElement>; onMouseEnter?: React.MouseEventHandler<HTMLDivElement>; - handleOnKeyDown: React.KeyboardEventHandler<HTMLDivElement>; + handleOnKeyDown?: React.KeyboardEventHandler<HTMLDivElement>; usePointerEvent?: boolean; preSelection?: Date | null; selected?: Date | null; @@ -173,7 +173,9 @@ export default class Day extends Component<DayProps> { event.key = KeyType.Enter; } - this.props.handleOnKeyDown(event); + if (this.props.handleOnKeyDown) { + this.props.handleOnKeyDown(event); + } }; isSameDay = (other: Date | null | undefined) => diff --git a/test/month_test.test.js b/test/month_test.test.tsx similarity index 89% rename from test/month_test.test.js rename to test/month_test.test.tsx index c6958aec9..a82103245 100644 --- a/test/month_test.test.js +++ b/test/month_test.test.tsx @@ -1,22 +1,32 @@ +/* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "assertDateRangeInclusive", "runAxe"] }] */ +import { render, fireEvent, RenderResult } from "@testing-library/react"; +import { es } from "date-fns/locale"; +import range from "lodash/range"; import React from "react"; -import { render, fireEvent } from "@testing-library/react"; -import Month from "../src/month"; + import DatePicker from "../src"; -import range from "lodash/range"; import * as utils from "../src/date_utils"; +import Month from "../src/month"; + import { runAxe } from "./run_axe"; import { getKey } from "./test_utils"; -import { es } from "date-fns/locale"; describe("Month", () => { - function assertDateRangeInclusive(month, start, end) { + function assertDateRangeInclusive( + month: RenderResult, + start: Date, + end: Date, + ) { const dayCount = utils.getDaysDiff(end, start) + 1; const days = month.container.querySelectorAll(".react-datepicker__day"); expect(days).toHaveLength(dayCount); range(0, dayCount).forEach((offset) => { const expectedDay = utils.addDays(start, offset); expect( - utils.isSameDay(days[offset].textContent, expectedDay.toString()), + utils.isSameDay( + new Date(days[offset].textContent as string), + expectedDay, + ), ).toBe(true); }); } @@ -38,7 +48,7 @@ describe("Month", () => { expect( container .querySelector(".react-datepicker__month-text") - .classList.contains(className), + ?.classList.contains(className), ).toBe(true); }); @@ -56,7 +66,7 @@ describe("Month", () => { expect( container .querySelector(".react-datepicker__month") - .getAttribute("aria-label"), + ?.getAttribute("aria-label"), ).toContain(expectedAriaLabel); }); @@ -71,7 +81,7 @@ describe("Month", () => { expect( container .querySelector(".react-datepicker__month") - .getAttribute("aria-label"), + ?.getAttribute("aria-label"), ).toContain(expectedAriaLabel); }); @@ -103,14 +113,14 @@ describe("Month", () => { expect( container .querySelector(".react-datepicker__month") - .getAttribute("aria-label") - .toLowerCase(), + ?.getAttribute("aria-label") + ?.toLowerCase(), ).toContain(expectedAriaLabel); }); it("should have the month aria-label without any prefix when ariaLabelPrefix is null", () => { const date = utils.newDate("2015-12-01"); - const ariaLabelPrefix = null; + const ariaLabelPrefix = undefined; const { container } = render( <Month day={date} ariaLabelPrefix={ariaLabelPrefix} />, @@ -121,8 +131,8 @@ describe("Month", () => { expect( container .querySelector(".react-datepicker__month") - .getAttribute("aria-label") - .toLowerCase(), + ?.getAttribute("aria-label") + ?.toLowerCase(), ).toContain(expectedAriaLabel); }); @@ -134,7 +144,7 @@ describe("Month", () => { expect( container .querySelector(".react-datepicker__month") - .getAttribute("aria-label"), + ?.getAttribute("aria-label"), ).toContain(ariaLabelPrefix); }); @@ -214,7 +224,7 @@ describe("Month", () => { fireEvent.click( container.querySelector( ".react-datepicker__day:not(.react-datepicker__day--outside-month)", - ), + ) as Element, ); expect(utils.isSameDay(monthStart, dayClicked)).toBe(true); @@ -231,12 +241,14 @@ describe("Month", () => { <Month day={utils.newDate()} onMouseLeave={onMouseLeave} />, ); - fireEvent.mouseLeave(container.querySelector(".react-datepicker__month")); + fireEvent.mouseLeave( + container.querySelector(".react-datepicker__month") as Element, + ); expect(mouseLeaveCalled).toBe(true); }); - it("should call the provided onMouseLeave function", () => { + it("should call the provided onMouseLeave function with usePointerEvent", () => { let mouseLeaveCalled = false; function onMouseLeave() { @@ -251,12 +263,14 @@ describe("Month", () => { />, ); - fireEvent.pointerLeave(container.querySelector(".react-datepicker__month")); + fireEvent.pointerLeave( + container.querySelector(".react-datepicker__month") as Element, + ); expect(mouseLeaveCalled).toBe(true); }); - it("should call the provided onDayMouseEnter (Mouse Event) function", () => { + it("month: should call the provided onDayMouseEnter (Mouse Event) function", () => { const onDayMouseEnterSpy = jest.fn(); const startDay = utils.newDate(); @@ -265,7 +279,7 @@ describe("Month", () => { <Month day={startDay} onDayMouseEnter={onDayMouseEnterSpy} />, ); - const day = container.querySelector(".react-datepicker__day"); + const day = container.querySelector(".react-datepicker__day") as Element; fireEvent.mouseEnter(day); expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( @@ -273,7 +287,7 @@ describe("Month", () => { ); }); - it("should call the provided onDayMouseEnter (Pointer Event) function", () => { + it("month: should call the provided onDayMouseEnter (Pointer Event) function with usePointerEvent", () => { const onDayMouseEnterSpy = jest.fn(); const startDay = utils.newDate(); @@ -286,7 +300,7 @@ describe("Month", () => { />, ); - const day = container.querySelector(".react-datepicker__day"); + const day = container.querySelector(".react-datepicker__day") as Element; fireEvent.pointerEnter(day); expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( @@ -294,7 +308,7 @@ describe("Month", () => { ); }); - it("should call the provided onDayMouseEnter (Mouse Event) function", () => { + it("month year picker: should call the provided onDayMouseEnter (Mouse Event) function", () => { const onDayMouseEnterSpy = jest.fn(); const startDay = utils.newDate("2024-02-02"); @@ -307,7 +321,9 @@ describe("Month", () => { />, ); - const month = container.querySelector(".react-datepicker__month-text"); + const month = container.querySelector( + ".react-datepicker__month-text", + ) as Element; fireEvent.mouseEnter(month); expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( @@ -315,7 +331,7 @@ describe("Month", () => { ); }); - it("should call the provided onDayMouseEnter (Pointer Event) function", () => { + it("month year picker: should call the provided onDayMouseEnter (Pointer Event) function with usePointerEvent", () => { const onDayMouseEnterSpy = jest.fn(); const startDay = utils.newDate("2024-02-02"); @@ -329,7 +345,9 @@ describe("Month", () => { />, ); - const month = container.querySelector(".react-datepicker__month-text"); + const month = container.querySelector( + ".react-datepicker__month-text", + ) as Element; fireEvent.pointerEnter(month); expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( @@ -337,7 +355,7 @@ describe("Month", () => { ); }); - it("should call the provided onDayMouseEnter (Mouse Event) function", () => { + it("quarter year picker: should call the provided onDayMouseEnter (Mouse Event) function", () => { const onDayMouseEnterSpy = jest.fn(); const startDay = utils.newDate("2024-02-02"); @@ -350,7 +368,9 @@ describe("Month", () => { />, ); - const quarter = container.querySelector(".react-datepicker__quarter-text"); + const quarter = container.querySelector( + ".react-datepicker__quarter-text", + ) as Element; fireEvent.mouseEnter(quarter); expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( @@ -358,7 +378,7 @@ describe("Month", () => { ); }); - it("should call the provided onDayMouseEnter (Pointer Event) function", () => { + it("quarter year picker: should call the provided onDayMouseEnter (Pointer Event) function with usePointerEvent", () => { const onDayMouseEnterSpy = jest.fn(); const startDay = utils.newDate("2024-02-02"); @@ -372,7 +392,9 @@ describe("Month", () => { />, ); - const quarter = container.querySelector(".react-datepicker__quarter-text"); + const quarter = container.querySelector( + ".react-datepicker__quarter-text", + ) as Element; fireEvent.pointerEnter(quarter); expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( @@ -396,7 +418,9 @@ describe("Month", () => { />, ); - fireEvent.click(container.querySelector(".react-datepicker__day")); + fireEvent.click( + container.querySelector(".react-datepicker__day") as Element, + ); expect(orderValueMatched).toBe(true); }); @@ -408,12 +432,12 @@ describe("Month", () => { expect( container .querySelector(".react-datepicker__month") - .classList.contains("react-datepicker__monthPicker"), + ?.classList.contains("react-datepicker__monthPicker"), ).toBe(true); }); it("should call the provided onMonthClick function", () => { - let monthClicked = null; + let monthClicked = 0; function onDayClick(day) { monthClicked = day; @@ -528,7 +552,7 @@ describe("Month", () => { ".react-datepicker__month-text", ); - [(1, 3, 6, 9)].forEach((i) => { + [1, 3, 6, 9].forEach((i) => { const month = monthTexts[i]; expect( month.classList.contains("react-datepicker__month-text--disabled"), @@ -959,7 +983,7 @@ describe("Month", () => { ); const ariaCurrent = container .querySelector(".react-datepicker__month-text--today") - .getAttribute("aria-current"); + ?.getAttribute("aria-current"); expect(ariaCurrent).toBe("date"); }); @@ -971,7 +995,7 @@ describe("Month", () => { ); const ariaCurrent = container .querySelector(".react-datepicker__month-text") - .getAttribute("aria-current"); + ?.getAttribute("aria-current"); expect(ariaCurrent).toBeNull(); }); @@ -982,12 +1006,12 @@ describe("Month", () => { expect( container .querySelector(".react-datepicker__month") - .classList.contains("react-datepicker__quarterPicker"), + ?.classList.contains("react-datepicker__quarterPicker"), ).toBe(true); }); it("should call the provided onQuarterClick function", () => { - let quarterClicked = null; + let quarterClicked = 1; function onDayClick(day) { quarterClicked = day; @@ -1112,7 +1136,9 @@ describe("Month", () => { showQuarterYearPicker />, ); - const quarter = container.querySelector(".react-datepicker__quarter-1"); + const quarter = container.querySelector( + ".react-datepicker__quarter-1", + ) as HTMLElement; expect(quarter.tabIndex).toBe(0); }); @@ -1124,7 +1150,9 @@ describe("Month", () => { showFullMonthYearPicker />, ); - const month = container.querySelector(".react-datepicker__month-1"); + const month = container.querySelector( + ".react-datepicker__month-1", + ) as Element; expect(month.textContent).toBe("February"); }); @@ -1133,7 +1161,9 @@ describe("Month", () => { const { container } = render( <Month day={utils.newDate("2015-12-01")} showMonthYearPicker />, ); - const month = container.querySelector(".react-datepicker__month-1"); + const month = container.querySelector( + ".react-datepicker__month-1", + ) as Element; expect(month.textContent).toBe("Feb"); }); @@ -1152,8 +1182,10 @@ describe("Month", () => { showMonthYearPicker />, ); - const month = container.querySelector(".react-datepicker__month-text"); - const span = month.querySelector("span"); + const month = container.querySelector( + ".react-datepicker__month-text", + ) as Element; + const span = month.querySelector("span") as HTMLSpanElement; expect(span.textContent).toBe("custom render"); expect(span.dataset.day).toBe(day.toString()); }); @@ -1171,8 +1203,10 @@ describe("Month", () => { ); const quarter = container.querySelector( ".react-datepicker__quarter-text", - ); - expect(quarter.querySelector("span").textContent).toBe("custom render"); + ) as Element; + expect( + (quarter.querySelector("span") as HTMLSpanElement).textContent, + ).toBe("custom render"); }); }); @@ -1193,13 +1227,17 @@ describe("Month", () => { preSelection: utils.newDate("2015-04-01"), }); fireEvent.keyDown( - quartersComponent.querySelector(".react-datepicker__quarter-2"), - getKey("Tab"), + quartersComponent.querySelector( + ".react-datepicker__quarter-2", + ) as Element, + getKey(utils.KeyType.Tab), ); fireEvent.keyDown( - quartersComponent.querySelector(".react-datepicker__quarter-2"), - getKey("Enter"), + quartersComponent.querySelector( + ".react-datepicker__quarter-2", + ) as Element, + getKey(utils.KeyType.Enter), ); expect(preSelected.toString()).toBe( @@ -1220,12 +1258,16 @@ describe("Month", () => { preSelection: utils.newDate("2015-04-01"), }); fireEvent.keyDown( - quartersComponent.querySelector(".react-datepicker__quarter-2"), - getKey("Tab"), + quartersComponent.querySelector( + ".react-datepicker__quarter-2", + ) as Element, + getKey(utils.KeyType.Tab), ); fireEvent.keyDown( - quartersComponent.querySelector(".react-datepicker__quarter-2"), - getKey("ArrowRight"), + quartersComponent.querySelector( + ".react-datepicker__quarter-2", + ) as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( @@ -1245,12 +1287,16 @@ describe("Month", () => { preSelection: utils.newDate("2015-04-01"), }); fireEvent.keyDown( - quartersComponent.querySelector(".react-datepicker__quarter-2"), - getKey("Tab"), + quartersComponent.querySelector( + ".react-datepicker__quarter-2", + ) as Element, + getKey(utils.KeyType.Tab), ); fireEvent.keyDown( - quartersComponent.querySelector(".react-datepicker__quarter-2"), - getKey("ArrowLeft"), + quartersComponent.querySelector( + ".react-datepicker__quarter-2", + ) as Element, + getKey(utils.KeyType.ArrowLeft), ); expect(preSelected.toString()).toBe( @@ -1276,7 +1322,7 @@ describe("Month", () => { expect( quartersComponent .querySelector(".react-datepicker__quarter-text--selected") - .classList.contains( + ?.classList.contains( "react-datepicker__quarter-text--keyboard-selected", ), ).toBe(false); @@ -1295,10 +1341,12 @@ describe("Month", () => { />, ); - const dateInput = container.querySelector("input"); + const dateInput = container.querySelector("input") as HTMLInputElement; fireEvent.focus(dateInput); - const month = container.querySelector(".react-datepicker__month-0"); + const month = container.querySelector( + ".react-datepicker__month-0", + ) as Element; fireEvent.keyDown(month, { key: "ArrowDown", @@ -1332,12 +1380,12 @@ describe("Month", () => { preSelection: utils.newDate("2015-02-01"), }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("Tab"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.Tab), ); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("ArrowRight"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( @@ -1357,8 +1405,8 @@ describe("Month", () => { preSelection: utils.newDate("2015-02-01"), }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("ArrowLeft"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.ArrowLeft), ); expect(preSelected.toString()).toBe( @@ -1380,8 +1428,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-7"), - getKey("ArrowUp"), + monthComponent.querySelector(".react-datepicker__month-7") as Element, + getKey(utils.KeyType.ArrowUp), ); expect(preSelected.toString()).toBe( @@ -1403,8 +1451,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-7"), - getKey("ArrowDown"), + monthComponent.querySelector(".react-datepicker__month-7") as Element, + getKey(utils.KeyType.ArrowDown), ); expect(preSelected.toString()).toBe( @@ -1426,8 +1474,10 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-11"), - getKey("ArrowRight"), + monthComponent.querySelector( + ".react-datepicker__month-11", + ) as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( utils.newDate("2016-01-01").toString(), @@ -1448,8 +1498,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-0"), - getKey("ArrowLeft"), + monthComponent.querySelector(".react-datepicker__month-0") as Element, + getKey(utils.KeyType.ArrowLeft), ); expect(preSelected.toString()).toBe( utils.newDate("2014-12-01").toString(), @@ -1470,8 +1520,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("ArrowUp"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.ArrowUp), ); expect(preSelected.toString()).toBe( utils.newDate("2014-10-01").toString(), @@ -1492,8 +1542,10 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-10"), - getKey("ArrowDown"), + monthComponent.querySelector( + ".react-datepicker__month-10", + ) as Element, + getKey(utils.KeyType.ArrowDown), ); expect(preSelected.toString()).toBe( utils.newDate("2016-03-01").toString(), @@ -1517,12 +1569,12 @@ describe("Month", () => { preSelection: utils.newDate("2015-02-01"), }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("Tab"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.Tab), ); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("ArrowRight"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( @@ -1542,8 +1594,8 @@ describe("Month", () => { preSelection: utils.newDate("2015-02-01"), }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("ArrowLeft"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.ArrowLeft), ); expect(preSelected.toString()).toBe( @@ -1565,8 +1617,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-7"), - getKey("ArrowUp"), + monthComponent.querySelector(".react-datepicker__month-7") as Element, + getKey(utils.KeyType.ArrowUp), ); expect(preSelected.toString()).toBe( @@ -1588,8 +1640,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-7"), - getKey("ArrowDown"), + monthComponent.querySelector(".react-datepicker__month-7") as Element, + getKey(utils.KeyType.ArrowDown), ); expect(preSelected.toString()).toBe( @@ -1611,8 +1663,10 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-11"), - getKey("ArrowRight"), + monthComponent.querySelector( + ".react-datepicker__month-11", + ) as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( utils.newDate("2016-01-01").toString(), @@ -1633,8 +1687,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-0"), - getKey("ArrowLeft"), + monthComponent.querySelector(".react-datepicker__month-0") as Element, + getKey(utils.KeyType.ArrowLeft), ); expect(preSelected.toString()).toBe( utils.newDate("2014-12-01").toString(), @@ -1655,8 +1709,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("ArrowUp"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.ArrowUp), ); expect(preSelected.toString()).toBe( utils.newDate("2014-11-01").toString(), @@ -1677,8 +1731,10 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-10"), - getKey("ArrowDown"), + monthComponent.querySelector( + ".react-datepicker__month-10", + ) as Element, + getKey(utils.KeyType.ArrowDown), ); expect(preSelected.toString()).toBe( utils.newDate("2016-02-01").toString(), @@ -1704,12 +1760,12 @@ describe("Month", () => { preSelection: utils.newDate("2015-02-01"), }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("Tab"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.Tab), ); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("ArrowRight"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( @@ -1729,8 +1785,8 @@ describe("Month", () => { preSelection: utils.newDate("2015-02-01"), }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("ArrowLeft"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.ArrowLeft), ); expect(preSelected.toString()).toBe( @@ -1752,8 +1808,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-7"), - getKey("ArrowUp"), + monthComponent.querySelector(".react-datepicker__month-7") as Element, + getKey(utils.KeyType.ArrowUp), ); expect(preSelected.toString()).toBe( @@ -1775,8 +1831,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-7"), - getKey("ArrowDown"), + monthComponent.querySelector(".react-datepicker__month-7") as Element, + getKey(utils.KeyType.ArrowDown), ); expect(preSelected.toString()).toBe( @@ -1798,8 +1854,10 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-11"), - getKey("ArrowRight"), + monthComponent.querySelector( + ".react-datepicker__month-11", + ) as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( utils.newDate("2016-01-01").toString(), @@ -1820,8 +1878,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-0"), - getKey("ArrowLeft"), + monthComponent.querySelector(".react-datepicker__month-0") as Element, + getKey(utils.KeyType.ArrowLeft), ); expect(preSelected.toString()).toBe( utils.newDate("2014-12-01").toString(), @@ -1842,8 +1900,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-0"), - getKey("ArrowUp"), + monthComponent.querySelector(".react-datepicker__month-0") as Element, + getKey(utils.KeyType.ArrowUp), ); expect(preSelected.toString()).toBe( utils.newDate("2014-11-01").toString(), @@ -1864,8 +1922,10 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-10"), - getKey("ArrowDown"), + monthComponent.querySelector( + ".react-datepicker__month-10", + ) as Element, + getKey(utils.KeyType.ArrowDown), ); expect(preSelected.toString()).toBe( utils.newDate("2016-01-01").toString(), @@ -1878,7 +1938,7 @@ describe("Month", () => { it("should select March when Enter is pressed", () => { let preSelected = false; - let selectedDate = null; + let selectedDate = utils.newDate("2015-02-01"); const setPreSelection = () => { preSelected = true; }; @@ -1887,20 +1947,20 @@ describe("Month", () => { }; const monthComponent = renderMonth({ - selected: utils.newDate("2015-02-01"), - day: utils.newDate("2015-02-01"), + selected: selectedDate, + day: selectedDate, setPreSelection: setPreSelection, - preSelection: utils.newDate("2015-02-01"), + preSelection: selectedDate, onDayClick: setSelectedDate, }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("ArrowLeft"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.ArrowLeft), ); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-2"), - getKey("Enter"), + monthComponent.querySelector(".react-datepicker__month-2") as Element, + getKey(utils.KeyType.Enter), ); expect(preSelected).toBe(true); @@ -1910,9 +1970,8 @@ describe("Month", () => { }); it("should select March when Space is pressed", () => { - const SPACE_KEY = " "; let preSelected = false; - let selectedDate = null; + let selectedDate = utils.newDate("2015-02-01"); const setPreSelection = () => { preSelected = true; }; @@ -1921,20 +1980,20 @@ describe("Month", () => { }; const monthComponent = renderMonth({ - selected: utils.newDate("2015-02-01"), - day: utils.newDate("2015-02-01"), + selected: selectedDate, + day: selectedDate, setPreSelection: setPreSelection, - preSelection: utils.newDate("2015-02-01"), + preSelection: selectedDate, onDayClick: setSelectedDate, }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-1"), - getKey("ArrowLeft"), + monthComponent.querySelector(".react-datepicker__month-1") as Element, + getKey(utils.KeyType.ArrowLeft), ); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-2"), - getKey(SPACE_KEY), + monthComponent.querySelector(".react-datepicker__month-2") as Element, + getKey(utils.KeyType.Space), ); expect(preSelected).toBe(true); @@ -1959,8 +2018,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-7"), - getKey("ArrowRight"), + monthComponent.querySelector(".react-datepicker__month-7") as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( utils.newDate("2015-08-01").toString(), @@ -1969,8 +2028,8 @@ describe("Month", () => { it("should prevent selection of disabled month", () => { const excludeDates = [utils.newDate("2015-08-01")]; - let selected = utils.newDate("2015-07-01"); - let day = utils.newDate("2015-08-01"); + const selected = utils.newDate("2015-07-01"); + const day = utils.newDate("2015-08-01"); const monthComponent = renderMonth({ selected: selected, @@ -1982,8 +2041,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-7"), - getKey("Enter"), + monthComponent.querySelector(".react-datepicker__month-7") as Element, + getKey(utils.KeyType.Enter), ); expect(selected).not.toBe(excludeDates[0]); @@ -2004,8 +2063,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-7"), - getKey("ArrowRight"), + monthComponent.querySelector(".react-datepicker__month-7") as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( utils.newDate("2015-08-01").toString(), @@ -2024,11 +2083,11 @@ describe("Month", () => { const enabled = monthComponent.querySelector( ".react-datepicker__month-4", - ); + ) as Element; const disabled = monthComponent.querySelector( ".react-datepicker__month-0", - ); + ) as Element; expect(enabled.getAttribute("aria-label")).toBe("Choose May 2015"); expect(disabled.getAttribute("aria-label")).toBe( @@ -2050,11 +2109,11 @@ describe("Month", () => { const enabled = monthComponent.querySelector( ".react-datepicker__month-4", - ); + ) as Element; const disabled = monthComponent.querySelector( ".react-datepicker__month-0", - ); + ) as Element; expect(enabled.getAttribute("aria-label")).toBe("Select this May 2015"); expect(disabled.getAttribute("aria-label")).toBe( @@ -2080,8 +2139,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-6"), - getKey("ArrowRight"), + monthComponent.querySelector(".react-datepicker__month-6") as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( @@ -2106,8 +2165,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-8"), - getKey("ArrowLeft"), + monthComponent.querySelector(".react-datepicker__month-8") as Element, + getKey(utils.KeyType.ArrowLeft), ); expect(preSelected.toString()).toBe( @@ -2132,8 +2191,10 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-10"), - getKey("ArrowUp"), + monthComponent.querySelector( + ".react-datepicker__month-10", + ) as Element, + getKey(utils.KeyType.ArrowUp), ); expect(preSelected.toString()).toBe( @@ -2158,8 +2219,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-4"), - getKey("ArrowDown"), + monthComponent.querySelector(".react-datepicker__month-4") as Element, + getKey(utils.KeyType.ArrowDown), ); expect(preSelected.toString()).toBe( @@ -2185,8 +2246,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-4"), - getKey("ArrowDown"), + monthComponent.querySelector(".react-datepicker__month-4") as Element, + getKey(utils.KeyType.ArrowDown), ); expect(preSelected.toString()).toBe( @@ -2210,8 +2271,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-2"), - getKey("ArrowLeft"), + monthComponent.querySelector(".react-datepicker__month-2") as Element, + getKey(utils.KeyType.ArrowLeft), ); expect(preSelected.toString()).toBe( @@ -2235,8 +2296,8 @@ describe("Month", () => { }); fireEvent.keyDown( - monthComponent.querySelector(".react-datepicker__month-8"), - getKey("ArrowRight"), + monthComponent.querySelector(".react-datepicker__month-8") as Element, + getKey(utils.KeyType.ArrowRight), ); expect(preSelected.toString()).toBe( @@ -2266,7 +2327,7 @@ describe("Month", () => { expect( monthComponent .querySelector(".react-datepicker__month-text--selected") - .classList.contains( + ?.classList.contains( "react-datepicker__month-text--keyboard-selected", ), ).toBe(false); From 75dee532038f563f584a6e56f1aec27c1cc6fd01 Mon Sep 17 00:00:00 2001 From: ryantanrk <ryantanrk@gmail.com> Date: Sat, 1 Jun 2024 09:34:56 +0800 Subject: [PATCH 2/3] fix: make handleOnKeyDown optional in week number --- src/week_number.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/week_number.tsx b/src/week_number.tsx index b5cab9136..b87c52fb7 100644 --- a/src/week_number.tsx +++ b/src/week_number.tsx @@ -15,7 +15,7 @@ interface WeekNumberProps { disabledKeyboardNavigation?: boolean; inline?: boolean; shouldFocusDayInline?: boolean; - handleOnKeyDown: React.KeyboardEventHandler<HTMLDivElement>; + handleOnKeyDown?: React.KeyboardEventHandler<HTMLDivElement>; containerRef?: React.RefObject<HTMLDivElement>; isInputFocused?: boolean; } @@ -50,7 +50,9 @@ export default class WeekNumber extends Component<WeekNumberProps> { event.key = KeyType.Enter; } - this.props.handleOnKeyDown(event); + if (this.props.handleOnKeyDown) { + this.props.handleOnKeyDown(event); + } }; isKeyboardSelected = (): boolean => From 839ccbb300943480fbef62946879ccc2db034aa8 Mon Sep 17 00:00:00 2001 From: ryantanrk <ryantanrk@gmail.com> Date: Sat, 1 Jun 2024 09:44:21 +0800 Subject: [PATCH 3/3] refactor: import order and handleOnKeyDown null check --- src/day.tsx | 4 +--- src/week_number.tsx | 4 +--- test/month_test.test.tsx | 4 +++- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/day.tsx b/src/day.tsx index ab7889974..3d8f929ed 100644 --- a/src/day.tsx +++ b/src/day.tsx @@ -173,9 +173,7 @@ export default class Day extends Component<DayProps> { event.key = KeyType.Enter; } - if (this.props.handleOnKeyDown) { - this.props.handleOnKeyDown(event); - } + this.props.handleOnKeyDown?.(event); }; isSameDay = (other: Date | null | undefined) => diff --git a/src/week_number.tsx b/src/week_number.tsx index b87c52fb7..00568df35 100644 --- a/src/week_number.tsx +++ b/src/week_number.tsx @@ -50,9 +50,7 @@ export default class WeekNumber extends Component<WeekNumberProps> { event.key = KeyType.Enter; } - if (this.props.handleOnKeyDown) { - this.props.handleOnKeyDown(event); - } + this.props.handleOnKeyDown?.(event); }; isKeyboardSelected = (): boolean => diff --git a/test/month_test.test.tsx b/test/month_test.test.tsx index a82103245..d9be3216e 100644 --- a/test/month_test.test.tsx +++ b/test/month_test.test.tsx @@ -1,5 +1,5 @@ /* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "assertDateRangeInclusive", "runAxe"] }] */ -import { render, fireEvent, RenderResult } from "@testing-library/react"; +import { render, fireEvent } from "@testing-library/react"; import { es } from "date-fns/locale"; import range from "lodash/range"; import React from "react"; @@ -11,6 +11,8 @@ import Month from "../src/month"; import { runAxe } from "./run_axe"; import { getKey } from "./test_utils"; +import type { RenderResult } from "@testing-library/react"; + describe("Month", () => { function assertDateRangeInclusive( month: RenderResult,