🧪♻️ Setup mock ResizeObserver to make the test suites that use TimePicker pass

Related Commit: 70179e9
Related issue: #5466

Author: balajis-qb

src/test/calendar_test.test.tsx

@@ -45,6 +45,7 @@ import {
   SafeElementWrapper,
   safeQuerySelector,
   safeQuerySelectorAll,
+  setupMockResizeObserver,
 } from "./test_utils";
 
 import type { ReactDatePickerCustomHeaderProps } from "../calendar";
@@ -136,6 +137,10 @@ describe("Calendar", () => {
     };
   }
 
+  beforeAll(() => {
+    setupMockResizeObserver();
+  });
+
   it("should start with the current date in view if no date range", () => {
     const now = newDate();
     const { instance } = getCalendar();

src/test/datepicker_test.test.tsx

@@ -29,7 +29,11 @@ import DatePicker, { registerLocale } from "../index";
 import CustomInput from "./helper_components/custom_input";
 import ShadowRoot from "./helper_components/shadow_root";
 import TestWrapper from "./helper_components/test_wrapper";
-import { getKey, safeQuerySelector } from "./test_utils";
+import {
+  getKey,
+  safeQuerySelector,
+  setupMockResizeObserver,
+} from "./test_utils";
 
 function getSelectedDayNode(container: HTMLElement) {
   return (
@@ -83,6 +87,10 @@ const showDocument = (calendarInput: HTMLElement) => {
 };
 
 describe("DatePicker", () => {
+  beforeEach(() => {
+    setupMockResizeObserver();
+  });
+
   afterEach(() => {
     jest.resetAllMocks();
   });

src/test/exclude_time_period_test.test.tsx

@@ -2,9 +2,14 @@ import { render } from "@testing-library/react";
 import React from "react";
 
 import { newDate, setTime } from "../date_utils";
+import { setupMockResizeObserver } from "./test_utils";
 import DatePicker from "../index";
 
 describe("DatePicker", () => {
+  beforeAll(() => {
+    setupMockResizeObserver();
+  });
+
   it("should only display times between minTime and maxTime", () => {
     const now = newDate();
     const { container } = render(

src/test/exclude_times_test.test.tsx

@@ -2,11 +2,16 @@ import { render } from "@testing-library/react";
 import React from "react";
 
 import { setTime, newDate } from "../date_utils";
+import { setupMockResizeObserver } from "./test_utils";
 import DatePicker from "../index";
 
 describe("DatePicker", () => {
   let now: Date, excludeTimes: Date[];
 
+  beforeAll(() => {
+    setupMockResizeObserver();
+  });
+
   beforeEach(() => {
     now = newDate();
     excludeTimes = [

src/test/min_time_test.test.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 
 import DatePicker from "../index";
 
-import { safeQuerySelector } from "./test_utils";
+import { safeQuerySelector, setupMockResizeObserver } from "./test_utils";
 
 import type { DatePickerProps } from "../index";
 
@@ -44,6 +44,10 @@ const DatePickerWithState = (
 };
 
 describe("Datepicker minTime", () => {
+  beforeAll(() => {
+    setupMockResizeObserver();
+  });
+
   it("should select time 12:00 AM when no minTime constraint is set.", () => {
     const { getByText, container } = render(<DatePickerWithState />);
 

src/test/show_time_test.test.tsx

@@ -4,9 +4,13 @@ import React from "react";
 import DatePicker from "../index";
 import TimeComponent from "../time";
 
-import { safeQuerySelector } from "./test_utils";
+import { safeQuerySelector, setupMockResizeObserver } from "./test_utils";
 
 describe("DatePicker", () => {
+  beforeAll(() => {
+    setupMockResizeObserver();
+  });
+
   it("should show time component when showTimeSelect prop is present", () => {
     const { container } = render(<DatePicker showTimeSelect open />);
     const timeComponent = container.querySelector(

src/test/time_input_test.test.tsx

@@ -5,9 +5,13 @@ import DatePicker from "../index";
 import InputTimeComponent from "../input_time";
 
 import CustomTimeInput from "./helper_components/custom_time_input";
-import { safeQuerySelector } from "./test_utils";
+import { safeQuerySelector, setupMockResizeObserver } from "./test_utils";
 
 describe("timeInput", () => {
+  beforeEach(() => {
+    setupMockResizeObserver();
+  });
+
   afterEach(() => {
     jest.resetAllMocks();
   });