@geotab/zenith 1.15.3 → 1.15.4

package/dist/dropdown/dropdown.test.js

@@ -0,0 +1,1007 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("./dropdown");
+const react_1 = require("@testing-library/react");
+require("../testHelpers/geotab-axe");
+const groupsFilterTestData_1 = require("../groupsFilter/groupsFilterTestData");
+jest.mock("./../utils/localization/useLanguage", () => ({
+    useLanguage: () => ({
+        translate: jest.fn((phrase) => phrase)
+    })
+}));
+describe("Dropdown", () => {
+    beforeEach(() => {
+        window.HTMLElement.prototype.scrollIntoView = jest.fn();
+    });
+    afterEach(() => {
+        window.HTMLElement.prototype.scrollIntoView.mockRestore();
+    });
+    const mockedGroupLoader = jest.fn().mockImplementation(() => Promise.resolve(groupsFilterTestData_1.groupsArr));
+    const mockedGroupLoaderWithSearch = jest.fn().mockImplementation((_, str) => {
+        if (str === "QA") {
+            return Promise.resolve([
+                { id: "ChildA", name: "A element", children: [{ id: "ChildC" }, { id: "ChildE" }], color: { a: 255, b: 255, g: 165, r: 0 } },
+                { id: "ChildD", name: "D element", children: undefined, color: { a: 255, b: 110, g: 100, r: 240 } },
+                { id: "ChildE", name: "E element", children: undefined, color: { a: 135, b: 200, g: 100, r: 40 } }
+            ]);
+        }
+        return Promise.resolve(groupsFilterTestData_1.groupsArr);
+    });
+    const mockedGroupLoaderWithErrorData = jest.fn().mockImplementation((_, str) => {
+        if (str === "QA") {
+            return Promise.resolve([
+                { id: "ChildN", name: "N element", children: [{ id: "ChildQ" }, { id: "ChildG" }] },
+                { id: "ChildQ", name: "Q element", children: [], color: { a: 13, b: 20, g: 10, r: 40 } }
+            ]);
+        }
+        return Promise.resolve(groupsFilterTestData_1.groupsArr);
+    });
+    const mockedEmptyLoader = jest.fn().mockImplementation(() => Promise.resolve([]));
+    const mockedLoaderWithReject = jest.fn().mockImplementation(() => Promise.reject(new Error("Loading error")));
+    const mockedUsersData = [
+        { id: "b4", name: "atticuspinch@gmail.com", firstName: "Atticus", lastName: "Pinch" },
+        { id: "b6", name: "jeanlouisepinch@gmail.com", firstName: "Jean Louise", lastName: "Pinch" },
+        { id: "b12", name: "booadley@gmail.com", firstName: "Boo", lastName: "Adley" }
+    ];
+    const mockedUsersLoader = jest.fn().mockImplementation(() => Promise.resolve(mockedUsersData));
+    const mockedUsersLoaderWithDisable = jest.fn().mockImplementation((_, str) => {
+        const data = mockedUsersData.map(el => ({ ...el, ...(el.id === "b6" ? { disabled: true } : {}) }));
+        if (str === "QA") {
+            return Promise.resolve(data.slice(0, 2));
+        }
+        return Promise.resolve(data);
+    });
+    global.structuredClone = jest.fn().mockImplementation((obj) => JSON.parse(JSON.stringify(obj)));
+    test("Test dropdown with pending state", async () => {
+        const mockedOnSelect = jest.fn();
+        const { getByTitle } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: mockedOnSelect, isLoading: true, getData: mockedGroupLoader, errorHandler: jest.fn() })));
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoader).toHaveBeenCalled();
+            expect(document.body.querySelector(".zen-waiting")).not.toBeNull();
+        });
+    });
+    test("Test dropdown sorting flat list", async () => {
+        const mockedOnSelect = jest.fn();
+        const mockedDataLoader = jest.fn().mockImplementation(() => Promise.resolve([{ id: "3", name: "A" }, { id: "2", name: "B" }, { id: "1", name: "C" }]));
+        const mockedDataLoaderSorted = jest.fn().mockImplementation(() => Promise.resolve([{ id: "1", name: "C" }, { id: "2", name: "B" }, { id: "3", name: "A" }]));
+        const { 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: mockedDataLoader, errorHandler: jest.fn() })));
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedDataLoader).toHaveBeenCalled();
+        });
+        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();
+        });
+        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();
+        const mockedSortFn = (a, b) => (a.name || a.id) > (b.name || b.id) ? -1 : 1;
+        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(), sortFn: undefined })));
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        });
+        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();
+        });
+        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: "" } });
+        });
+        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: mockedGroupLoaderWithSearch, errorHandler: jest.fn(), sortFn: mockedSortFn })));
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        });
+        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();
+        });
+        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 () => {
+        const mockedOnSelect = jest.fn();
+        const mockedGetData = jest.fn().mockImplementation((_) => Promise.resolve([
+            { id: "b1", name: "Car" },
+            { id: "b2", name: "Bus" },
+            { id: "b3", name: "Truck" }
+        ]));
+        const mockedGetSelectedData1 = jest.fn().mockImplementation((id) => [
+            { id: "b5", name: "Motorcycle" },
+            { id: "b8", name: "Bus" }
+        ].find(el => el.id === id));
+        const mockedGetSelectedData2 = jest.fn().mockImplementation((id) => [
+            { id: "b5", name: "Motorcycle" },
+            { id: "b8", name: "Bus" },
+            { id: "b13", name: "Train" }
+        ].find(el => el.id === id));
+        const { container, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: ["b5"], onChange: mockedOnSelect, getData: mockedGetData, errorHandler: jest.fn(), getSelectedItem: undefined, showCounterPill: true, showSelection: true, searchField: false, placeholder: "Default placeholder" })));
+        expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("Default placeholder");
+        expect(container.querySelector(".zen-filter-button__quantity")?.textContent).toBe("1");
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: ["b5"], onChange: mockedOnSelect, getData: mockedGetData, errorHandler: jest.fn(), getSelectedItem: mockedGetSelectedData1, showCounterPill: true, showSelection: true, searchField: false, placeholder: "Default placeholder" })));
+        await (0, react_1.waitFor)(() => {
+            expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("Motorcycle");
+            expect(container.querySelector(".zen-filter-button__quantity")?.textContent).toBe("1");
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: ["b5", "b13"], onChange: mockedOnSelect, getData: mockedGetData, errorHandler: jest.fn(), getSelectedItem: mockedGetSelectedData1, showCounterPill: true, showSelection: true, searchField: false, placeholder: "Default placeholder" })));
+        await (0, react_1.waitFor)(() => {
+            expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("Motorcycle");
+            expect(container.querySelector(".zen-filter-button__quantity")?.textContent).toBe("2");
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: ["b5", "b13"], onChange: mockedOnSelect, getData: mockedGetData, errorHandler: jest.fn(), getSelectedItem: mockedGetSelectedData2, showCounterPill: true, showSelection: true, searchField: false, placeholder: "Default placeholder" })));
+        await (0, react_1.waitFor)(() => {
+            expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("Motorcycle, Train");
+            expect(container.querySelector(".zen-filter-button__quantity")?.textContent).toBe("2");
+        });
+    });
+    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 })));
+        // clear on escape click
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        });
+        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();
+        });
+        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" }));
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        });
+        inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        expect(inputField?.getAttribute("value")).toBe("");
+        // clear on popup close
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        });
+        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();
+        });
+        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")));
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        });
+        inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        expect(inputField?.getAttribute("value")).toBe("");
+        // clear on cancel click
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        });
+        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();
+        });
+        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();
+        });
+        inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        expect(inputField?.getAttribute("value")).toBe("");
+        // clear on apply click
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        });
+        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();
+        });
+        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)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        });
+        inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        expect(inputField?.getAttribute("value")).toBe("");
+        // clear on outside click
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        });
+        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();
+        });
+        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();
+        });
+        inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        expect(inputField?.getAttribute("value")).toBe("");
+    });
+    test("Test dropdown with children in data item", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, queryByTitle, getByText, queryByText, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn() })));
+        expect(container.querySelector(".dropdownTestClass")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoader).toHaveBeenCalled();
+        });
+        (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();
+        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();
+        expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildD']")).toBeNull();
+        expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildE']")).toBeNull();
+        expect(queryByTitle("Back")).toBeNull();
+        react_1.fireEvent.click(document.body.querySelector(".zen-checkbox-list-with-action__label[data-btn='ChildA']"));
+        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(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA']")).toBeNull();
+        expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildB']")).toBeNull();
+        expect(queryByTitle("Back")).not.toBeNull();
+        expect(getByText("A element")).not.toBeNull();
+        expect(queryByText("Select all")).not.toBeNull();
+        expect(queryByText("Deselect all")).toBeNull();
+        expect(mockedOnSelect).not.toHaveBeenCalled();
+        expect(document.body.querySelector(".zen-dropdown-searchable-trigger__search-container .zen-dropdown-searchable-trigger__counter")).toBeNull();
+        react_1.fireEvent.click(getByText("Select all"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "ChildC", name: "C element", color: { a: 255, b: 165, g: 100, r: 200 } },
+            { id: "ChildE", name: "E element", color: { a: 135, b: 200, g: 100, r: 40 } }
+        ]);
+        expect(document.body.querySelector(".zen-dropdown-searchable-trigger__search-container .zen-dropdown-searchable-trigger__counter")?.childNodes[0].textContent).toBe("2");
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: ["ChildC", "ChildE"], dataItems: groupsFilterTestData_1.groupsArr, onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn() })));
+        expect(queryByText("Select all")).toBeNull();
+        expect(queryByText("Deselect all")).not.toBeNull();
+        react_1.fireEvent.click(getByText("Deselect all"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([]);
+        (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(queryByText("Select all")).not.toBeNull();
+        react_1.fireEvent.click(getByText("E element"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "ChildE", name: "E element", color: { a: 135, b: 200, g: 100, r: 40 } }
+        ]);
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: ["ChildE"], dataItems: groupsFilterTestData_1.groupsArr, onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn() })));
+        react_1.fireEvent.click(getByTitle("Back"));
+        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();
+        react_1.fireEvent.click(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA'] .zen-checkbox__label"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([]);
+        (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() })));
+        react_1.fireEvent.click(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA'] .zen-checkbox__label"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 } }
+        ]);
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: ["ChildA"], dataItems: groupsFilterTestData_1.groupsArr, onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn() })));
+        expect(document.body.querySelector(".zen-dropdown-searchable-trigger__search-container .zen-dropdown-searchable-trigger__counter")?.childNodes[0].textContent).toBe("1");
+        react_1.fireEvent.click(getByTitle("Clear"));
+        expect(document.body.querySelector(".zen-dropdown-searchable-trigger__search-container .zen-dropdown-searchable-trigger__counter")).toBeNull();
+        expect(mockedOnSelect).toHaveBeenCalledWith([]);
+    });
+    test("Test dropdown with children in data item and without comboItemProp", async () => {
+        const mockedOnSelect = 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: mockedGroupLoader, errorHandler: jest.fn() })));
+        expect(container.querySelector(".dropdownTestClass")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoader).toHaveBeenCalled();
+        });
+        (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();
+        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();
+        expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildD']")).toBeNull();
+        expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildE']")).toBeNull();
+    });
+    test("Test dropdown with apply button", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, getByText, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn(), hasApplyButton: true })));
+        expect(container.querySelector(".dropdownTestClass")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoader).toHaveBeenCalled();
+        });
+        (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();
+        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();
+        expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildD']")).toBeNull();
+        expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildE']")).toBeNull();
+        expect(document.body.querySelector(".zen-dropdown-list__cancel-button")).not.toBeNull();
+        const getApplyButton = () => document.body.querySelector(".zen-dropdown-list__apply-button");
+        let applyButton = getApplyButton();
+        expect(applyButton).not.toBeNull();
+        expect(applyButton?.getAttribute("disabled")).not.toBeNull();
+        react_1.fireEvent.click(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildA'] .zen-checkbox__label"));
+        applyButton = getApplyButton();
+        expect(applyButton?.getAttribute("disabled")).toBeNull();
+        expect(mockedOnSelect).not.toHaveBeenCalled();
+        react_1.fireEvent.click(document.body.querySelector(".zen-dropdown-list__apply-button"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 } }
+        ]);
+        expect(mockedOnSelect).toHaveBeenCalledTimes(1);
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: ["ChildA"], onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn(), hasApplyButton: true })));
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoader).toHaveBeenCalled();
+        });
+        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        applyButton = getApplyButton();
+        expect(applyButton?.getAttribute("disabled")).not.toBeNull();
+        react_1.fireEvent.click(getByText("B element"));
+        react_1.fireEvent.click(document.body.querySelector(".zen-dropdown-list__cancel-button"));
+        expect(mockedOnSelect).toHaveBeenCalledTimes(1);
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+    });
+    test("Test dropdown with singleSelect", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, queryByText, getByText, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, placeholder: "Default placeholder" })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+        });
+        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([
+            { id: "b4", name: "atticuspinch@gmail.com" }
+        ]);
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b4"], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, placeholder: "Default placeholder" })));
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+        });
+        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"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "b6", name: "jeanlouisepinch@gmail.com" }
+        ]);
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b6"], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, placeholder: "Default placeholder" })));
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+        });
+        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"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([]);
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, placeholder: "Default placeholder" })));
+        inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        expect(inputField?.getAttribute("placeholder")).toBe("Default placeholder");
+        react_1.fireEvent.click(getByText("booadley@gmail.com"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "b12", name: "booadley@gmail.com" }
+        ]);
+    });
+    test("Test dropdown with singleSelect and forceSelection", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b12"], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, forceSelection: true, placeholder: "Default placeholder" })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        });
+        expect(document.body.querySelector(".zen-dropdown-list__footer")).toBeNull();
+        let selectedItem = document.body.querySelector(".zen-select-item[data-id='b12']");
+        expect(selectedItem?.getAttribute("aria-selected")).toBe("true");
+        let nextSelectedItem = document.body.querySelector(".zen-select-item[data-id='b4']");
+        expect(nextSelectedItem?.getAttribute("aria-selected")).toBe("false");
+        react_1.fireEvent.click(selectedItem);
+        expect(mockedOnSelect).not.toHaveBeenCalled();
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+        });
+        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']");
+        react_1.fireEvent.click(nextSelectedItem);
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "b4", name: "atticuspinch@gmail.com" }
+        ]);
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b4"], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, placeholder: "Default placeholder" })));
+        const inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        expect(inputField?.getAttribute("placeholder")).toBe("atticuspinch@gmail.com");
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+        });
+        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']");
+        expect(currentSelectedItem?.getAttribute("aria-selected")).toBe("true");
+    });
+    test("Test dropdown with singleSelect and receive value with delay", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, dataItems: mockedUsersData, errorHandler: jest.fn(), searchField: false, multiselect: false, showSelection: true, forceSelection: true, placeholder: "Default placeholder" })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("Default placeholder");
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b12"], onChange: mockedOnSelect, dataItems: mockedUsersData, errorHandler: jest.fn(), searchField: false, multiselect: false, showSelection: true, forceSelection: true, placeholder: "Default placeholder" })));
+        await (0, react_1.waitFor)(() => {
+            expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("booadley@gmail.com");
+        });
+    });
+    test("Test dropdown with singleSelect and receive dataItems with delay", async () => {
+        const mockedOnSelect = jest.fn();
+        const initialData = [{ id: "b36", name: "tomrobin@gmail.com", firstName: "Tom", lastName: "Robin" }];
+        const { container, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, dataItems: initialData, errorHandler: jest.fn(), searchField: false, multiselect: false, showSelection: true, forceSelection: true, placeholder: "Default placeholder" })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("Default placeholder");
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b12"], onChange: mockedOnSelect, dataItems: initialData, errorHandler: jest.fn(), searchField: false, multiselect: false, showSelection: true, forceSelection: true, placeholder: "Default placeholder" })));
+        const updatedData = [...initialData, ...mockedUsersData];
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b12"], onChange: mockedOnSelect, dataItems: updatedData, errorHandler: jest.fn(), searchField: false, multiselect: false, showSelection: true, forceSelection: true, placeholder: "Default placeholder" })));
+        await (0, react_1.waitFor)(() => {
+            expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("booadley@gmail.com");
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b36"], onChange: mockedOnSelect, dataItems: updatedData, errorHandler: jest.fn(), searchField: false, multiselect: false, showSelection: true, forceSelection: true, placeholder: "Default placeholder" })));
+        await (0, react_1.waitFor)(() => {
+            expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("tomrobin@gmail.com");
+        });
+    });
+    test("Test dropdown with singleSelect and updated dataItems with delay", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, dataItems: [], errorHandler: jest.fn(), searchField: false, multiselect: false, showSelection: true, forceSelection: true, placeholder: "Default placeholder" })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("Default placeholder");
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b12"], onChange: mockedOnSelect, dataItems: [], errorHandler: jest.fn(), searchField: false, multiselect: false, showSelection: true, forceSelection: true, placeholder: "Default placeholder" })));
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b12"], onChange: mockedOnSelect, dataItems: mockedUsersData, errorHandler: jest.fn(), searchField: false, multiselect: false, showSelection: true, forceSelection: true, placeholder: "Default placeholder" })));
+        await (0, react_1.waitFor)(() => {
+            expect(container.querySelector(".zen-filter-button__label")?.textContent).toBe("booadley@gmail.com");
+        });
+    });
+    test("Test dropdown with singleSelect without forceSelection", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b12"], defaultValue: ["b4"], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, placeholder: "Default placeholder" })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(getByTitle("Open filter"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+        });
+        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");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(selectedItem);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnSelect).toHaveBeenCalledWith([]);
+            expect(mockedOnSelect).toHaveBeenCalledTimes(1);
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], defaultValue: ["b4"], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, placeholder: "Default placeholder" })));
+        let prevSelectedItem = document.body.querySelector(".zen-select-item[data-id='b12']");
+        expect(prevSelectedItem).not.toBeNull();
+        expect(prevSelectedItem?.getAttribute("aria-selected")).toBe("false");
+        //check onBlur event in selectList not change selection
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(getByTitle("Open filter"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        });
+        expect(mockedOnSelect).toHaveBeenCalledTimes(1);
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(getByTitle("Open filter"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        });
+        expect(mockedOnSelect).toHaveBeenCalledTimes(1);
+        prevSelectedItem = document.body.querySelector(".zen-select-item[data-id='b12']");
+        expect(prevSelectedItem).not.toBeNull();
+        expect(prevSelectedItem?.getAttribute("aria-selected")).toBe("false");
+        const nextSelectedItem = document.body.querySelector(".zen-select-item[data-id='b4']");
+        expect(nextSelectedItem?.getAttribute("aria-selected")).toBe("false");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(document.body.querySelector(".zen-dropdown-list__clear-button"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnSelect).toHaveBeenCalledTimes(2);
+            expect(mockedOnSelect).toHaveBeenCalledWith([{ id: "b4", name: "atticuspinch@gmail.com" }]);
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b4"], defaultValue: ["b4"], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, placeholder: "Default placeholder" })));
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(getByTitle("Open filter"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+            expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        });
+        const currentSelectedItem = document.body.querySelector(".zen-select-item[data-id='b4']");
+        expect(currentSelectedItem?.getAttribute("aria-selected")).toBe("true");
+    });
+    test("Test dropdown with singleSelect when component has apply button and no searchField", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, queryByText, getByText, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, hasApplyButton: true, searchField: false, showCounterPill: false, placeholder: "Default placeholder" })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        react_1.fireEvent.click(document.body.querySelector(".zen-filter-button"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(getByText("booadley@gmail.com").getAttribute("aria-selected")).toBeFalsy();
+        });
+        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        expect(queryByText("Select all")).toBeNull();
+        let applyButton = document.body.querySelector(".zen-dropdown-list__apply-button");
+        expect(applyButton.classList.contains("zen-button--disabled")).toBeTruthy();
+        react_1.fireEvent.click(getByText("booadley@gmail.com").parentElement);
+        await (0, react_1.waitFor)(() => {
+            expect(getByText("booadley@gmail.com").parentElement.getAttribute("aria-selected")).toBe("true");
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(applyButton.classList.contains("zen-button--disabled")).toBeFalsy();
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, hasApplyButton: true, searchField: false, showCounterPill: false, placeholder: "Default placeholder" })));
+        await (0, react_1.waitFor)(() => {
+            expect(getByText("booadley@gmail.com").parentElement.getAttribute("aria-selected")).toBe("true");
+        });
+        expect(document.body.querySelector(".zen-dropdown-list")).not.toBeNull();
+        await (0, react_1.waitFor)(() => {
+            applyButton = document.body.querySelector(".zen-dropdown-list__apply-button");
+            expect(applyButton.classList.contains("zen-button--disabled")).toBeFalsy();
+        });
+        expect(mockedOnSelect).not.toHaveBeenCalled();
+        let triggerEl = container.querySelector(".zen-dropdown__trigger-button");
+        expect(triggerEl?.textContent).toBe("Default placeholder");
+        react_1.fireEvent.click(applyButton);
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnSelect).toHaveBeenCalledWith([
+                { id: "b12", name: "booadley@gmail.com" }
+            ]);
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b12"], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn(), multiselect: false, showSelection: true, hasApplyButton: true, searchField: false, showCounterPill: false, placeholder: "Default placeholder" })));
+        triggerEl = container.querySelector(".zen-filter-button");
+        expect(triggerEl?.textContent).toBe("booadley@gmail.com");
+    });
+    test("Test dropdown with children in data item and with empty loader result", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, getByText, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedEmptyLoader, errorHandler: jest.fn() })));
+        expect(container.querySelector(".dropdownTestClass")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedEmptyLoader).toHaveBeenCalled();
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedEmptyLoader, errorHandler: jest.fn() })));
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        expect(getByText("No data")).not.toBeNull();
+    });
+    test("Test dropdown with options", async () => {
+        const mockedOnSelect = 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: mockedGroupLoader, errorHandler: jest.fn(), placeholder: "Custom placeholder test", width: 300, title: "Custom title test", inputId: "customInputIdTest" })));
+        expect(container.querySelector(".dropdownTestClass")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown-searchable-trigger")?.getAttribute("style")).toBe("width: 300px;");
+        expect(container.querySelector(".zen-dropdown-searchable-trigger__input")?.getAttribute("placeholder")).toBe("Custom placeholder test");
+        expect(container.querySelector(".zen-dropdown-searchable-trigger__input")?.getAttribute("id")).toBe("customInputIdTest");
+        expect(container.querySelector(".zen-dropdown-searchable-trigger__popup-trigger")?.getAttribute("title")).toBe("Custom title test");
+        expect(container.querySelector(".zen-dropdown-searchable-trigger--disabled")).toBeNull();
+        container.querySelector(".zen-dropdown-searchable-trigger").getBoundingClientRect =
+            jest.fn().mockReturnValue({ width: 300, height: 100, top: 0, left: 0, bottom: 0, right: 0, x: 0, y: 0 });
+        react_1.fireEvent.click(getByTitle("Custom title test"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoader).toHaveBeenCalled();
+        });
+        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();
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn(), disabled: true })));
+        expect(document.body.querySelector(".zen-dropdown-searchable-trigger--disabled")).not.toBeNull();
+    });
+    test("Test dropdown with options and empty data", 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, { value: [], onChange: mockedOnSelect, getData: mockedEmptyLoader, errorHandler: jest.fn(), placeholder: "Custom placeholder test", width: 300, title: "Custom title test", inputId: "customInputIdTest" })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown-searchable-trigger")?.getAttribute("style")).toBe("width: 300px;");
+        expect(container.querySelector(".zen-dropdown-searchable-trigger__input")?.getAttribute("placeholder")).toBe("Custom placeholder test");
+        expect(container.querySelector(".zen-dropdown-searchable-trigger__input")?.getAttribute("id")).toBe("customInputIdTest");
+        expect(container.querySelector(".zen-dropdown-searchable-trigger__popup-trigger")?.getAttribute("title")).toBe("Custom title test");
+        expect(document.body.querySelector(".zen-dropdown-searchable-trigger--disabled")).toBeNull();
+        container.querySelector(".zen-dropdown-searchable-trigger").getBoundingClientRect =
+            jest.fn().mockReturnValue({ width: 300, height: 100, top: 0, left: 0, bottom: 0, right: 0, x: 0, y: 0 });
+        react_1.fireEvent.click(getByTitle("Custom title test"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedEmptyLoader).toHaveBeenCalled();
+        });
+        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;");
+        });
+    });
+    test("Test dropdown keydown events", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGroupLoader, 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(mockedGroupLoader).toHaveBeenCalled();
+        });
+        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" });
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGroupLoader, errorHandler: jest.fn(), disabled: true })));
+        expect(document.body.querySelector(".zen-dropdown-searchable-trigger--disabled")).not.toBeNull();
+        react_1.fireEvent.click(container.querySelector(".zen-dropdown-searchable-trigger__input"));
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+    });
+    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() })));
+        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();
+        });
+        const inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        expect(inputField).not.toBeNull();
+        (0, react_1.act)(() => {
+            react_1.fireEvent.change(inputField, { target: { value: "QA" } });
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        });
+        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("");
+        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() })));
+    });
+    test("Test dropdown with dataProblem", async () => {
+        const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => { });
+        // eslint-disable-next-line max-len
+        const expectedError = "The data retrieved using the getData function could not form a valid object for displaying nested data. The currently displayed data contains nested elements. It is expected that selecting a nested item should deselect its parent, which cannot be achieved with the formed object.";
+        const mockedOnSelect = jest.fn();
+        let container;
+        await (0, react_1.act)(async () => {
+            const result = (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], onChange: mockedOnSelect, getData: mockedGroupLoaderWithErrorData, errorHandler: jest.fn() }));
+            await Promise.resolve();
+            container = result.container;
+        });
+        expect(container.querySelector(".dropdownTestClass")).not.toBeNull();
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        (0, react_1.act)(() => {
+            react_1.fireEvent.keyDown(container.querySelector(".zen-dropdown-searchable-trigger__input-container"), { key: "Enter" });
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithErrorData).toHaveBeenCalled();
+        });
+        const inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        expect(inputField).not.toBeNull();
+        (0, react_1.act)(() => {
+            react_1.fireEvent.change(inputField, { target: { value: "QA" } });
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithErrorData).toHaveBeenCalled();
+        });
+        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)(() => {
+            react_1.fireEvent.click(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='ChildN'] .zen-checkbox__label"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(consoleErrorSpy).toHaveBeenCalled();
+        });
+        const firstCallArgs = consoleErrorSpy.mock.calls[0];
+        expect(firstCallArgs[0]).toContain(expectedError);
+        consoleErrorSpy.mockRestore();
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "ChildN", name: "N element" }
+        ]);
+    });
+    test("Test dropdown with error on load", async () => {
+        const mockedOnSelect = jest.fn();
+        const mockedErrorHandler = jest.fn();
+        const { container, getByTitle } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, getData: mockedLoaderWithReject, errorHandler: mockedErrorHandler })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        expect(document.body.querySelector(".zen-dropdown-list")).toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedLoaderWithReject).toHaveBeenCalled();
+        });
+        expect(mockedErrorHandler).toHaveBeenCalledWith(new Error("Loading error"));
+    });
+    test("Test dropdown without children in data item", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, getByText, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn() })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+        });
+        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();
+        react_1.fireEvent.click(getByText("Select all"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "b4", name: "atticuspinch@gmail.com" },
+            { id: "b6", name: "jeanlouisepinch@gmail.com" },
+            { id: "b12", name: "booadley@gmail.com" }
+        ]);
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b4", "b6", "b12"], onChange: mockedOnSelect, getData: mockedUsersLoader, errorHandler: jest.fn() })));
+        const inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.change(inputField, { target: { value: "com" } });
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoader).toHaveBeenCalled();
+        });
+        react_1.fireEvent.click(getByText("Deselect all"));
+        expect(mockedOnSelect).toHaveBeenCalledWith([]);
+    });
+    test("Test multiselect dropdown with disabled items", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, getByText, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, getData: mockedUsersLoaderWithDisable, errorHandler: jest.fn() })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoaderWithDisable).toHaveBeenCalled();
+        });
+        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");
+        expect(disabledEl).not.toBeNull();
+        expect(disabledEl?.getAttribute("disabled")).not.toBeNull();
+        expect(document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b12']")).not.toBeNull();
+        react_1.fireEvent.click(getByText("Select all"));
+        expect(mockedOnSelect).toHaveBeenCalledTimes(1);
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "b4", name: "atticuspinch@gmail.com" },
+            { id: "b12", name: "booadley@gmail.com" }
+        ]);
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b4", "b12"], onChange: mockedOnSelect, getData: mockedUsersLoaderWithDisable, errorHandler: jest.fn() })));
+        let inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.change(inputField, { target: { value: "com" } });
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoaderWithDisable).toHaveBeenCalled();
+        });
+        react_1.fireEvent.click(getByText("Deselect all"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnSelect).toHaveBeenCalledTimes(2);
+            expect(mockedOnSelect).toHaveBeenCalledWith([]);
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], onChange: mockedOnSelect, getData: mockedUsersLoaderWithDisable, defaultValue: ["b4"], errorHandler: jest.fn() })));
+        inputField = container.querySelector(".zen-dropdown-searchable-trigger__input");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.change(inputField, { target: { value: "" } });
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoaderWithDisable).toHaveBeenCalled();
+        });
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(document.body.querySelector(".zen-dropdown-list__clear-button"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnSelect).toHaveBeenCalledTimes(3);
+            expect(mockedOnSelect).toHaveBeenCalledWith([{ id: "b4", name: "atticuspinch@gmail.com" }]);
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b4", "b12"], onChange: mockedOnSelect, getData: mockedUsersLoaderWithDisable, defaultValue: ["b4"], errorHandler: jest.fn() })));
+        const unselectedItem = document.body.querySelector(".zen-checkbox-list-with-action__action-item[data-item='b4'] label");
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(unselectedItem);
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnSelect).toHaveBeenCalledTimes(4);
+            expect(mockedOnSelect).toHaveBeenCalledWith([{ id: "b12", name: "booadley@gmail.com" }]);
+        });
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b12"], onChange: mockedOnSelect, getData: mockedUsersLoaderWithDisable, defaultValue: ["b4"], errorHandler: jest.fn() })));
+        (0, react_1.act)(() => {
+            react_1.fireEvent.change(inputField, { target: { value: "QA" } });
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoaderWithSearch).toHaveBeenCalled();
+        });
+        (0, react_1.act)(() => {
+            react_1.fireEvent.click(document.body.querySelector(".zen-dropdown-list__action-button[title='Select all']"));
+        });
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnSelect).toHaveBeenCalledTimes(5);
+            expect(mockedOnSelect).toHaveBeenCalledWith([
+                { id: "b4", name: "atticuspinch@gmail.com" },
+                { id: "b12", name: "booadley@gmail.com" }
+            ]);
+        });
+    });
+    test("Test singleSelect dropdown with disabled items", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], multiselect: false, onChange: mockedOnSelect, getData: mockedUsersLoaderWithDisable, errorHandler: jest.fn() })));
+        expect(container.querySelector(".zen-dropdown")).not.toBeNull();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoaderWithDisable).toHaveBeenCalled();
+        });
+        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']");
+        expect(enabledItem?.getAttribute("aria-disabled")).toBe("false");
+        enabledItem = document.body.querySelector(".zen-select-item[data-id='b12']");
+        expect(enabledItem?.getAttribute("aria-disabled")).toBe("false");
+        const nextSelectedItem = document.body.querySelector(".zen-select-item[data-id='b4']");
+        expect(nextSelectedItem?.getAttribute("aria-selected")).toBe("false");
+        react_1.fireEvent.click(nextSelectedItem);
+        await (0, react_1.waitFor)(() => {
+            expect(mockedOnSelect).toHaveBeenCalledTimes(1);
+            expect(mockedOnSelect).toHaveBeenCalledWith([{ id: "b4", name: "atticuspinch@gmail.com" }]);
+        });
+        const mockedUsersLoaderWithDisable2 = jest.fn().mockImplementation(() => Promise.resolve(mockedUsersData.map(el => ({ ...el, ...(el.id === "b12" ? { disabled: true } : {}) }))));
+        rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: ["b4"], multiselect: false, onChange: mockedOnSelect, getData: mockedUsersLoaderWithDisable2, errorHandler: jest.fn() }));
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedUsersLoaderWithDisable2).toHaveBeenCalled();
+        });
+        disabledItem = document.body.querySelector(".zen-select-item[data-id='b12']");
+        expect(disabledItem?.getAttribute("aria-disabled")).toBe("true");
+        enabledItem = document.body.querySelector(".zen-select-item[data-id='b4']");
+        expect(enabledItem?.getAttribute("aria-disabled")).toBe("false");
+        enabledItem = document.body.querySelector(".zen-select-item[data-id='b6']");
+        expect(enabledItem?.getAttribute("aria-disabled")).toBe("false");
+        const selectedItem = document.body.querySelector(".zen-select-item[data-id='b4']");
+        expect(selectedItem?.getAttribute("aria-selected")).toBe("true");
+    });
+    test("Test dropdown accessibility with searchableField", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, rerender, queryByTitle } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: jest.fn(), getData: mockedGroupLoader, errorHandler: jest.fn(), searchField: true })));
+        await expect(container).toBeAccessible();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoader).toHaveBeenCalled();
+        });
+        (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();
+        react_1.fireEvent.click(document.body.querySelector(".zen-checkbox-list-with-action__label[data-btn='ChildA']"));
+        expect(queryByTitle("Back")).not.toBeNull();
+        await expect(container).toBeAccessible();
+    }, 10000);
+    test("Test dropdown error without searchableField", async () => {
+        const { container, getByText, queryByText, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: jest.fn(), getData: mockedGroupLoader, errorHandler: jest.fn(), searchField: false, error: "Check non searchableField error" })));
+        expect(container.querySelector(".zen-dropdown__trigger-button")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown__trigger-button--error")).not.toBeNull();
+        expect(getByText("Check non searchableField error")).not.toBeNull();
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: jest.fn(), getData: mockedGroupLoader, errorHandler: jest.fn(), searchField: false, error: undefined })));
+        expect(container.querySelector(".zen-dropdown__trigger-button")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown__trigger-button--error")).toBeNull();
+        expect(queryByText("Check non searchableField error")).toBeNull();
+    });
+    test("Test dropdown error with searchableField", async () => {
+        const { container, getByText, queryByText, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: jest.fn(), getData: mockedGroupLoader, errorHandler: jest.fn(), searchField: true, error: "Check searchableField error" })));
+        expect(container.querySelector(".zen-dropdown-searchable-trigger")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown-searchable-trigger--error")).not.toBeNull();
+        expect(getByText("Check searchableField error")).not.toBeNull();
+        (0, react_1.act)(() => rerender((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: jest.fn(), getData: mockedGroupLoader, errorHandler: jest.fn(), searchField: true, error: undefined })));
+        expect(container.querySelector(".zen-dropdown-searchable-trigger")).not.toBeNull();
+        expect(container.querySelector(".zen-dropdown-searchable-trigger--error")).toBeNull();
+        expect(queryByText("Check searchableField error")).toBeNull();
+    });
+    test("Test dropdown accessibility without searchableField", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, rerender } = await (0, react_1.act)(() => (0, react_1.render)((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "dropdownTestClass", value: [], dataItems: groupsFilterTestData_1.groupsArr, onChange: jest.fn(), getData: mockedGroupLoader, errorHandler: jest.fn(), searchField: false })));
+        await expect(container).toBeAccessible();
+        react_1.fireEvent.click(document.body.querySelector(".zen-filter-button"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoader).toHaveBeenCalled();
+        });
+        (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();
+    }, 10000);
+    test("Test dropdown accessibility with single select", async () => {
+        const mockedOnSelect = jest.fn();
+        const { container, getByTitle, rerender, queryByTitle, getByText } = await (0, react_1.act)(() => (0, react_1.render)((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();
+        react_1.fireEvent.click(getByTitle("Open filter"));
+        await (0, react_1.waitFor)(() => {
+            expect(mockedGroupLoader).toHaveBeenCalled();
+        });
+        (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();
+        react_1.fireEvent.click(getByText("A element"));
+        expect(queryByTitle("Back")).not.toBeNull();
+        await expect(container).toBeAccessible();
+        expect(mockedOnSelect).toHaveBeenCalledWith([
+            { id: "ChildA", name: "A element", color: { a: 255, b: 255, g: 165, r: 0 } }
+        ]);
+    }, 10000);
+});
+//# sourceMappingURL=dropdown.test.js.map