@sapudex/web-components 2.9.0 → 2.11.0

package/cypress/specs/FilterMenu.cy.tsx

@@ -0,0 +1,884 @@
+import {UDExFilterMenu, UDExFilterMenuItem, UDExFilterMenuGroupHeader, UDExFilterMenuSelectAll} from "../support/component-imports.js";
+import {UDExListMode} from "../../src/types/List.js";
+
+const filterMenu = <>
+  <div id="resetClick"></div>
+  <div id="resultClick"></div>
+  <UDExFilterMenu
+  id="filter-menu"
+  filter-name="Filter Name"
+  filter-name-prefix="Sort by:">
+  <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem disabled label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Swift" supporting-text="iOS app development"></UDExFilterMenuItem>
+</UDExFilterMenu>
+</>
+
+const filterMenuWithInitialState = <UDExFilterMenu
+  id="filter-menu-with-initial-state"
+  filter-name="Filter Name"
+  mode={UDExListMode.MultiSelect}
+  filter-name-prefix="Sort by:">
+  <UDExFilterMenuItem selected label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem selected label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Swift" supporting-text="iOS app development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Rust" supporting-text="Focused on safety and speed"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="PHP" supporting-text="Server-side scripting language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Go" supporting-text="Statically typed language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Kotlin" supporting-text="For Android development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="TypeScript" supporting-text="Super set of JS with static typing"></UDExFilterMenuItem>
+</UDExFilterMenu>
+
+const filterMenuGroupWithSearch = <UDExFilterMenu
+  id="filter-menu-group-with-search"
+  disable-target-overlap="true"
+  badge-value="2"
+  mode={UDExListMode.MultiSelect}
+  filter-name="Filter Name">
+  <UDExFilterMenuGroupHeader label="Programming Languages" supporting-text="Digital Builders">
+    <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Swift" supporting-text="iOS app development"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="C#" supporting-text="Object-oriented language"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Perl" supporting-text="General-purpose scripting language"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Rust" supporting-text="Focused on safety and speed"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="PHP" supporting-text="Server-side scripting language"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Go" supporting-text="Statically typed language"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Kotlin" supporting-text="For Android development"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="TypeScript" supporting-text="Super set of JS with static typing"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Ruby" supporting-text="Readable and easy-to-use"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="C++" supporting-text="Efficient and flexible language"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="R" supporting-text="Language for statistical computing"></UDExFilterMenuItem>
+  </UDExFilterMenuGroupHeader>
+</UDExFilterMenu>
+
+const filterMenuGroup = <><UDExFilterMenu
+  id="filter-menu-group"
+  mode={UDExListMode.MultiSelect}
+  filter-name="Filter Name">
+  <UDExFilterMenuGroupHeader label="Programming Languages" supporting-text="Digital Builders">
+    <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
+  </UDExFilterMenuGroupHeader>
+</UDExFilterMenu>
+<a id="next-focus" href="#">Next focus</a>
+</>
+
+const filterMenuRadioGroup = <UDExFilterMenu
+  id="filter-menu-radio-group"
+  disable-target-overlap="true"
+  mode="RadioGroup"
+  filter-name="Filter Name">
+  <UDExFilterMenuGroupHeader label="Backend Languages">
+    <UDExFilterMenuItem label="Python"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Node.js"></UDExFilterMenuItem>
+  </UDExFilterMenuGroupHeader>
+  <UDExFilterMenuGroupHeader label="Programming Languages">
+    <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Swift" supporting-text="iOS app development"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="C#" supporting-text="Object-oriented language"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Perl" supporting-text="General-purpose scripting language"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Rust" supporting-text="Focused on safety and speed"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="PHP" supporting-text="Server-side scripting language"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Go" supporting-text="Statically typed language"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Kotlin" supporting-text="For Android development"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="TypeScript" supporting-text="Super set of JS with static typing"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Ruby" supporting-text="Readable and easy-to-use"></UDExFilterMenuItem>
+  </UDExFilterMenuGroupHeader>
+</UDExFilterMenu>
+
+const filterMenuSingleWithSearch = <>
+  <span id="selectionChangedItem"></span>
+  <span id="selectedItems"></span>
+  <span id="changeSearch"></span>
+  <span id="resetSearch"></span>
+  <span id="resultSubmitSearch"></span>
+  <span id="dropdownEvents"></span>
+  <UDExFilterMenu
+  id="filter-menu-with-search"
+  filter-name="Filter Name"
+  height="320px">
+  <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Java" supporting-text="Building large-scale applications"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Swift" supporting-text="iOS app development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="C#" supporting-text="Object-oriented language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Perl" supporting-text="General-purpose scripting language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Rust" supporting-text="Focused on safety and speed"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="PHP" supporting-text="Server-side scripting language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Go" supporting-text="Statically typed language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Kotlin" supporting-text="For Android development"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="TypeScript" supporting-text="Super set of JS with static typing"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="Ruby" supporting-text="Readable and easy-to-use"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="C++" supporting-text="Efficient and flexible language"></UDExFilterMenuItem>
+  <UDExFilterMenuItem label="R" supporting-text="Language for statistical computing"></UDExFilterMenuItem>
+</UDExFilterMenu>
+</>
+
+const filterMenuSelectAll = <>
+  <span id="resultSelectAll"></span>
+  <UDExFilterMenu
+  id="filter-menu-select-all"
+  mode={UDExListMode.MultiSelect}
+  filter-name="Filter Name">
+  <UDExFilterMenuSelectAll>
+    <UDExFilterMenuItem label="JavaScript" supporting-text="Frontend web development"></UDExFilterMenuItem>
+    <UDExFilterMenuItem label="Python" supporting-text="Used in data analysis"></UDExFilterMenuItem>
+  </UDExFilterMenuSelectAll>
+</UDExFilterMenu>
+</>
+
+describe("Filter Menu component", () => {
+  describe("Filter Menu", () => {
+    beforeEach(() => {
+      cy.mount(filterMenu);
+    });
+
+    it("tests if web component is correctly rendered", async () => {
+      cy.get("[udex-filter-menu]").shadow().find("#filterMenuTrigger").should("exist")
+    });
+
+    it("renders the correct number of filter menu items", () => {
+      cy.get("[udex-filter-menu]").find("udex-filter-menu-item").should("have.length", 4);
+    });
+
+    it("renders the busy indicator", () => {
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.busy = true;
+      });
+      cy.get("[udex-filter-menu]").shadow().find("ui5-busy-indicator").should("exist");
+    });
+
+    it('renders the search input if "showSearchInput" property is set', () => {
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.showSearchInput = true;
+      });
+      cy.get("[udex-filter-menu]").shadow().find("[udex-search]").should("exist");
+    });
+
+    it('checks text for "triggerPrefix" and "triggerName"', () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger-name").should("have.text", "Filter Name");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger-prefix").should("have.text", "Sort by:");
+    });
+
+    it("click on trigger opens the dropdown and closes if clicked outside", () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+
+      cy.get("@triggerBtn").click();
+      cy.get("@triggerBtn").should("have.attr", "aria-expanded", "true");
+
+      cy.get("body").click();
+      cy.get("@triggerBtn").should("have.attr", "aria-expanded", "false");
+    });
+
+    it("checks label and supporting text for the item", () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list")
+        .find("udex-list-item").eq(0).as("firstItem");
+
+      cy.get("@firstItem").shadow().find(".udex-list__text-holder > span").should("contain.text", "JavaScript");
+      cy.get("@firstItem").shadow().find(".udex-list__supporting-text").should("have.text", "Frontend web development");
+    });
+
+    it('SingleSelect mode - item is selected and dropdown is closed after click on item', () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+
+      cy.get("@triggerBtn").click();
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list")
+        .find("udex-list-item").eq(0).as("firstItem");
+
+      cy.get("@firstItem").shadow().find(".udex-list__item").click();
+      cy.get("@firstItem").shadow().find(".udex-list__item").should("have.attr", "data-selected", "true");
+      cy.get("[udex-filter-menu]").should("not.have.attr", "open");
+    });
+
+    it('MultiSelect mode - has "Show Results" and "Reset" buttons', () => {
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.mode = UDExListMode.MultiSelect;
+      });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__result-btn").should("be.visible");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__reset-btn").should("be.visible");
+    });
+
+    it('MultiSelect mode - "Show Results" and "Reset" buttons default text', () => {
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.mode = UDExListMode.MultiSelect;
+      });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__result-btn").should("have.text", "Show Results");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__reset-btn").should("have.text", "Reset");
+    });
+
+    it("hides the action buttons if properties hide-result-btn and hide-reset-btn are set", () => {
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.mode = UDExListMode.MultiSelect;
+        element.setAttribute("hide-reset-btn", "");
+      });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__footer").find("udex-button").should("have.length", 1);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__footer").find("udex-button").should("have.text", "Show Results");
+
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.setAttribute("hide-result-btn", "");
+      });
+
+      cy.get("@triggerBtn").click();
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__footer").should("not.exist");
+
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.removeAttribute("hide-reset-btn");
+      });
+
+      cy.get("@triggerBtn").click();
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__footer").find("udex-button").should("have.length", 1);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__footer").find("udex-button").should("have.text", "Reset");
+    });
+  })
+
+  describe("Filter Menu with initial state", () => {
+    beforeEach(() => {
+      cy.mount(filterMenuWithInitialState);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").as("list");
+      cy.get("@list").find("udex-list-item").eq(0).shadow().find(".udex-list__item").as("firstItem");
+      cy.get("@list").find("udex-list-item").eq(1).shadow().find(".udex-list__item").as("secondItem");
+
+      cy.get("@firstItem").click();
+      cy.get("@secondItem").click();
+    });
+
+    it("keep initial list state after clicking outside", () => {
+      cy.get("body").click();
+      cy.get("@triggerBtn").click();
+
+      cy.get("@firstItem").should("have.attr", "data-selected", "true");
+      cy.get("@secondItem").should("have.attr", "data-selected", "true");
+    });
+
+    it("unselected all items after clicking reset button", () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__reset-btn").click();
+      cy.get("@triggerBtn").click();
+
+      cy.get("@firstItem").should("have.attr", "data-selected", "false");
+      cy.get("@secondItem").should("have.attr", "data-selected", "false");
+    });
+
+    it("apply list state after clicking result button", () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__result-btn").click();
+      cy.get("@triggerBtn").click();
+
+      cy.get("@firstItem").should("have.attr", "data-selected", "false");
+      cy.get("@secondItem").should("have.attr", "data-selected", "false");
+    });
+  });
+
+  describe("Filter Menu group with search", () => {
+    beforeEach(() => {
+      cy.mount(filterMenuGroupWithSearch);
+    });
+
+    it('renders the right badge', () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow().find("[udex-badge]").should("exist");
+    });
+
+    it('MultiSelect mode - click on the group item header changes to indeterminate', () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item").click();
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .should("have.attr", "indeterminate");
+    });
+
+    it('MultiSelect mode - after filtering and clicking on the only item found, the header should be indeterminate', () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("[udex-filter-menu]")
+        .shadow().find("[udex-search]")
+        .shadow().find(".udex-search__field")
+        .click().type("go");
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item").click();
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .should("have.attr", "indeterminate")
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .should("have.attr", "selected")
+    });
+  });
+
+  describe("Filter Menu group", () => {
+    beforeEach(() => {
+      cy.mount(filterMenuGroup);
+    });
+
+    it('MultiSelect mode - checks nonInteractive state for the group header', () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-searchable-list__header")
+        .as("groupHeader");
+
+      cy.get("@groupHeader").then(($el) => {
+        const element = $el[0] as UDExFilterMenuGroupHeader;
+        element.nonInteractive =true;
+      });
+
+      cy.get("@groupHeader").shadow()
+        .find(".udex-list__inactive-header")
+        .should("be.visible");
+    });
+
+    it('checks label and supporting text for the group header item', () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-searchable-list__header")
+        .as("groupHeader");
+
+      cy.get("@groupHeader").shadow().find("udex-list-item").should(($item) => {
+        expect($item).to.have.attr("label", "Programming Languages");
+        expect($item).to.have.attr("supporting-text", "Digital Builders");
+      });
+    });
+
+    it("unselect all items when user clicks on reset button", () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").as("list");
+      cy.get("@list").find("udex-list-item").eq(0).shadow().find(".udex-list__item").as("firstItem");
+      cy.get("@list").find("udex-list-item").eq(1).shadow().find(".udex-list__item").as("secondItem");
+
+      cy.get("@firstItem").click();
+      cy.get("@secondItem").click();
+
+      cy.get("@firstItem").should("have.attr", "data-selected", "true");
+      cy.get("@secondItem").should("have.attr", "data-selected", "true");
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__reset-btn").click();
+
+      cy.get("@firstItem").should("have.attr", "data-selected", "false");
+      cy.get("@secondItem").should("have.attr", "data-selected", "false");
+    });
+  });
+
+  describe("Filter Menu radio group", () => {
+    beforeEach(() => {
+      cy.mount(filterMenuRadioGroup);
+    });
+
+    it('RadioGroup mode - checks the selection of the item from each group', () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-group-header").eq(0)
+        .find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item").as("firstItemOfFirstGroup");
+
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-group-header").eq(1)
+        .find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item").as("secondItemOfSecondGroup");
+
+      cy.get("@firstItemOfFirstGroup").click();
+      cy.get("@secondItemOfSecondGroup").click();
+
+      cy.get("@firstItemOfFirstGroup").should("have.attr", "data-selected", "true");
+      cy.get("@secondItemOfSecondGroup").should("have.attr", "data-selected", "true");
+    });
+
+    it('RadioGroup mode - checks nonInteractive state for the group header', () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-searchable-list__header")
+        .as("groupHeader");
+
+      cy.get("@groupHeader").then(($el) => {
+        const element = $el[0] as UDExFilterMenuGroupHeader;
+        element.nonInteractive = true;
+      });
+
+      cy.get("@groupHeader").shadow()
+        .find(".udex-list__inactive-header")
+        .should("be.visible");
+    });
+
+    it('RadioGroup mode - search is hidden for this mode', () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__search").should("not.exist");
+    });
+  });
+
+  describe("Filter Menu Single with search", () => {
+    beforeEach(() => {
+      cy.mount(filterMenuSingleWithSearch);
+    });
+
+    it('shows search if filter has more than 13 items', () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").find("udex-filter-menu-item").should("have.length", 14);
+      cy.get("[udex-filter-menu]").shadow().find("udex-search").should("be.visible");
+    });
+
+    it('should filter items based on input', () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find("udex-search").shadow().find(".udex-search__field").as("searchInput");
+      cy.get("@searchInput").click().type("x");
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-no-result").should("have.text", "No matches found.");
+
+      cy.get("@searchInput").type("{backspace}").type("java");
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").find("udex-list-item").should("have.length", 2);
+
+      cy.get("@searchInput").type("s");
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").find("udex-list-item").should("have.length", 1);
+
+      cy.get("[udex-filter-menu]").shadow().find("udex-search").shadow().find(".udex-search__reset-button").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").find("udex-list-item").should("have.length", 14);
+    });
+
+    it("test if reset searching value using resetSearch method", () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("[udex-filter-menu]").shadow().find("udex-search").shadow().find(".udex-search__field").as("searchInput");
+
+      cy.get("@triggerBtn").click();
+      cy.get("@searchInput").click().type("go");
+
+      cy.get("[udex-filter-menu]").shadow().find("udex-search").shadow().find(".udex-search__reset-button").as("clearSearchBtn");
+
+      cy.get("@clearSearchBtn").click();
+      cy.get("@triggerBtn").click();
+
+      cy.get("@searchInput").should("have.value", "");
+    });
+
+    it("focuses on element with corresponding starting letter", () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]")
+        .shadow().find("udex-search")
+        .shadow().find(".udex-search__container--focus").should("exist");
+
+      cy.realPress("Tab");
+      cy.realPress("s");
+
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-item").eq(3)
+        .should("have.attr", "focused");
+    });
+
+    it("keyboard focus navigation for next(`Tab`) and previous (`Shift + Tab`) element", () => {
+      const LIMIT = 4;
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      for (let i = 0; i < LIMIT; i++) {
+        cy.realPress("ArrowDown");
+      }
+      for (let i = 0; i < LIMIT; i++) {
+        cy.realPress("ArrowUp");
+      }
+
+      cy.get("[udex-filter-menu]")
+        .shadow().find("udex-search")
+        .shadow().find(".udex-search__container--focus").should("exist");
+    });
+  });
+
+  describe("Filter Menu select all", () => {
+    beforeEach(() => {
+      cy.mount(filterMenuSelectAll);
+      cy.get("[udex-filter-menu]")
+        .shadow().find("udex-list-select-all")
+        .shadow().find("udex-list-item")
+        .shadow().find(".udex-list__header-select-all").as("selectAllHeader");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+    });
+
+    it("render the correct label for the header", () => {
+      cy.get("[udex-filter-menu]")
+        .shadow().find("udex-list-select-all")
+        .shadow().find("udex-list-item").should("have.text", "Select All");
+    });
+
+    it("header is not selected if at least one element is selected", () => {
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").as("list");
+      cy.get("@list").find("udex-list-item").eq(0).shadow().find(".udex-list__item").as("firstItem");
+
+      cy.get("@firstItem").click();
+
+      cy.get("@selectAllHeader").should("not.have.attr", "selected");
+    });
+
+    it("unselect all items when user clicks on select all header", () => {
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-select-all")
+        .find("udex-list-item").as("item");
+      cy.get("@item").eq(0).shadow().find(".udex-list__item").as("firstItem");
+      cy.get("@item").eq(1).shadow().find(".udex-list__item").as("secondItem");
+
+      cy.get("[udex-filter-menu]")
+        .shadow().find("udex-list-select-all")
+        .shadow().find("udex-list-item")
+        .shadow().find(".udex-list__item")
+        .as("selectAllHeader");
+
+      cy.get("@firstItem").click();
+      cy.get("@secondItem").click();
+
+      cy.get("@firstItem").should("have.attr", "data-selected", "true");
+      cy.get("@secondItem").should("have.attr", "data-selected", "true");
+      cy.get("@selectAllHeader").should("have.attr", "data-selected", "false");
+
+      cy.get("@selectAllHeader").click();
+
+      cy.get("@firstItem").should("have.attr", "data-selected", "false");
+      cy.get("@secondItem").should("have.attr", "data-selected", "false");
+    });
+
+    it("select all header focus on pressed letter", () => {
+      cy.realPress("p");
+      cy.get("[udex-filter-menu]").shadow().find("udex-list-item").eq(1).should("have.attr", "focused");
+    });
+  });
+
+  describe("Filter Menu focus state tests", () => {
+    it("focus returns to trigger when pressing Shift+Tab in dropdown with no search", () => {
+      cy.mount(filterMenuSelectAll);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").as("list");
+      cy.get("@list").find("udex-list-select-all").shadow().find("udex-list-item").as("headerSelectAll");
+
+      cy.get("@headerSelectAll").click();
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("@triggerBtn").should("be.focused");
+    });
+
+    it("focus goes to Reset button when pressing Tab on a list item and Result button", () => {
+      cy.mount(filterMenuSelectAll);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").as("list");
+      cy.get("@list").find("udex-list-item").eq(0).shadow().find(".udex-list__item").as("listItem");
+      cy.get("@listItem").click();
+
+      cy.realPress("Tab");
+      cy.realPress("Tab");
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__reset-btn").shadow().find("button")
+        .should("have.focus");
+    });
+
+    it("focus goes to Results button when pressing Tab on a list item and at least one item is selected", () => {
+      cy.mount(filterMenuSelectAll);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").find("udex-list-item").eq(0).shadow().find(".udex-list__item").as("listItem");
+      cy.get("@listItem").click();
+
+      cy.realPress("Tab");
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__result-btn").shadow().find("button")
+        .should("have.focus");
+    });
+
+    it("focus goes to next interactive element on the page when pressing Tab on a list item and footer buttons are hidden", () => {
+      cy.mount(filterMenuGroup);
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.hideResetBtn = true;
+        element.hideResultBtn = true;
+      });
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.realPress("Tab");
+
+
+      cy.get("#next-focus").should("have.focus");
+    });
+
+    it("focus goes to next interactive element on the page when pressing Tab on Reset button", () => {
+      cy.mount(filterMenuGroup);
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").find("udex-list-item").eq(0).shadow().find(".udex-list__item").as("listItem");
+      cy.get("@listItem").click();
+
+      cy.realPress("Tab");
+      cy.realPress("Tab");
+      cy.realPress("Tab");
+
+      cy.get("#next-focus").should("have.focus");
+    });
+  });
+
+  describe('Filter menu events tests',async () => {
+    it("emit selection-change when list items clicked", () => {
+      let selectionChangedItem;
+      let selectedItems;
+      cy.mount(filterMenuSingleWithSearch);
+
+      cy.get("[udex-filter-menu]").then(menu => {
+        menu.get(0).addEventListener('ui5-selection-change', function(e: CustomEvent) {
+          selectionChangedItem = e.detail.item._id;
+          selectedItems = e.detail.selectedItems.map((item) => { return item._id }).join("/");
+        });
+      });
+
+      const selectedIds: string[] = [];
+
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.mode = UDExListMode.MultiSelect;
+      });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").as("list");
+
+      cy.get("@list").find("udex-list-item").eq(0).as("firstItem");
+      cy.get("@firstItem").then(($el) => {
+        const firstItemId = $el.attr("data-token-id");
+        selectedIds.push(firstItemId!);
+      });
+
+      cy.get("@firstItem").shadow().find(".udex-list__item").click( );
+
+      expect(selectionChangedItem).to.equal(selectedIds[0]);
+    });
+
+    it("emit change-search when search field typing", () => {
+      cy.mount(filterMenuSingleWithSearch);
+      cy.window().then((win) => {
+        win.document.addEventListener('ui5-change-search', (e: CustomEvent) => {
+          win.document.getElementById('changeSearch')!.innerText = e.detail.value;
+        });
+      });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find("udex-search").shadow().find(".udex-search__field").as("searchInput");
+      cy.get("@searchInput").click().type("java");
+
+      cy.get("#changeSearch").should("have.text", "java");
+
+      cy.get("@searchInput").should("have.value", "java");
+    });
+
+    it("emit reset-search when search reset button is clicked", () => {
+      cy.mount(filterMenuSingleWithSearch);
+
+      cy.window().then((win) => {
+        win.document.addEventListener('ui5-reset-search', (e: CustomEvent) => {
+          win.document.getElementById('resetSearch')!.innerText = e.type;
+        });
+      });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find("udex-search").shadow().find(".udex-search__field").as("searchInput");
+      cy.get("@searchInput").click().type("j");
+
+      cy.get("#changeSearch").should("have.text", "j");
+
+      cy.get("[udex-filter-menu]").shadow().find("udex-search").shadow().find(".udex-search__reset-button").as("resetButton");
+      cy.get("@resetButton").click();
+
+      cy.get("#resetSearch").should("have.text", "ui5-reset-search");
+    });
+
+    it("emit reset-click when reset button is clicked", () => {
+      let resetClickId;
+      cy.mount(filterMenu);
+
+      cy.get("[udex-filter-menu]").then(menu => {
+        menu.get(0).addEventListener("ui5-reset-click", event =>  (e: CustomEvent) => {
+          resetClickId = e.detail.item._id;
+        });
+      });
+
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.mode = UDExListMode.MultiSelect;
+      });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").find("udex-list-item").eq(0).as("firstItem");
+      cy.get("@firstItem").shadow().find(".udex-list__item").click();
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__reset-btn").click();
+
+      cy.get("@firstItem").invoke('attr', 'data-token-id"')
+        .then((attrValue) => {
+          expect(attrValue).to.equal(resetClickId);
+        });
+    });
+
+    it("emit result-click when result button is clicked", () => {
+      let resultClickId;
+      cy.mount(filterMenu);
+      cy.window().then((win) => {
+        win.document.addEventListener('ui5-result-click', (e: CustomEvent) => {
+          const selectedItems = e.detail.selectedItems;
+          win.document.getElementById('resultClick')!.innerHTML = selectedItems.map((item) => item._id).join("/");
+        });
+      });
+
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.mode = UDExListMode.MultiSelect;
+      });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__result-btn").as("resultFilterBtn");
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").find("udex-list-item").eq(0).as("firstItem");
+
+      cy.get("@firstItem").then(($el) => {
+        resultClickId = $el.attr("data-token-id");
+      });
+
+      cy.get("@firstItem").shadow().find(".udex-list__item").click();
+      cy.get("@resultFilterBtn").click();
+
+      cy.get("#resultClick").should(($el) => {
+        expect($el.text()).to.equal(resultClickId);
+      });
+    });
+
+    it("emit submit-search when user presses Enter key in the search", () => {
+      let selectedIds: string[] = [];
+      let selectedItems;
+      cy.mount(filterMenuSingleWithSearch);
+
+      cy.get("[udex-filter-menu]").then(menu => {
+        menu.get(0).addEventListener('ui5-submit-search', function(e: CustomEvent) {
+          selectedItems = e.detail.selectedItems;
+        });
+      });
+
+      it("emit open/close when dropdown opened/closed", () => {
+        cy.mount(filterMenuSingleWithSearch);
+
+        cy.window().then((win) => {
+          win.document.addEventListener('ui5-before-open', (e: CustomEvent) => {
+            win.document.getElementById('dropdownEvents')!.innerText = e.type;
+          });
+
+          win.document.addEventListener('ui5-after-open', (e: CustomEvent) => {
+            win.document.getElementById('dropdownEvents')!.innerText = e.type;
+          });
+
+          win.document.addEventListener('ui5-after-close', (e: CustomEvent) => {
+            win.document.getElementById('dropdownEvents')!.innerText = e.type;
+          });
+        });
+
+        cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+        cy.get("@triggerBtn").click();
+        cy.get("#dropdownEvents").should("have.text", "ui5-before-open");
+        cy.get("#dropdownEvents").should("have.text", "ui5-after-open");
+        cy.get("@triggerBtn").click();
+        cy.get("#dropdownEvents").should("have.text", "ui5-after-close");
+      });
+
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        element.mode = UDExListMode.MultiSelect;
+      });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__list").as("list");
+      cy.get("@list").find("udex-list-item").eq(0).as("firstItem");
+
+      cy.get("@firstItem").then(($el) => {
+        const firstItemId = $el.attr("data-token-id");
+        selectedIds.push(firstItemId!);
+      });
+
+      cy.get("@firstItem").shadow().find(".udex-list__item").click();
+
+      cy.get("[udex-filter-menu]").shadow().find("udex-search").shadow().find(".udex-search__field").as("searchInput");
+      cy.get("@searchInput").click();
+      cy.realPress("Enter");
+
+      expect(selectedItems).to.equal(selectedIds[0]);
+    });
+
+    it("emit select-all when Select All header clicked", () => {
+      cy.mount(filterMenuSelectAll);
+       cy.window().then((win) => {
+         win.document.addEventListener('ui5-select-all', (e: CustomEvent) => {
+           win.document.getElementById('resultSelectAll')!.innerText = e.type;
+         });
+       });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").as("triggerBtn");
+      cy.get("@triggerBtn").click();
+
+      cy.get("[udex-filter-menu]")
+        .shadow().find("udex-list-select-all")
+        .shadow().find("udex-list-item")
+        .shadow().find(".udex-list__header-select-all").as("selectAllHeader");
+      cy.get("@selectAllHeader").click();
+
+      cy.get("#resultSelectAll").should("have.text", "ui5-select-all");
+    });
+  });
+});