fix tests (enzyme to RTL)

Hacker0x01 · Mar 4, 2024 · 046c42d · 046c42d
1 parent a419d08
commit 046c42d
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 90 deletions.
diff --git a/test/calendar_test.test.js b/test/calendar_test.test.js
@@ -5,10 +5,9 @@
 import React from "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 { render } from "@testing-library/react";
+import { render, fireEvent } from "@testing-library/react";
 import YearDropdown from "../src/year_dropdown";
 import MonthDropdown from "../src/month_dropdown";
 import MonthYearDropdown from "../src/month_year_dropdown";
@@ -860,39 +859,45 @@ describe("Calendar", () => {
   });
 
   it("should track the currently hovered day (Mouse Event)", () => {
-    const calendar = mount(
+    const onDayMouseEnterSpy = jest.fn();
+
+    const { container } = render(
       <Calendar
         dateFormat={dateFormat}
         dropdownMode="scroll"
         onClickOutside={() => {}}
         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(
       <Calendar
         dateFormat={dateFormat}
         dropdownMode="scroll"
         onClickOutside={() => {}}
         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
@@ -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(
         <DatePicker
           selected={new Date(2023, 0, 1)}
           showYearPicker
@@ -2601,15 +2601,14 @@ describe("DatePicker", () => {
         />,
       );
 
-      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(
         <DatePicker
           selected={new Date(2023, 0, 1)}
           showYearPicker
@@ -2628,15 +2627,14 @@ describe("DatePicker", () => {
         />,
       );
 
-      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
@@ -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(
+        <Day day={day} onMouseEnter={onMouseEnterSpy} />,
+      );
 
-    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(
+        <Day day={day} onMouseEnter={onMouseEnterSpy} usePointerEvent />,
+      );
+
+      fireEvent.pointerEnter(container.querySelector(".react-datepicker__day"));
+      expect(onMouseEnterSpy).toHaveBeenCalled();
     });
   });
 

diff --git 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(
-      <Month day={utils.newDate()} onDayMouseEnter={onDayMouseEnter} />,
+    const { container } = render(
+      <Month day={startDay} onDayMouseEnter={onDayMouseEnterSpy} />,
+    );
+
+    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(
       <Month
-        day={utils.newDate()}
-        onDayMouseEnter={onDayMouseEnter}
+        day={startDay}
+        onDayMouseEnter={onDayMouseEnterSpy}
         usePointerEvent
       />,
     );
-    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
@@ -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(
+      <Week day={weekStart} onDayMouseEnter={onDayMouseEnterSpy} />,
+    );
 
-    function onDayMouseEnter(day) {
-      dayMouseEntered = day;
-    }
+    const day = container.querySelector(".react-datepicker__day");
+    fireEvent.mouseEnter(day);
 
-    const weekStart = utils.newDate();
-    const week = mount(
-      <Week day={weekStart} onDayMouseEnter={onDayMouseEnter} />,
+    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(
       <Week
         day={weekStart}
-        onDayMouseEnter={onDayMouseEnter}
+        onDayMouseEnter={onDayMouseEnterSpy}
         usePointerEvent
       />,
     );
-    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", () => {