@geotab/zenith 1.16.1 → 1.17.0-beta.1

package/dist/dropdown/dropdown.test.js

@@ -11,6 +11,7 @@ jest.mock("./../utils/localization/useLanguage", () => ({
     })
 }));
 describe("Dropdown", () => {
+    const debounceTimeout = 300;
     beforeEach(() => {
         window.HTMLElement.prototype.scrollIntoView = jest.fn();
     });
@@ -70,21 +71,26 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedDataLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedDataLoader).toHaveBeenCalled();
+            const itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label");
+            expect(itemsList[0].textContent).toBe("A");
+            expect(itemsList[1].textContent).toBe("B");
+            expect(itemsList[2].textContent).toBe("C");
         });
-        let itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label");
-        expect(itemsList[0].textContent).toBe("A");
-        expect(itemsList[1].textContent).toBe("B");
-        expect(itemsList[2].textContent).toBe("C");
         react_1.fireEvent.click(getByTitle("Open filter"));
         (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedDataLoaderSorted, errorHandler: jest.fn() })));
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedDataLoaderSorted).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            const itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label");
+            expect(itemsList[0].textContent).toBe("C");
+            expect(itemsList[1].textContent).toBe("B");
+            expect(itemsList[2].textContent).toBe("A");
         });
-        itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label");
-        expect(itemsList[0].textContent).toBe("C");
-        expect(itemsList[1].textContent).toBe("B");
-        expect(itemsList[2].textContent).toBe("A");
     });
     test("Test dropdown sorting tree structure", async () => {
         const mockedOnSelect = jest.fn();
@@ -93,21 +99,25 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            const itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label-text");
+            expect(itemsList[0].textContent).toBe("A element");
+            expect(itemsList[1].textContent).toBe("B element");
         });
-        let itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label-text");
-        expect(itemsList[0].textContent).toBe("A element");
-        expect(itemsList[1].textContent).toBe("B element");
         let inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         (0, react_1.act)(() => {
             react_1.fireEvent.change(inputField, { target: { value: "QA" } });
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            const itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label-text");
+            expect(itemsList[0].textContent).toBe("A element");
+            expect(itemsList[1].textContent).toBe("D element");
+            expect(itemsList[2].textContent).toBe("E element");
         });
-        itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label-text");
-        expect(itemsList[0].textContent).toBe("A element");
-        expect(itemsList[1].textContent).toBe("D element");
-        expect(itemsList[2].textContent).toBe("E element");
         inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         (0, react_1.act)(() => {
             react_1.fireEvent.change(inputField, { target: { value: "" } });
@@ -117,21 +127,25 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            const itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label");
+            expect(itemsList[0].textContent).toBe("B element");
+            expect(itemsList[1].textContent).toBe("A element");
         });
-        itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label");
-        expect(itemsList[0].textContent).toBe("B element");
-        expect(itemsList[1].textContent).toBe("A element");
         inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         (0, react_1.act)(() => {
             react_1.fireEvent.change(inputField, { target: { value: "QA" } });
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            const itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label-text");
+            expect(itemsList[0].textContent).toBe("E element");
+            expect(itemsList[1].textContent).toBe("D element");
+            expect(itemsList[2].textContent).toBe("A element");
         });
-        itemsList = document.body.querySelectorAll(".zen-checkbox-list-with-action__label-text");
-        expect(itemsList[0].textContent).toBe("E element");
-        expect(itemsList[1].textContent).toBe("D element");
-        expect(itemsList[2].textContent).toBe("A element");
         react_1.fireEvent.click(getByTitle("Open filter"));
     });
     test("Test dropdown with getSelectedItem", async () => {
@@ -169,6 +183,73 @@ describe("Dropdown", () => {
             expect(container.querySelector(".zen-filter-button__quantity")?.textContent).toBe("2");
         });
     });
+    test("Test dropdown always generate data on every 'getData'", async () => {
+        const mockedOnSelect = jest.fn();
+        const mockedDataArr = [
+            { id: "b1", name: "Car" },
+            { id: "b2", name: "Bus" },
+            { id: "b3", name: "Truck" },
+            { id: "b5", name: "Motorcycle" },
+            { id: "b8", name: "Bus" }
+        ];
+        const mockedGetData = jest.fn().mockImplementation((_) => Promise.resolve(mockedDataArr));
+        const { container, getByTitle } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGetData, errorHandler: jest.fn() })));
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGetData).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        });
+        let elementB8 = document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b8'] .zen-checkbox-list-with-action__label-text");
+        expect(elementB8).not.toBeNull();
+        expect(elementB8?.textContent).toBe("Bus");
+        await (0, react_1.act)(() => react_1.fireEvent.click(container.querySelector(".zen-dropdown-searchable-trigger__popup-trigger")));
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        });
+        mockedDataArr[4].name = "Plane";
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGetData).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        });
+        elementB8 = document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b8'] .zen-checkbox-list-with-action__label-text");
+        expect(elementB8).not.toBeNull();
+        expect(elementB8?.textContent).toBe("Plane");
+    });
+    test("Test dropdown always generate data on every customGetData call", async () => {
+        const mockedOnSelect = jest.fn();
+        const mockedDataArr = [
+            { id: "b1", name: "Car" },
+            { id: "b2", name: "Bus" },
+            { id: "b3", name: "Truck" },
+            { id: "b5", name: "Motorcycle" },
+            { id: "b8", name: "Bus" }
+        ];
+        const { container, getByTitle } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, dataItems: mockedDataArr, errorHandler: jest.fn() })));
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        }, { timeout: debounceTimeout });
+        let elementB8 = document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b8'] .zen-checkbox-list-with-action__label-text");
+        expect(elementB8).not.toBeNull();
+        expect(elementB8?.textContent).toBe("Bus");
+        await (0, react_1.act)(() => react_1.fireEvent.click(container.querySelector(".zen-dropdown-searchable-trigger__popup-trigger")));
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        });
+        mockedDataArr[4].name = "Plane";
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        }, { timeout: debounceTimeout });
+        elementB8 = document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b8'] .zen-checkbox-list-with-action__label-text");
+        expect(elementB8).not.toBeNull();
+        expect(elementB8?.textContent).toBe("Plane");
+    });
     test("Test dropdown clean search field on close", async () => {
         const mockedOnSelect = jest.fn();
         const { container, getByTitle } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGroupLoaderWithSearch, errorHandler: jest.fn(), hasApplyButton: true })));
@@ -176,15 +257,17 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         let inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         (0, react_1.act)(() => {
             react_1.fireEvent.change(inputField, { target: { value: "QA" } });
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         expect(inputField?.getAttribute("value")).toBe("QA");
         await (0, react_1.act)(() => react_1.fireEvent.keyDown(container.querySelector(".zen-dropdown-searchable-trigger"), { key: "Escape" }));
@@ -197,15 +280,17 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         (0, react_1.act)(() => {
             react_1.fireEvent.change(inputField, { target: { value: "QA" } });
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         expect(inputField?.getAttribute("value")).toBe("QA");
         await (0, react_1.act)(() => react_1.fireEvent.click(container.querySelector(".zen-dropdown-searchable-trigger__popup-trigger")));
@@ -218,17 +303,19 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         (0, react_1.act)(() => {
             react_1.fireEvent.change(inputField, { target: { value: "QA" } });
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+            expect(inputField?.getAttribute("value")).toBe("QA");
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
-        expect(inputField?.getAttribute("value")).toBe("QA");
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         react_1.fireEvent.click(document.body.querySelector(".zen-dropdown-list__cancel-button"));
         await (0, react_1.waitFor)(() => {
             expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
@@ -239,17 +326,19 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         (0, react_1.act)(() => {
             react_1.fireEvent.change(inputField, { target: { value: "QA" } });
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+            expect(inputField?.getAttribute("value")).toBe("QA");
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
-        expect(inputField?.getAttribute("value")).toBe("QA");
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         react_1.fireEvent.click(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA'] .zen-checkbox__label"));
         react_1.fireEvent.click(document.body.querySelector(".zen-dropdown-list__apply-button"));
         await (0, react_1.waitFor)(() => {
@@ -261,17 +350,19 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         (0, react_1.act)(() => {
             react_1.fireEvent.change(inputField, { target: { value: "QA" } });
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+            expect(inputField?.getAttribute("value")).toBe("QA");
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
-        expect(inputField?.getAttribute("value")).toBe("QA");
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         react_1.fireEvent.click(document.body);
         await (0, react_1.waitFor)(() => {
             expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
@@ -287,9 +378,11 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoader).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn() })));
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        });
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildB']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildC']")).toBeNull();
@@ -349,9 +442,11 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoader).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn() })));
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        });
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildB']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildC']")).toBeNull();
@@ -366,9 +461,11 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoader).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn(), hasApplyButton: true })));
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        });
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildB']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildC']")).toBeNull();
@@ -393,8 +490,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         applyButton = getApplyButton();
         expect(applyButton?.getAttribute("disabled")).not.toBeNull();
         react_1.fireEvent.click(getByText("B element"));
@@ -409,8 +508,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         expect(queryByText("Select all")).toBeNull();
         react_1.fireEvent.click(getByText("atticuspinch@gmail.com"));
         expect(mockedOnSelect).toHaveBeenCalledWith([
@@ -421,8 +522,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         let inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         expect(inputField?.getAttribute("placeholder")).toBe("atticuspinch@gmail.com");
         react_1.fireEvent.click(getByText("jeanlouisepinch@gmail.com"));
@@ -434,8 +537,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         expect(inputField?.getAttribute("placeholder")).toBe("jeanlouisepinch@gmail.com");
         react_1.fireEvent.click(getByText("jeanlouisepinch@gmail.com"));
@@ -455,6 +560,8 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
             expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         expect(document.body.querySelector(".zen-dropdown-list__footer")).toBeNull();
@@ -468,8 +575,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         selectedItem = document.body.querySelector(".zen-select-item[data-id='b12']");
         expect(selectedItem?.getAttribute("aria-selected")).toBe("true");
         nextSelectedItem = document.body.querySelector(".zen-select-item[data-id='b4']");
@@ -484,8 +593,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         const prevSelectedItem = document.body.querySelector(".zen-select-item[data-id='b12']");
         expect(prevSelectedItem?.getAttribute("aria-selected")).toBe("false");
         const currentSelectedItem = document.body.querySelector(".zen-select-item[data-id='b4']");
@@ -538,8 +649,10 @@ describe("Dropdown", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         expect(document.body.querySelector(".zen-dropdown-list__footer")).not.toBeNull();
         const selectedItem = document.body.querySelector(".zen-select-item[data-id='b12']");
         expect(selectedItem?.getAttribute("aria-selected")).toBe("true");
@@ -567,6 +680,8 @@ describe("Dropdown", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
             expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         expect(mockedOnSelect).toHaveBeenCalledTimes(1);
@@ -588,6 +703,8 @@ describe("Dropdown", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
             expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         const currentSelectedItem = document.body.querySelector(".zen-select-item[data-id='b4']");
@@ -600,11 +717,11 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(document.body.querySelector(".zen-filter-button"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         await (0, react_1.waitFor)(() => {
-            expect(getByText("booadley@gmail.com").getAttribute("aria-selected")).toBeFalsy();
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        expect(getByText("booadley@gmail.com").getAttribute("aria-selected")).toBeFalsy();
         expect(queryByText("Select all")).toBeNull();
         let applyButton = document.body.querySelector(".zen-dropdown-list__apply-button");
         expect(applyButton.classList.contains("zen-button--disabled")).toBeTruthy();
@@ -645,10 +762,12 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedEmptyLoader).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedEmptyLoader, errorHandler: jest.fn() })));
+        await (0, react_1.waitFor)(() => {
+            expect(getByText("No data")).not.toBeNull();
+        });
         expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
-        expect(getByText("No data")).not.toBeNull();
     });
     test("Test dropdown with options", async () => {
         const mockedOnSelect = jest.fn();
@@ -665,8 +784,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Custom title test"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         expect(document.body.querySelector(".zen-dropdown-list")?.getAttribute("style")).toBe("min-width: 300px;");
         await (0, react_1.act)(() => react_1.fireEvent.keyDown(container.querySelector(".zen-dropdown-searchable-trigger"), { key: "Escape" }));
         expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
@@ -687,9 +808,11 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Custom title test"));
         await (0, react_1.waitFor)(() => {
             expect(mockedEmptyLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list__container--empty")).not.toBeNull();
         });
         expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
-        expect(document.body.querySelector(".zen-dropdown-list__container--empty")).not.toBeNull();
         await (0, react_1.waitFor)(() => {
             expect(document.body.querySelector(".zen-dropdown-list__container")?.getAttribute("style")).toBe("width: 300px;");
         });
@@ -702,8 +825,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.keyDown(container.querySelector(".zen-dropdown-searchable-trigger__input-container"), { key: "Enter" });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         react_1.fireEvent.click(container.querySelector(".zen-dropdown-searchable-trigger__input"));
         expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         react_1.fireEvent.keyDown(container.querySelector(".zen-dropdown-searchable-trigger"), { key: "Escape" });
@@ -715,13 +840,13 @@ describe("Dropdown", () => {
     });
     test("Test dropdown search", async () => {
         const mockedOnSelect = jest.fn();
-        const { container, getByText, getByTitle, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGroupLoaderWithSearch, errorHandler: jest.fn() })));
+        const { container, getByTitle, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGroupLoaderWithSearch, errorHandler: jest.fn() })));
         expect(container.querySelector(".dropdownTestClass")).not.toBeNull();
         expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
         react_1.fireEvent.keyDown(container.querySelector(".zen-dropdown-searchable-trigger__input-container"), { key: "Enter" });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         const inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         expect(inputField).not.toBeNull();
         (0, react_1.act)(() => {
@@ -729,18 +854,27 @@ describe("Dropdown", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+            expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA'] .zen-checkbox-list-with-action__label--action")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildD']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildE']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildB']")).toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildC']")).toBeNull();
         expect(document.body.querySelector(".zen-dropdown-list button[title='Select all']")).not.toBeNull();
-        react_1.fireEvent.click(getByText("A element"));
-        expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildC']")).not.toBeNull();
-        expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildE']")).not.toBeNull();
-        expect(container.querySelector(".zen-dropdown-searchable-trigger__input")?.getAttribute("value")).toBe("");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA'] .zen-checkbox-list-with-action__label--action"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(container.querySelector(".zen-dropdown-searchable-trigger__input")?.getAttribute("value")).toBe("");
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildC']")).not.toBeNull();
+            expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildE']")).not.toBeNull();
+        });
         react_1.fireEvent.click(getByTitle("Back"));
         (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: ["ChildD"], onChange: mockedOnSelect, getData: mockedGroupLoaderWithSearch, errorHandler: jest.fn() })));
     });
@@ -762,7 +896,7 @@ describe("Dropdown", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithErrorData).toHaveBeenCalled();
-        });
+        }, { timeout: debounceTimeout });
         const inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
         expect(inputField).not.toBeNull();
         (0, react_1.act)(() => {
@@ -770,8 +904,10 @@ describe("Dropdown", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithErrorData).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildN']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildQ']")).not.toBeNull();
         (0, react_1.act)(() => {
@@ -796,8 +932,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedLoaderWithReject).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedErrorHandler).toHaveBeenCalledWith(new Error("Loading error"));
         });
-        expect(mockedErrorHandler).toHaveBeenCalledWith(new Error("Loading error"));
     });
     test("Test dropdown without children in data item", async () => {
         const mockedOnSelect = jest.fn();
@@ -806,8 +944,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b4']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b6']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b12']")).not.toBeNull();
@@ -824,6 +964,9 @@ describe("Dropdown", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         react_1.fireEvent.click(getByText("Deselect all"));
         expect(mockedOnSelect).toHaveBeenCalledWith([]);
@@ -835,8 +978,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoaderWithDisable).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b4']")).not.toBeNull();
         expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b6']")).not.toBeNull();
         const disabledEl = document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b6'] input");
@@ -856,6 +1001,9 @@ describe("Dropdown", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoaderWithDisable).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         react_1.fireEvent.click(getByText("Deselect all"));
         await (0, react_1.waitFor)(() => {
@@ -869,6 +1017,9 @@ describe("Dropdown", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoaderWithDisable).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         (0, react_1.act)(() => {
             react_1.fireEvent.click(document.body.querySelector(".zen-dropdown-list__clear-button"));
@@ -892,6 +1043,9 @@ describe("Dropdown", () => {
         });
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         (0, react_1.act)(() => {
             react_1.fireEvent.click(document.body.querySelector(".zen-dropdown-list__action-button[title='Select all']"));
@@ -911,8 +1065,10 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoaderWithDisable).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
-        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         let disabledItem = document.body.querySelector(".zen-select-item[data-id='b6']");
         expect(disabledItem?.getAttribute("aria-disabled")).toBe("true");
         let enabledItem = document.body.querySelector(".zen-select-item[data-id='b4']");
@@ -931,6 +1087,9 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedUsersLoaderWithDisable2).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         disabledItem = document.body.querySelector(".zen-select-item[data-id='b12']");
         expect(disabledItem?.getAttribute("aria-disabled")).toBe("true");
@@ -948,6 +1107,9 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn(), searchField: true })));
         await expect(container).toBeAccessible();
@@ -982,6 +1144,9 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(document.body.querySelector(".zen-filter-button"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn(), searchField: false })));
         await expect(container).toBeAccessible();
@@ -993,6 +1158,9 @@ describe("Dropdown", () => {
         react_1.fireEvent.click(getByTitle("Open filter"));
         await (0, react_1.waitFor)(() => {
             expect(mockedGroupLoader).toHaveBeenCalled();
+        }, { timeout: debounceTimeout });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
         });
         (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn(), multiselect: false })));
         await expect(container).toBeAccessible();