From 6ce60d428951bea947e5fbef192b0da814c71c2e Mon Sep 17 00:00:00 2001 From: yuki0410-dev <> Date: Mon, 4 Mar 2024 11:30:50 +0900 Subject: [PATCH] fix tests (enzyme to RTL) --- test/calendar_test.test.js | 38 ++++++++++++++++++------------- test/datepicker_test.test.js | 26 ++++++++++----------- test/day_test.test.js | 36 +++++++++++++++-------------- test/month_test.test.js | 42 ++++++++++++++++++---------------- test/week_test.test.js | 44 +++++++++++++++++------------------- 5 files changed, 97 insertions(+), 89 deletions(-) diff --git a/test/calendar_test.test.js b/test/calendar_test.test.js index cb713b1088..c2a90b6147 100644 --- a/test/calendar_test.test.js +++ b/test/calendar_test.test.js @@ -3,9 +3,9 @@ */ import React from "react"; +import { render, fireEvent } from "@testing-library/react"; import Calendar from "../src/calendar"; import Month from "../src/month"; -import Day from "../src/day"; import ReactDOM from "react-dom"; import TestUtils from "react-dom/test-utils"; import YearDropdown from "../src/year_dropdown"; @@ -859,39 +859,45 @@ describe("Calendar", () => { }); it("should track the currently hovered day (Mouse Event)", () => { - const calendar = mount( + const onDayMouseEnterSpy = jest.fn(); + + const { container } = render( {}} onSelect={() => {}} + onDayMouseEnter={onDayMouseEnterSpy} />, ); - const day = calendar.find(Day).first(); - day.simulate("mouseenter"); - const month = calendar.find(Month).first(); - expect(month.prop("selectingDate")).toBeDefined(); - expect(utils.isSameDay(month.prop("selectingDate"), day.prop("day"))).toBe( - true, + + const day = container.querySelector(".react-datepicker__day"); + fireEvent.mouseEnter(day); + + expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( + utils.getStartOfWeek(utils.getStartOfMonth(utils.newDate())), ); }); - it("should track the currently hovered day (Pointer Event)", () => { - const calendar = mount( + it("should track the currently hovered day (Pointer Event)", () => { + const onDayMouseEnterSpy = jest.fn(); + + const { container } = render( {}} onSelect={() => {}} + onDayMouseEnter={onDayMouseEnterSpy} usePointerEvent />, ); - const day = calendar.find(Day).first(); - day.simulate("pointerenter"); - const month = calendar.find(Month).first(); - expect(month.prop("selectingDate")).toBeDefined(); - expect(utils.isSameDay(month.prop("selectingDate"), day.prop("day"))).toBe( - true, + + const day = container.querySelector(".react-datepicker__day"); + fireEvent.pointerEnter(day); + + expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( + utils.getStartOfWeek(utils.getStartOfMonth(utils.newDate())), ); }); diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js index 96baa7a0f7..dda639b39d 100644 --- a/test/datepicker_test.test.js +++ b/test/datepicker_test.test.js @@ -2592,7 +2592,7 @@ describe("DatePicker", () => { it("should call onYearMouseEnter and onYearMouseEnter (Mouse Event)", () => { const onYearMouseEnterSpy = jest.fn(); const onYearMouseLeaveSpy = jest.fn(); - const datePicker = mount( + const { container } = render( { />, ); - const dateInputWrapper = datePicker.find("input"); - dateInputWrapper.simulate("click"); - const calendarWrapper = datePicker.find("Calendar"); - const selectedYear = calendarWrapper.find( + const dateInput = container.querySelector("input"); + fireEvent.focus(dateInput); + const selectedYear = container.querySelector( ".react-datepicker__year-text--selected", ); - selectedYear.simulate("mouseenter"); - selectedYear.simulate("mouseleave"); + fireEvent.mouseEnter(selectedYear); + fireEvent.mouseLeave(selectedYear); expect(onYearMouseEnterSpy).toHaveBeenCalled(); expect(onYearMouseLeaveSpy).toHaveBeenCalled(); @@ -2618,7 +2617,7 @@ describe("DatePicker", () => { it("should call onYearMouseEnter and onYearMouseEnter (Pointer Event)", () => { const onYearMouseEnterSpy = jest.fn(); const onYearMouseLeaveSpy = jest.fn(); - const datePicker = mount( + const { container } = render( { />, ); - const dateInputWrapper = datePicker.find("input"); - dateInputWrapper.simulate("click"); - const calendarWrapper = datePicker.find("Calendar"); - const selectedYear = calendarWrapper.find( + const dateInput = container.querySelector("input"); + fireEvent.focus(dateInput); + const selectedYear = container.querySelector( ".react-datepicker__year-text--selected", ); - selectedYear.simulate("pointerenter"); - selectedYear.simulate("pointerleave"); + fireEvent.pointerEnter(selectedYear); + fireEvent.pointerLeave(selectedYear); expect(onYearMouseEnterSpy).toHaveBeenCalled(); expect(onYearMouseLeaveSpy).toHaveBeenCalled(); diff --git a/test/day_test.test.js b/test/day_test.test.js index 428cb15a3a..6f7b768ea0 100644 --- a/test/day_test.test.js +++ b/test/day_test.test.js @@ -1,4 +1,5 @@ import React from "react"; +import { render, fireEvent } from "@testing-library/react"; import { es } from "date-fns/locale"; import Day from "../src/day"; import { mount, shallow } from "enzyme"; @@ -915,29 +916,30 @@ describe("Day", () => { }); describe("mouse enter", () => { - var onMouseEnterCalled; + it("should call onMouseEnter if day is hovered", () => { + const onMouseEnterSpy = jest.fn(); - function onMouseEnter() { - onMouseEnterCalled = true; - } + const day = newDate(); - beforeEach(() => { - onMouseEnterCalled = false; - }); + const { container } = render( + , + ); - it("should call onMouseEnter if day is hovered", () => { - const shallowDay = renderDay(newDate(), { onMouseEnter }); - shallowDay.find(".react-datepicker__day").simulate("mouseenter"); - expect(onMouseEnterCalled).toBe(true); + fireEvent.mouseEnter(container.querySelector(".react-datepicker__day")); + expect(onMouseEnterSpy).toHaveBeenCalled(); }); it("should call onPointerEnter if day is hovered", () => { - const shallowDay = renderDay(newDate(), { - onMouseEnter, - usePointerEvent: true, - }); - shallowDay.find(".react-datepicker__day").simulate("pointerenter"); - expect(onMouseEnterCalled).toBe(true); + const onMouseEnterSpy = jest.fn(); + + const day = newDate(); + + const { container } = render( + , + ); + + fireEvent.pointerEnter(container.querySelector(".react-datepicker__day")); + expect(onMouseEnterSpy).toHaveBeenCalled(); }); }); diff --git a/test/month_test.test.js b/test/month_test.test.js index 8998f61936..b88d878c4a 100644 --- a/test/month_test.test.js +++ b/test/month_test.test.js @@ -131,37 +131,41 @@ describe("Month", () => { }); it("should call the provided onDayMouseEnter (Mouse Event) function", () => { - let dayMouseEntered = null; + const onDayMouseEnterSpy = jest.fn(); - function onDayMouseEnter(day) { - dayMouseEntered = day; - } + const startDay = utils.newDate(); - const month = mount( - , + const { container } = render( + , + ); + + const day = container.querySelector(".react-datepicker__day"); + fireEvent.mouseEnter(day); + + expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( + utils.getStartOfWeek(utils.getStartOfMonth(startDay)), ); - const day = month.find(Day).first(); - day.simulate("mouseenter"); - expect(utils.isSameDay(day.prop("day"), dayMouseEntered)).toBe(true); }); it("should call the provided onDayMouseEnter (Pointer Event) function", () => { - let dayMouseEntered = null; + const onDayMouseEnterSpy = jest.fn(); - function onDayMouseEnter(day) { - dayMouseEntered = day; - } + const startDay = utils.newDate(); - const month = mount( + const { container } = render( , ); - const day = month.find(Day).first(); - day.simulate("pointerenter"); - expect(utils.isSameDay(day.prop("day"), dayMouseEntered)).toBe(true); + + const day = container.querySelector(".react-datepicker__day"); + fireEvent.pointerEnter(day); + + expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( + utils.getStartOfWeek(utils.getStartOfMonth(startDay)), + ); }); it("should use its month order in handleDayClick", () => { diff --git a/test/week_test.test.js b/test/week_test.test.js index e3384b666c..117e89efcd 100644 --- a/test/week_test.test.js +++ b/test/week_test.test.js @@ -1,8 +1,9 @@ import React from "react"; +import { render, fireEvent } from "@testing-library/react"; import Week from "../src/week"; import WeekNumber from "../src/week_number"; import Day from "../src/day"; -import { shallow, mount } from "enzyme"; +import { shallow } from "enzyme"; import * as utils from "../src/date_utils"; describe("Week", () => { @@ -162,40 +163,37 @@ describe("Week", () => { }); it("should call the provided onDayMouseEnter (Mouse Event) function", () => { - let dayMouseEntered = null; + const onDayMouseEnterSpy = jest.fn(); + const weekStart = utils.newDate(); + const { container } = render( + , + ); - function onDayMouseEnter(day) { - dayMouseEntered = day; - } + const day = container.querySelector(".react-datepicker__day"); + fireEvent.mouseEnter(day); - const weekStart = utils.newDate(); - const week = mount( - , + expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( + utils.getStartOfWeek(weekStart), ); - const day = week.find(Day).first(); - day.simulate("mouseenter"); - expect(day.prop("day")).toEqual(dayMouseEntered); }); it("should call the provided onDayMouseEnter (Pointer Event) function", () => { - let dayMouseEntered = null; - - function onDayMouseEnter(day) { - dayMouseEntered = day; - } - + const onDayMouseEnterSpy = jest.fn(); const weekStart = utils.newDate(); - // NOTE: `shallow` cannot correctly perform `simulate("pointerenter")`, so `mount` is used - const week = mount( + const { container } = render( , ); - const day = week.find(Day).first(); - day.simulate("pointerenter"); - expect(day.prop("day")).toEqual(dayMouseEntered); + + const day = container.querySelector(".react-datepicker__day"); + fireEvent.pointerEnter(day); + + expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( + utils.getStartOfWeek(weekStart), + ); }); describe("handleWeekClick", () => {