From f6a4c8d752e622a1fd71ff3b3c307cc563ef0d46 Mon Sep 17 00:00:00 2001
From: Balaji Sridharan <balaji.sridharan@nyulangone.org>
Date: Mon, 19 Aug 2024 14:58:27 +0530
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=F0=9F=A7=AA=20Refactor=20tim?=
 =?UTF-8?q?e=5Finput=5Ftest's=20querySelector/querySelectorAll=20with=20sa?=
 =?UTF-8?q?feQuerySelector/safeQuerySelectorAll=20to=20ensure=20element=20?=
 =?UTF-8?q?existence?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- This change prevents tests from passing with unexpected null elements, enhancing test reliability and catching potential issues earlier.

Closes #5038
---
 src/test/time_input_test.test.tsx | 35 ++++++++++++++++---------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/test/time_input_test.test.tsx b/src/test/time_input_test.test.tsx
index a04ba8906..7dd8fb049 100644
--- a/src/test/time_input_test.test.tsx
+++ b/src/test/time_input_test.test.tsx
@@ -5,6 +5,7 @@ import DatePicker from "../index";
 import InputTimeComponent from "../input_time";
 
 import CustomTimeInput from "./helper_components/custom_time_input";
+import { safeQuerySelector } from "./test_utils";
 
 describe("timeInput", () => {
   afterEach(() => {
@@ -30,11 +31,11 @@ describe("timeInput", () => {
   it("should trigger onChange event", () => {
     const onChangeSpy = jest.fn();
     const { container } = render(<InputTimeComponent onChange={onChangeSpy} />);
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLElement(), {
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.change(input, {
       target: { value: "13:00" },
     });
-    expect(input?.value).toEqual("13:00");
+    expect(input.value).toEqual("13:00");
   });
 
   it("should retain the focus on onChange event", () => {
@@ -42,18 +43,18 @@ describe("timeInput", () => {
     const { container } = render(
       <DatePicker showTimeInput onChange={onChangeSpy} />,
     );
-    const input = container.querySelector("input");
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
 
     act(() => {
       input?.focus();
     });
     expect(document.activeElement).toBe(input);
 
-    fireEvent.change(input ?? new HTMLElement(), {
+    fireEvent.change(input, {
       target: { value: "13:00" },
     });
 
-    expect(input?.value).toEqual("13:00");
+    expect(input.value).toEqual("13:00");
     expect(document.activeElement).toBe(input);
   });
 
@@ -61,9 +62,9 @@ describe("timeInput", () => {
     const { container } = render(
       <InputTimeComponent timeString="13:00" onChange={() => {}} />,
     );
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLElement(), { target: { value: "" } });
-    expect(input?.value).toEqual("13:00");
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.change(input, { target: { value: "" } });
+    expect(input.value).toEqual("13:00");
   });
 
   it("should trigger onChange event on a custom time input without using the last valid timeString", () => {
@@ -79,8 +80,8 @@ describe("timeInput", () => {
     );
 
     const newTime = "14:00";
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLElement(), {
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.change(input, {
       target: { value: newTime },
     });
 
@@ -104,8 +105,8 @@ describe("timeInput", () => {
     );
 
     const newTime = "14:00";
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLElement(), {
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.change(input, {
       target: { value: newTime },
     });
 
@@ -121,8 +122,8 @@ describe("timeInput", () => {
     );
 
     const newTime = "13:00";
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLElement(), {
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.change(input, {
       target: { value: newTime },
     });
 
@@ -146,8 +147,8 @@ describe("timeInput", () => {
     );
 
     const newTime = "13:00";
-    const input = container.querySelector("input");
-    fireEvent.change(input ?? new HTMLElement(), {
+    const input = safeQuerySelector<HTMLInputElement>(container, "input");
+    fireEvent.change(input, {
       target: { value: newTime },
     });