From 053cabb8253cd9d0ca86d4c916382a22f5fb51ba Mon Sep 17 00:00:00 2001
From: yasuaki640 <yasuaki640@gmail.com>
Date: Mon, 27 May 2024 23:23:41 +0900
Subject: [PATCH] feat: convert multiple_selected_dates.test.js into tsx

---
 ...st.js => multiple_selected_dates.test.tsx} | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)
 rename test/{multiple_selected_dates.test.js => multiple_selected_dates.test.tsx} (59%)

diff --git a/test/multiple_selected_dates.test.js b/test/multiple_selected_dates.test.tsx
similarity index 59%
rename from test/multiple_selected_dates.test.js
rename to test/multiple_selected_dates.test.tsx
index ca37b3380..b1648c262 100644
--- a/test/multiple_selected_dates.test.js
+++ b/test/multiple_selected_dates.test.tsx
@@ -1,6 +1,7 @@
+import { render } from "@testing-library/react";
 import React from "react";
+
 import DatePicker from "../src";
-import { render } from "@testing-library/react";
 
 describe("Multiple Dates Selected", function () {
   function getDatePicker(extraProps) {
@@ -16,36 +17,43 @@ describe("Multiple Dates Selected", function () {
   }
 
   it("should handle text format for no selected date", () => {
-    const datePicker = getDatePicker({
+    const { container: datePicker } = getDatePicker({
       selectsMultiple: true,
       selectedDates: [],
     });
 
-    expect(datePicker.getByRole("textbox").value).toBe("");
+    const input = datePicker.querySelector("input");
+
+    expect(input).not.toBeNull();
+    expect(input?.value).toBe("");
   });
 
   it("should handle text format for one selected date", () => {
-    const datePicker = getDatePicker({
+    const { container: datePicker } = getDatePicker({
       selectsMultiple: true,
       selectedDates: [new Date("2024/01/01")],
     });
 
-    expect(datePicker.getByRole("textbox").value).toBe("01/01/2024");
+    const input = datePicker.querySelector("input");
+
+    expect(input).not.toBeNull();
+    expect(input?.value).toBe("01/01/2024");
   });
 
   it("should handle text format for two selected dates", () => {
-    const datePicker = getDatePicker({
+    const { container: datePicker } = getDatePicker({
       selectsMultiple: true,
       selectedDates: [new Date("2024/01/01"), new Date("2024/01/15")],
     });
 
-    expect(datePicker.getByRole("textbox").value).toBe(
-      "01/01/2024, 01/15/2024",
-    );
+    const input = datePicker.querySelector("input");
+
+    expect(input).not.toBeNull();
+    expect(input?.value).toBe("01/01/2024, 01/15/2024");
   });
 
   it("should handle text format for more than two selected dates", () => {
-    const datePicker = getDatePicker({
+    const { container: datePicker } = getDatePicker({
       selectsMultiple: true,
       selectedDates: [
         new Date("2024/01/01"),
@@ -54,6 +62,9 @@ describe("Multiple Dates Selected", function () {
       ],
     });
 
-    expect(datePicker.getByRole("textbox").value).toBe("01/01/2024 (+2)");
+    const input = datePicker.querySelector("input");
+
+    expect(input).not.toBeNull();
+    expect(input?.value).toBe("01/01/2024 (+2)");
   });
 });