@geotab/zenith 1.16.1 → 1.17.0-beta.1

package/dist/dateInput/dateInput.test.js

@@ -14,13 +14,16 @@ describe("DateInput", () => {
     });
     beforeEach(() => {
         Element.prototype.scrollIntoView = scrollIntoViewMock;
+        jest.useFakeTimers();
     });
     afterEach(() => {
         window.innerWidth = windowInnerWidth;
         (0, react_1.cleanup)();
         jest.clearAllMocks();
+        jest.clearAllTimers();
+        jest.useRealTimers();
     });
-    test("select new date", () => {
+    test("select new date", async () => {
         const defaultValue = "2022-01-01";
         const onChange = jest.fn();
         (0, react_1.render)((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", defaultValue: defaultValue, value: undefined, onChange: onChange }));
@@ -36,11 +39,17 @@ describe("DateInput", () => {
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalled();
-        expect(onChange).toHaveBeenCalledTimes(1);
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalled();
+            expect(onChange).toHaveBeenCalledTimes(1);
+        });
         inputElement = react_1.screen.getByText("Pick a date");
-        react_1.fireEvent.click(inputElement);
-        expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toContain("-18");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(inputElement);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toContain("-18");
+        });
     });
     test("when disableDatesAfter and disableDatesBefore pass", async () => {
         const defaultValue = new Date("2025-01-07T00:00:00.000Z").toISOString();
@@ -62,25 +71,49 @@ describe("DateInput", () => {
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalled();
-        expect(onChange).toHaveBeenCalledTimes(1);
-        expect(onChange).toHaveBeenCalledWith(newValue);
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalled();
+            expect(onChange).toHaveBeenCalledTimes(1);
+            expect(onChange).toHaveBeenCalledWith(newValue);
+        });
         rerender((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", defaultValue: defaultValue, value: newValue, disableDatesBefore: smallerDate, disableDatesAfter: largerDate, onChange: onChange, timeSelect: true }));
         triggerElement = container.querySelector(".zen-date-input");
-        react_1.fireEvent.click(triggerElement);
-        expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toBe("2025-01-18");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(triggerElement);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toBe("2025-01-18");
+        });
         let inputElement = document.querySelector("input.zen-date-input-inner__text-input");
-        react_1.fireEvent.change(inputElement, { target: { value: "2025-01-21" } });
-        react_1.fireEvent.blur(inputElement);
-        expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toBe("2025-01-18");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.change(inputElement, { target: { value: "2025-01-21" } });
+        });
+        (0, react_2.act)(() => {
+            react_1.fireEvent.blur(inputElement);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toBe("2025-01-18");
+        });
         inputElement = document.querySelector("input.zen-date-input-inner__text-input");
-        react_1.fireEvent.change(inputElement, { target: { value: "2025-01-03" } });
-        react_1.fireEvent.blur(inputElement);
-        expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toBe("2025-01-18");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.change(inputElement, { target: { value: "2025-01-03" } });
+        });
+        (0, react_2.act)(() => {
+            react_1.fireEvent.blur(inputElement);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toBe("2025-01-18");
+        });
         inputElement = document.querySelector("input.zen-date-input-inner__text-input");
-        react_1.fireEvent.change(inputElement, { target: { value: "2025-01-19" } });
-        react_1.fireEvent.blur(inputElement);
-        expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toBe("2025-01-19");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.change(inputElement, { target: { value: "2025-01-19" } });
+        });
+        (0, react_2.act)(() => {
+            react_1.fireEvent.blur(inputElement);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toBe("2025-01-19");
+        });
         const timeButton = document.querySelector("button.zen-date-input-inner__text-input");
         expect(document.querySelector("button.zen-date-input-inner__text-input")?.textContent).toContain("00:00");
         (0, react_2.act)(() => {
@@ -103,18 +136,20 @@ describe("DateInput", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(document.querySelector("input.zen-date-input-inner__text-input")?.value).toBe("2025-01-19");
-            expect(document.querySelector("button.zen-date-input-inner__text-input")?.textContent).toContain("18:59");
+            expect(document.querySelector("button.zen-date-input-inner__text-input")?.textContent).toContain("19:00");
         });
         applyButton = document.querySelector(".zen-date-input-popup__button-apply");
         expect(onChange).toHaveBeenCalledTimes(1);
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalledTimes(2);
-        const lastValue = new Date("2025-01-19T23:59:00.000Z").toISOString();
-        expect(onChange).toHaveBeenCalledWith(lastValue);
-        expect(new Date(lastValue) < new Date(largerDate)).toBeTruthy();
-    });
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalledTimes(2);
+            const lastValue = new Date("2025-01-20T00:00:00.000Z").toISOString();
+            expect(onChange).toHaveBeenCalledWith(lastValue);
+            expect(new Date(lastValue).toISOString() === new Date(largerDate).toISOString()).toBeTruthy();
+        });
+    }, 10000);
     test("custom timeZone", async () => {
         const offset = 8;
         const defaultValue = "2023-12-31T23:59:00.000Z";
@@ -137,8 +172,10 @@ describe("DateInput", () => {
         (0, react_2.act)(() => {
             react_1.fireEvent.click(triggerElement);
         });
-        expect(document.querySelector("input.zen-date-input-inner__text-input")?.value).toBe("2024-01-01");
-        expect(document.querySelector("button.zen-date-input-inner__text-input")?.textContent).toContain("07:59");
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector("input.zen-date-input-inner__text-input")?.value).toBe("2024-01-01");
+            expect(document.querySelector("button.zen-date-input-inner__text-input")?.textContent).toContain("07:59");
+        });
         const day18 = document.querySelector("[data-id*='calendar-day-18']");
         (0, react_2.act)(() => {
             react_1.fireEvent.pointerDown(day18);
@@ -148,19 +185,27 @@ describe("DateInput", () => {
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalledTimes(1);
-        expect(onChange).toHaveBeenCalledWith("2024-01-17T23:59:00.000Z");
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalledTimes(1);
+            expect(onChange).toHaveBeenCalledWith("2024-01-17T23:59:00.000Z");
+        });
         rerender((0, jsx_runtime_1.jsx)(userFormatProvider_1.UserFormatProvider, { toLocalDateTime: mockedToLocaleDateTime, toReverseOffsetDateTime: mockedToReverseOffsetDateTime, children: (0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", defaultValue: defaultValue, value: "2024-01-17T23:59:00.000Z", timeSelect: true, onChange: onChange }) }));
         triggerElement = container.querySelector(".zen-date-input");
         expect(triggerElement.textContent).toContain("2024-01-18 07:59");
         (0, react_2.act)(() => {
             react_1.fireEvent.click(triggerElement);
         });
-        expect(document.querySelector("input.zen-date-input-inner__text-input")?.value).toBe("2024-01-18");
-        expect(document.querySelector("button.zen-date-input-inner__text-input")?.textContent).toContain("07:59");
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector("input.zen-date-input-inner__text-input")?.value).toBe("2024-01-18");
+            expect(document.querySelector("button.zen-date-input-inner__text-input")?.textContent).toContain("07:59");
+        });
         const inputElement = document.querySelector("input.zen-date-input-inner__text-input");
-        react_1.fireEvent.change(inputElement, { target: { value: "2024-01-10" } });
-        react_1.fireEvent.blur(inputElement);
+        (0, react_2.act)(() => {
+            react_1.fireEvent.change(inputElement, { target: { value: "2024-01-10" } });
+        });
+        (0, react_2.act)(() => {
+            react_1.fireEvent.blur(inputElement);
+        });
         const timeButton = document.querySelector("button.zen-date-input-inner__text-input");
         (0, react_2.act)(() => {
             react_1.fireEvent.click(timeButton);
@@ -176,14 +221,18 @@ describe("DateInput", () => {
         (0, react_2.act)(() => {
             react_1.fireEvent.click(timeApplyButton);
         });
-        expect(document.querySelector("input.zen-date-input-inner__text-input")?.value).toBe("2024-01-10");
-        expect(document.querySelector("button.zen-date-input-inner__text-input")?.textContent).toContain("07:30");
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector("input.zen-date-input-inner__text-input")?.value).toBe("2024-01-10");
+            expect(document.querySelector("button.zen-date-input-inner__text-input")?.textContent).toContain("07:30");
+        });
         applyButton = document.querySelector(".zen-date-input-popup__button-apply");
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalledTimes(2);
-        expect(onChange).toHaveBeenCalledWith("2024-01-09T23:30:00.000Z");
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalledTimes(2);
+            expect(onChange).toHaveBeenCalledWith("2024-01-09T23:30:00.000Z");
+        });
     });
     test("select new year", async () => {
         const defaultValue = "2022-01-01T12:00:00.000Z";
@@ -222,27 +271,37 @@ describe("DateInput", () => {
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalledTimes(1);
-        expect(onChange).toHaveBeenCalledWith("2024-01-18T12:00:00.000Z");
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalledTimes(1);
+            expect(onChange).toHaveBeenCalledWith("2024-01-18T12:00:00.000Z");
+        });
     });
-    test("apply button", () => {
+    test("apply button", async () => {
         jest.useFakeTimers().setSystemTime(new Date("2024-07-15"));
         const defaultValue = "2022-01-01";
         const onChange = jest.fn();
         const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", defaultValue: defaultValue, value: undefined, onChange: onChange }));
         const inputElement = react_1.screen.getByText("Pick a date");
-        react_1.fireEvent.click(inputElement);
-        expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toBe("");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(inputElement);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toBe("");
+        });
         const day18 = document.querySelector("[data-id*='calendar-day-18']");
         (0, react_2.act)(() => {
             react_1.fireEvent.pointerDown(day18);
         });
-        expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toContain("-18");
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toContain("-18");
+        });
         let applyButton = document.querySelector(".zen-date-input-popup__button-apply");
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalled();
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalled();
+        });
         const timezoneOffset = new Date().getTimezoneOffset() / 60; // in hours
         const year = new Date().getFullYear();
         const month = new Date().getMonth() + 1;
@@ -251,17 +310,22 @@ describe("DateInput", () => {
         expect(onChange).toHaveBeenCalledWith(date);
         rerender((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", defaultValue: defaultValue, value: date, onChange: onChange }));
         const triggerEl = document.querySelector(".zen-date-input");
-        react_1.fireEvent.click(triggerEl);
-        applyButton = document.querySelector(".zen-date-input-popup__button-apply");
-        expect(applyButton.getAttribute("disabled")).not.toBeNull();
-        jest.clearAllTimers();
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(triggerEl);
+        });
+        await (0, react_1.waitFor)(() => {
+            applyButton = document.querySelector(".zen-date-input-popup__button-apply");
+            expect(applyButton.getAttribute("disabled")).not.toBeNull();
+        });
     });
     test("value not change without apply button", async () => {
         const defaultValue = "2022-01-01";
         const onChange = jest.fn();
         (0, react_1.render)((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", defaultValue: defaultValue, value: undefined, onChange: onChange }));
         const inputElement = react_1.screen.getByText("Pick a date");
-        react_1.fireEvent.click(inputElement);
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(inputElement);
+        });
         await (0, react_1.waitFor)(() => {
             expect(document.querySelector(".zen-date-input-popup")).not.toBeNull();
         });
@@ -270,54 +334,70 @@ describe("DateInput", () => {
         (0, react_2.act)(() => {
             react_1.fireEvent.pointerDown(day18);
         });
-        expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toContain("-18");
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toContain("-18");
+        });
         (0, react_2.act)(() => {
             react_1.fireEvent.click(inputElement);
         });
-        expect(document.querySelector(".zen-date-input-popup")).toBeNull();
-        expect(onChange).not.toHaveBeenCalled();
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-popup")).toBeNull();
+            expect(onChange).not.toHaveBeenCalled();
+        });
         // it should be reset after cancel
-        react_1.fireEvent.click(react_1.screen.getByText("Pick a date"));
-        expect(".zen-date-input-popup").not.toBeNull();
-        expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toContain("-18");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(react_1.screen.getByText("Pick a date"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(".zen-date-input-popup").not.toBeNull();
+            expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toContain("-18");
+        });
     });
-    test("reset button", () => {
+    test("reset button", async () => {
         const defaultValue = "2022-01-01T12:00:00.000Z";
         const value = "2024-02-23T16:05:07.856Z";
         const onChange = jest.fn();
         (0, react_1.render)((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", defaultValue: defaultValue, value: value, onChange: onChange }));
         const inputElement = document.querySelector(".zen-date-input");
-        react_1.fireEvent.click(inputElement);
-        const resetButton = react_1.screen.getByText("Reset");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(inputElement);
+        });
+        const clearButton = react_1.screen.getByText("Clear");
         const applyButton = react_1.screen.getByText("Apply");
         (0, react_2.act)(() => {
-            react_1.fireEvent.click(resetButton);
+            react_1.fireEvent.click(clearButton);
         });
         expect(onChange).not.toHaveBeenCalled();
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalled();
-        expect(onChange.mock.calls[0][0]).toContain("2022-01-01");
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalled();
+            expect(onChange.mock.calls[0][0]).toContain("2022-01-01");
+        });
     });
-    test("clear and apply button", () => {
+    test("clear and apply button", async () => {
         const defaultValue = "2022-01-01T12:00:00.000Z";
         const value = "2024-02-23T16:05:07.856Z";
         const onChange = jest.fn();
         (0, react_1.render)((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", defaultValue: defaultValue, value: value, onChange: onChange }));
         const inputElement = document.querySelector(".zen-date-input");
-        react_1.fireEvent.click(inputElement);
-        const resetButton = react_1.screen.getByText("Reset");
         (0, react_2.act)(() => {
-            react_1.fireEvent.click(resetButton);
+            react_1.fireEvent.click(inputElement);
+        });
+        const clearButton = react_1.screen.getByText("Clear");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(clearButton);
         });
         expect(onChange).not.toHaveBeenCalled();
         const applyButton = react_1.screen.getByText("Apply");
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalled();
-        expect(onChange.mock.calls[0][0]).toContain("2022-01-01");
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalled();
+            expect(onChange.mock.calls[0][0]).toContain("2022-01-01");
+        });
     });
     test("require selection", async () => {
         const defaultValue = "2022-01-01T12:00:00.000Z";
@@ -325,8 +405,12 @@ describe("DateInput", () => {
         const onChange = jest.fn();
         (0, react_1.render)((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", defaultValue: defaultValue, value: value, onChange: onChange, requireSelection: true }));
         let inputElement = document.querySelector(".zen-date-input");
-        react_1.fireEvent.click(inputElement);
-        expect(document.querySelector(".zen-form-field-error")).toBeNull();
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(inputElement);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-form-field-error")).toBeNull();
+        });
         const day23 = document.querySelector("[data-id*='calendar-day-23']");
         (0, react_2.act)(() => {
             react_1.fireEvent.pointerDown(day23);
@@ -342,9 +426,11 @@ describe("DateInput", () => {
             react_1.fireEvent.pointerDown(day24);
         });
         applyButton = document.querySelector(".zen-date-input-popup__button-apply");
-        expect(applyButton.getAttribute("disabled")).toBeNull();
-        expect(document.querySelector(".zen-form-field-error")).toBeNull();
-        expect(onChange).not.toHaveBeenCalled();
+        await (0, react_1.waitFor)(() => {
+            expect(applyButton.getAttribute("disabled")).toBeNull();
+            expect(document.querySelector(".zen-form-field-error")).toBeNull();
+            expect(onChange).not.toHaveBeenCalled();
+        });
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
@@ -352,81 +438,109 @@ describe("DateInput", () => {
             expect(onChange).toHaveBeenCalledTimes(1);
         });
         inputElement = document.querySelector(".zen-date-input");
-        react_1.fireEvent.click(inputElement);
-        const resetButton = react_1.screen.getByText("Reset");
         (0, react_2.act)(() => {
-            react_1.fireEvent.click(resetButton);
+            react_1.fireEvent.click(inputElement);
+        });
+        const clearButton = react_1.screen.getByText("Clear");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(clearButton);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalledTimes(1);
+            expect(document.querySelector(".zen-form-field-error")).toBeNull();
         });
-        expect(onChange).toHaveBeenCalledTimes(1);
-        expect(document.querySelector(".zen-form-field-error")).toBeNull();
         applyButton = document.querySelector(".zen-date-input-popup__button-apply");
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalledTimes(2);
-        expect(onChange).toHaveBeenCalledWith("2022-01-01T12:00:00.000Z");
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalledTimes(2);
+            expect(onChange).toHaveBeenCalledWith("2022-01-01T12:00:00.000Z");
+        });
     });
-    test("error property", () => {
-        const { container, getByText } = (0, react_1.render)((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", value: "2024-02-23T16:05:07.856Z", onChange: jest.fn(), error: "Test error text" }));
+    test("error property", async () => {
+        const { container, getByText } = await (0, react_2.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", value: "2024-02-23T16:05:07.856Z", onChange: jest.fn(), error: "Test error text" })));
         expect(container.querySelector(".zen-form-field-error")).not.toBeNull();
         expect(container.querySelector(".zen-date-input--error")).not.toBeNull();
         expect(getByText("Test error text")).not.toBeNull();
     });
-    test("Drive class", () => {
+    test("Drive class", async () => {
         const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(themeDrive_1.ThemeDrive, { children: (0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", value: "2024-02-23T16:05:07.856Z", onChange: jest.fn() }) }));
         const inputElement = container.querySelector(".zen-date-input");
-        react_1.fireEvent.click(inputElement);
-        expect(document.querySelector(".zen-date-input-popup")).not.toBeNull();
-        expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
-        expect(document.querySelector(".zen-date-input-inner--drive-tablet")).not.toBeNull();
-        expect(document.querySelector(".zen-date-input-inner--drive")).toBeNull();
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(inputElement);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-popup")).not.toBeNull();
+            expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
+            expect(document.querySelector(".zen-date-input-inner--drive-tablet")).not.toBeNull();
+            expect(document.querySelector(".zen-date-input-inner--drive")).toBeNull();
+        });
     });
-    test("Drive class mobile", () => {
+    test("Drive class mobile", async () => {
         window.innerWidth = 639;
         const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(themeDrive_1.ThemeDrive, { children: (0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", value: "2024-02-23T16:05:07.856Z", onChange: jest.fn() }) }));
         const inputElement = container.querySelector(".zen-date-input");
-        react_1.fireEvent.click(inputElement);
-        expect(document.querySelector(".zen-mobile-sheet")).not.toBeNull();
-        expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
-        expect(document.querySelector(".zen-date-input-inner--drive-tablet")).toBeNull();
-        expect(document.querySelector(".zen-date-input-inner--drive")).not.toBeNull();
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(inputElement);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-mobile-sheet")).not.toBeNull();
+            expect(document.querySelector(".zen-date-input-inner")).not.toBeNull();
+            expect(document.querySelector(".zen-date-input-inner--drive-tablet")).toBeNull();
+            expect(document.querySelector(".zen-date-input-inner--drive")).not.toBeNull();
+        });
     });
-    test("apply class names", () => {
+    test("apply class names", async () => {
         const defaultValue = "2022-01-01T12:00:00.000Z";
         const value = "2024-02-23T16:05:07.856Z";
         const onChange = jest.fn();
         (0, react_1.render)((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", defaultValue: defaultValue, value: value, onChange: onChange, className: "anything", classNamePopup: "something" }));
         const inputElement = document.querySelector(".zen-date-input");
         expect(inputElement.className).toContain("anything");
-        react_1.fireEvent.click(inputElement);
-        const popup = document.querySelector(".zen-popup");
-        expect(popup.className).toContain("something");
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(inputElement);
+        });
+        const popup = document.querySelector(".zen-date-input-popup");
+        await (0, react_1.waitFor)(() => {
+            expect(popup.className).toContain("something");
+        });
     });
-    test("disabled", () => {
+    test("disabled", async () => {
         const value = "2024-02-23T16:05:07.856Z";
         const onChange = jest.fn();
         (0, react_1.render)((0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { value: value, onChange: onChange, disabled: true }));
         const inputElement = document.querySelector(".zen-date-input");
         expect(inputElement.className).toContain("zen-button--disabled");
-        react_1.fireEvent.click(inputElement);
-        expect(document.querySelector(".zen-popup")).toBeNull();
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(inputElement);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-popup")).toBeNull();
+        });
     });
-    test("user format", () => {
+    test("user format", async () => {
         const onChange = jest.fn();
         (0, react_1.render)((0, jsx_runtime_1.jsx)(userFormatProvider_1.UserFormatProvider, { weekStartsOnSunday: true, dateFormat: "yyyy/dd/MM", children: (0, jsx_runtime_1.jsx)(dateInput_1.DateInput, { id: "calendar", value: undefined, onChange: onChange }) }));
         const inputElement = react_1.screen.getByText("Pick a date");
-        react_1.fireEvent.click(inputElement);
+        (0, react_2.act)(() => {
+            react_1.fireEvent.click(inputElement);
+        });
         const day18 = document.querySelector("[data-id*='calendar-day-18']");
         (0, react_2.act)(() => {
             react_1.fireEvent.pointerDown(day18);
         });
-        expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toContain("/18/");
+        await (0, react_1.waitFor)(() => {
+            expect(document.querySelector(".zen-date-input-inner__text-input")?.value).toContain("/18/");
+            expect(onChange).not.toHaveBeenCalled();
+        });
         const applyButton = document.querySelector(".zen-date-input-popup__button-apply");
-        expect(onChange).not.toHaveBeenCalled();
         (0, react_2.act)(() => {
             react_1.fireEvent.click(applyButton);
         });
-        expect(onChange).toHaveBeenCalled();
+        await (0, react_1.waitFor)(() => {
+            expect(onChange).toHaveBeenCalled();
+        });
     });
 });
 //# sourceMappingURL=dateInput.test.js.map