@sapudex/web-components 0.225.0 → 2.0.0

package/cypress/specs/SelectBox.cy.tsx

@@ -0,0 +1,906 @@
+import UDExSelectBox from "../../src/SelectBox.js";
+import UDExSelectBoxSelectAll from "../../src/SelectBoxSelectAll.js";
+import UDExSelectBoxGroupHeader from "../../src/SelectBoxGroupHeader.js";
+import UDExSelectBoxItem from "../../src/SelectBoxItem.js";
+
+const fullComponent = <UDExSelectBox
+id="select-box"
+height="400px"
+label="Programming languages"
+supportingText="category lists">
+  <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development">
+    <span class="custom-content">Lorem ipsum</span>
+  </UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Java" supportingText="Building large-scale applications"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Swift" supportingText="iOS app development"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="C# - is a general-purpose high-level programming language supporting multiple paradigms" supportingText="Object-oriented language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Perl" supportingText="General-purpose scripting language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Rust" supportingText="Focused on safety and speed"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="PHP" supportingText="Server-side scripting language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Go" supportingText="Statically typed language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Kotlin" supportingText="For Android development"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="TypeScript" supportingText="Super set of JS with static typing"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Ruby" supportingText="Readable and easy-to-use"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="C++" supportingText="Efficient and flexible language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="C" supportingText="Most widely used programming language" disabled></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="R" supportingText="Language for statistical computing"></UDExSelectBoxItem>
+</UDExSelectBox>
+
+const multiSelect = <div style="width: 300px; position:relative;">
+  <a id="previous-focus" href="#">Previous focusable element</a>
+<UDExSelectBox
+id="select-box"
+height="400px"
+label="Programming languages"
+supportingText="category lists"
+mode="MultiSelect">
+  <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Java" supportingText="Building large-scale applications"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Swift" supportingText="iOS app development"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="C# - is a general-purpose high-level programming language supporting multiple paradigms" supportingText="Object-oriented language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Perl" supportingText="General-purpose scripting language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Rust" supportingText="Focused on safety and speed"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="PHP" supportingText="Server-side scripting language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Go" supportingText="Statically typed language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Kotlin" supportingText="For Android development"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="TypeScript" supportingText="Super set of JS with static typing"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Ruby" supportingText="Readable and easy-to-use"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="C++" supportingText="Efficient and flexible language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="C" supportingText="Most widely used programming language" disabled></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="R" supportingText="Language for statistical computing"></UDExSelectBoxItem>
+</UDExSelectBox></div>
+
+const displayOnly = <div style="width: 350px; position:relative;"><UDExSelectBox
+id="select-box"
+height="400px"
+label="Programming languages"
+supportingText="category lists"
+mode="MultiSelect"
+displayonly>
+  <UDExSelectBoxItem selected label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="Java" supportingText="Building large-scale applications"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="Swift" supportingText="iOS app development"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="C#" supportingText="Object-oriented language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="Perl" supportingText="General-purpose scripting language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="Rust" supportingText="Focused on safety and speed"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="PHP" supportingText="Server-side scripting language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="Go" supportingText="Statically typed language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="Kotlin" supportingText="For Android development"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="TypeScript" supportingText="Super set of JS with static typing"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="Ruby" supportingText="Readable and easy-to-use"></UDExSelectBoxItem>
+  <UDExSelectBoxItem selected label="C++" supportingText="Efficient and flexible language"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="C" supportingText="Most widely used programming language" disabled></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="R" supportingText="Language for statistical computing"></UDExSelectBoxItem>
+</UDExSelectBox></div>
+
+const shortComponent = <div style="width: 350px; position:relative;"><UDExSelectBox
+id="select-box"
+height="400px"
+label="Programming languages"
+supportingText="category lists">
+  <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Python"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Java"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Swift"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="C#"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Perl"></UDExSelectBoxItem>
+</UDExSelectBox></div>
+
+const groupHeader = <div style="width: 350px; position:relative;"><UDExSelectBox
+id="select-box"
+mode="MultiSelect"
+label="Programming languages">
+<UDExSelectBoxGroupHeader label="Programming Languages" supportingText="Digital Builders">
+  <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+  <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+</UDExSelectBoxGroupHeader>
+</UDExSelectBox></div>
+
+const selectAll = <div style="width: 350px; position:relative;">
+  <a id="previous-focus" href="#">Previous focusable element</a>
+  <UDExSelectBox
+  id="select-box"
+  mode="MultiSelect"
+  label="Programming languages">
+    <UDExSelectBoxSelectAll>
+      <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+      <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+    </UDExSelectBoxSelectAll>
+  </UDExSelectBox>
+<a id="next-focus" href="#">Next focusable element</a>
+</div>
+
+describe("SelectBox", () => {
+  it("tests if web component is correctly rendered", () => {
+    cy.mount(<UDExSelectBox></UDExSelectBox>);
+
+    cy.get("[udex-select-box]").should("exist");
+  });
+  
+  it("correct height style is applied", () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.get("#select-box")
+    .shadow()
+    .find("ui5-popover")
+    .shadow()
+    .find(".ui5-popup-content")
+    .should("have.css", 'max-height', '400px')
+  });
+  
+  it("correct label is applied", () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__label")
+    .should("have.text", "Programming languages")
+  });
+  
+  it("correct supporting text is applied", () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow().find("udex-status-message").shadow().find(".udex-status-message")
+    .should("have.text", "category lists");
+  });
+  
+  it("render the right amount items", () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").find("udex-select-box-item").should("have.length", 15);
+  });
+  
+  it('click on trigger opens/closes the dropdown', () => {
+    cy.mount(fullComponent);
+    const trigger = cy.get("#select-box").shadow().find(".udex-text-field__trigger");
+    trigger.click();
+
+    const dropdown = cy.get("#select-box").shadow().find(".udex-select-box__dropdown");
+    dropdown.should("have.attr","open");
+
+    trigger.click();
+    dropdown.should("not.have.attr","open");
+  });
+  
+  it('clicking on \"Space\" or \"Enter\" field should open/close dropdown', () => {
+    cy.mount(<div>
+      <UDExSelectBox id="select-box" label="Programming languages">
+      <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+      </UDExSelectBox>
+    </div>);
+    cy.realPress("Tab");
+    cy.realPress("Space");
+    
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("have.attr","open");
+    
+    cy.realPress("Enter");
+
+    cy.get("#select-box").shadow().find(".udex-select-box__dropdown").should("not.have.attr","open");
+  });
+  
+  it('checking label and supporting text for the item', () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.get("#select-box").shadow().find('udex-list-item').eq(0).as("firstItem");
+    cy.get("@firstItem")
+    .shadow()
+    .find(".udex-list__item")
+    .should("include.text", "JavaScript");
+
+    cy.get("@firstItem")
+    .shadow().find('.udex-list__supporting-text')
+    .should("have.text", "Frontend web development");
+  });
+  
+  it('checking the custom content for the item', () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.get("#select-box")
+    .shadow()
+    .find('udex-list-item').eq(0)
+    .find(".custom-content")
+    .should("have.text", "Lorem ipsum");
+  });
+  
+  it('show search if filter has more than 14 items', () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.get("#select-box")
+    .shadow()
+    .find(".udex-filter-menu__search")
+    .should("be.visible");
+  });
+  
+  it('does not show search if filter has less than 14 items', () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.get("#select-box")
+    .shadow()
+    .find(".udex-filter-menu__search")
+    .should("not.exist");
+  });
+  
+  it('should filter items based on search input', () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.get("#select-box").shadow()
+    .find(".udex-filter-menu__search")
+    .shadow()
+    .find(".udex-search__field")
+    .click();
+    cy.realType("java");
+
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item")
+    .should("have.length", 2);
+  });
+  
+  it('test if reset searching value using resetSearch method', () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.get("#select-box").shadow()
+    .find(".udex-filter-menu__search")
+    .shadow()
+    .find(".udex-search__field").as("searchField");
+
+    cy.get("@searchField")
+    .click();
+    cy.realType("java");
+    
+    cy.get("#select-box")
+      .then($el => {
+        const select = $el as any;
+        select[0].resetSearch();
+      })
+
+    cy.get("@searchField")
+    .should("have.value", "");
+  });
+  
+  it('should show empty msg if the search does not produce results', () => {
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.get("#select-box").shadow()
+    .find(".udex-filter-menu__search")
+    .shadow()
+    .find(".udex-search__field")
+    .click();
+    cy.realType("x");
+
+    cy.get("#select-box").shadow()
+    .find(".udex-no-result")
+    .should("include.text", "No matches found.");
+  });
+  
+  it('show tooltip in display only mode', () => {
+    cy.mount(displayOnly);
+
+    cy.get("#select-box").shadow()
+    .find(".udex-tag-group").shadow().as("tagGroup");
+
+    cy.get("@tagGroup")
+    .find(".udex-tag-group__tokenizer").shadow()
+    .find(".ui5-tokenizer-more-text")
+    .click();
+
+    cy.get("@tagGroup")
+    .find("udex-tooltip").shadow()
+    .find(".udex-tooltip__pane")
+    .should("have.attr", "open");
+  });
+  
+  
+  it('focus on element with corresponding starting letter', () => {
+    const testLetterKey = "p";
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.get("#select-box").shadow()
+    .find(".udex-filter-menu__search")
+    .shadow()
+    .find(".udex-search__field")
+    .click();
+
+    cy.realPress("Tab")
+    cy.realPress(testLetterKey);
+    
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(1)
+    .should("have.focus");
+
+    cy.realPress(testLetterKey);
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(5)
+    .should("have.focus");
+  });
+  
+  it('focus on element with corresponding starting letter filtered by search value', () =>{
+    cy.mount(fullComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.get("#select-box").shadow()
+    .find(".udex-filter-menu__search")
+    .shadow()
+    .find(".udex-search__field")
+    .click();
+
+    cy.realType("java");
+    cy.realPress("Tab");
+    cy.realPress("Tab");
+    cy.realPress("j");
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(0)
+    .should("have.focus");
+  });
+  
+  it('keyboard focus navigation on ArrowDown and ArrowUp element', () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__trigger")
+    .click();
+
+    cy.realPress("ArrowDown");
+    cy.realPress("ArrowDown");
+    
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(2)
+    .should("have.focus");
+
+    cy.realPress("ArrowUp");
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(1)
+    .should("have.focus");
+  });
+  
+  it('SingleSelect mode - after clicking on the item dropdown is closed', () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    const dropdown = cy.get("#select-box").shadow().find(".udex-select-box__dropdown");
+    dropdown.should("have.attr","open");
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(1)
+    .click();
+
+    dropdown.should("not.have.attr","open");
+  });
+  
+  it('SingleSelect mode - after clicking on the item it is selected', () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(1).as('currentItem')
+    
+    cy.get("@currentItem").click();
+    cy.get("@currentItem").shadow()
+    .find(".udex-list__item")
+    .should("have.attr", "aria-current","true")
+  });
+  
+  it('SingleSelect mode - value sets on the field after clicking on the item ', () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(0)
+    .click();
+    
+    cy.get("#select-box").shadow()
+    .find(".udex-text-field__single-label")
+    .should("have.text", "JavaScript");
+  });
+  
+  it('MultiSelect mode - after clicking on the item dropdown is opened', () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(1)
+    .click();
+
+    cy.get("#select-box").shadow()
+    .find(".udex-select-box__dropdown")
+    .should("have.attr","open");
+  });
+  
+  it('MultiSelect mode - rendering tags after clicking on the items', () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").as("items")
+    
+    cy.get("@items").eq(0).click();
+    cy.get("@items").eq(1).click();
+    cy.get("@items").eq(2).click();
+    
+    cy.get("#select-box").shadow()
+    .find("udex-tag-group").shadow()
+    .find(".udex-tag-group__tag")
+    .should("have.length", 3);
+  });
+  
+  it('MultiSelect mode - after clicking the delete icon of a tag removes it from the selection', () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(0).click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-tag-group").as("group")
+    
+    cy.get("@group")
+    .should("exist")
+
+    cy.get("#select-box").shadow()
+    .find("udex-tag-group").shadow()
+    .find("udex-tag").shadow()
+    .find(".udex-tag__icon")
+    .click();
+
+    cy.get("@group")
+    .should("not.exist")
+  });
+  
+  it('MultiSelect mode - n more is applied after clicking on the items', () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").as("items")
+    
+    cy.get("@items").eq(0).click();
+    cy.get("@items").eq(1).click();
+    cy.get("@items").eq(2).click();
+    cy.get("@items").eq(3).click();
+
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-tag-group").shadow()
+    .find(".udex-tag-group__tokenizer").shadow()
+    .find(".ui5-tokenizer-more-text")
+    .should("have.text", "2 more");
+  });
+  
+  it('MultiSelect mode - open dropdown after clicking on the more button', () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").as("items")
+    
+    cy.get("@items").eq(0).click();
+    cy.get("@items").eq(1).click();
+    cy.get("@items").eq(2).click();
+    cy.get("@items").eq(3).click();
+
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-tag-group").shadow()
+    .find(".udex-tag-group__tokenizer").shadow()
+    .find(".ui5-tokenizer-more-text")
+    .click();
+
+    cy.get("#select-box").shadow()
+    .find(".udex-select-box__dropdown")
+    .should("have.attr","open");
+  });
+  
+  it('MultiSelect mode - should truncate the tag when it is long and open the dropdown on click', () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(4).click();
+
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").realClick();
+
+    cy.get("#select-box").shadow()
+    .find("udex-tag-group").shadow()
+    .find("udex-tag").realClick();
+  
+    cy.get("#select-box").shadow()
+    .find(".udex-truncatable-tag-content")
+    .should("have.text", "C# - is a general-purpose high-level programming language supporting multiple paradigms")
+  });
+
+  it('MultiSelect mode - the truncated tag is selected when clicking on', () => {
+    cy.mount(multiSelect);
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-list-item").eq(4).click();
+
+    cy.get("#select-box").shadow()
+    .find("udex-tag-group").shadow()
+    .find("udex-tag").as("tag")
+    
+    cy.get("@tag").click();
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").realClick();
+    
+    cy.get("@tag")
+    .should("have.attr", "selected")
+  });
+  
+  describe('Select Box group header tests', () => {
+    it('MultiSelect mode - checks label and supporting text for the group header item', () => {
+      cy.mount(groupHeader);
+      cy.get("#select-box").shadow().as("select")
+      
+      cy.get("@select")
+      .find("udex-list-group-header").shadow()
+      .find("udex-list-item").shadow()
+      .find(".udex-list__text-holder > span").eq(0)
+      .should("have.text", "Programming Languages");
+      
+      cy.get("@select")
+      .find("udex-list-group-header").shadow()
+      .find("udex-list-item").shadow()
+      .find(".udex-list__supporting-text")
+      .should("have.text", "Digital Builders");
+    });
+    
+    it('MultiSelect mode - checks nonInteractive state for the group item header', () => {
+      cy.mount(groupHeader);
+      cy.get("udex-select-box-group-header")
+      .then($el => {
+        const select = $el as any;
+        select[0].nonInteractive = true;
+      })
+
+      cy.get("#select-box").shadow()
+      .find("udex-list-group-header").shadow()
+      .find(".udex-list__inactive-header")
+      .should("exist")
+    });
+  });
+  
+  describe('Select Box focus tests', () => {
+    it("focus moves to previous interactive element on the page when press Shift+Tab on a tag", () => {
+      cy.mount(multiSelect);
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+  
+      cy.get("#select-box").shadow()
+      .find("udex-list-item").as("items")
+      
+      cy.get("@items").eq(0).click();
+      cy.get("@items").eq(1).click();
+      cy.get("@items").eq(2).click();
+
+      cy.get("#select-box").shadow()
+      .find("udex-tag-group").shadow()
+      .find(".udex-tag-group__tag").eq(1)
+      .click();
+
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("#previous-focus")
+      .should("be.focused");
+    });
+  
+    it("focus moves to trigger when press Tab on a tag", () => {
+      cy.mount(selectAll);
+      cy.get("#select-box").shadow().as("select");
+      cy.get("@select").find(".udex-text-field__trigger").as("trigger")
+      
+      cy.get("@trigger").click();
+      
+      cy.get("@select")
+      .find("udex-list")
+      .find("udex-list-select-all").shadow()
+      .find(".udex-list__group-header")
+      .click()
+      
+      cy.get("@trigger").click();
+
+      cy.get("@select")
+      .find("udex-tag-group").shadow()
+      .find("udex-tag").eq(0)
+      .click()
+
+      cy.realPress("Tab");
+
+      cy.get("@trigger")
+      .should("be.focused");
+    });
+  
+    it("focus moves to previous interactive element on the page when press Shift+Tab on a trigger and no tags", () => {
+      cy.mount(selectAll);
+      cy.get("#select-box").shadow().as("select");
+      cy.get("@select").find(".udex-text-field__trigger").as("trigger")
+      
+      cy.get("@trigger").focus();
+
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("#previous-focus")
+      .should("be.focused");
+    });
+  
+    it("focus moves to the first tag when press Shift+Tab on a trigger", () => {
+      cy.mount(selectAll);
+      cy.get("#select-box").shadow().as("select");
+      cy.get("@select").find(".udex-text-field__trigger").as("trigger")
+      
+      cy.get("@trigger").click();
+      
+      cy.get("@select")
+      .find("udex-list")
+      .find("udex-list-select-all").shadow()
+      .find(".udex-list__group-header")
+      .click()
+      
+      cy.get("@trigger").click();
+
+      cy.get("@select")
+      .find("udex-tag-group").shadow()
+      .find("udex-tag").eq(0)
+      .click()
+
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("#previous-focus")
+      .should("be.focused");
+    });
+  
+    it("focus moves to next interactive element on the page when press Tab on a trigger", () => {
+      cy.mount(selectAll);
+      cy.get("#select-box").shadow().as("select");
+      cy.get("@select").find(".udex-text-field__trigger").as("trigger")
+      
+      cy.get("@trigger").focus();
+
+      cy.realPress(["Tab"]);
+
+      cy.get("#next-focus")
+      .should("be.focused");
+    });
+  
+    it("focus moves to next interactive element on the page when press Tab on a list item", () => {
+      cy.mount(selectAll);
+      cy.get("#select-box").shadow().as("select");
+      cy.get("@select").find(".udex-text-field__trigger").as("trigger")
+      
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+      .find("udex-list-item").eq(1)
+      .click();
+
+      cy.realPress(["Tab"]);
+
+      cy.get("#next-focus")
+      .should("be.focused");
+    });
+
+    it("focus moves to trigger when I press Shift+Tab on a list item and list has no search", () => {
+      cy.mount(selectAll);
+      cy.get("#select-box").shadow().as("select");
+      cy.get("@select").find(".udex-text-field__trigger").as("trigger")
+      
+      cy.get("@trigger").click();
+
+      cy.get("#select-box").shadow()
+      .find("udex-list-item").eq(1)
+      .click();
+
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("@trigger")
+      .should("be.focused");
+    });
+  });
+  
+  describe('Select Box Select All header tests',async () => {
+    it("render the correct label for the Select All header", () => {
+      cy.mount(selectAll);
+      cy.get("#select-box").as("select");
+
+      cy.get("@select").shadow().find(".udex-text-field__trigger").as("trigger")
+      
+      cy.get("@select").shadow()
+      .find("udex-list")
+      .find("udex-list-select-all").shadow()
+      .find(".udex-list__group-header")
+      .should("have.text", "Select All");
+    });
+  
+    it("emit select-all when Select All header clicked", () => {
+      cy.mount(selectAll);
+      cy.get("#select-box").as("select")
+      
+      cy.get("@select")
+      .then(select => {
+        select.get(0).addEventListener("select-all", cy.stub().as("selectall"));
+      });
+
+      cy.get("@select").shadow().find(".udex-text-field__trigger").as("trigger")
+      
+      cy.get("@trigger").click();
+      
+      cy.get("@select").shadow()
+      .find("udex-list")
+      .find("udex-list-select-all").shadow()
+      .find(".udex-list__group-header")
+      .click()
+
+      cy.get("@selectall")
+      .should("have.been.called");
+    });
+  });
+  
+  describe('Select Box events tests',async () => {
+    it('emit selection-change when list items clicked', () => {
+      cy.mount(fullComponent);
+      cy.get("#select-box").then(select => {
+        select.get(0).addEventListener("selection-change", cy.stub().as("selectionchange"));
+      });
+      cy.get("#select-box").shadow()
+      .find(".udex-text-field__trigger")
+      .click();
+
+      cy.get("#select-box").shadow()
+      .find("udex-list-item").eq(1)
+      .click();
+
+      cy.get("@selectionchange")
+      .should("have.been.called");
+    });
+  
+    it('emit change-search when search field typing', () => {
+      cy.mount(fullComponent);
+      cy.get("#select-box").then(select => {
+        select.get(0).addEventListener("change-search", cy.stub().as("changesearch"));
+      });
+      cy.get("#select-box").shadow()
+      .find(".udex-text-field__trigger")
+      .click();
+
+      cy.get("#select-box").shadow()
+      .find(".udex-filter-menu__search")
+      .shadow()
+      .find(".udex-search__field")
+      .click();
+      cy.realType("java");
+
+      cy.get("@changesearch")
+      .should("have.been.called");
+    });
+  
+    it("emit reset-search when search reset button is clicked", () => {
+      cy.mount(fullComponent);
+      cy.get("#select-box").then(select => {
+        select.get(0).addEventListener("reset-search", cy.stub().as("resetsearch"));
+      });
+      cy.get("#select-box").shadow().as("select")
+      .find(".udex-text-field__trigger")
+      .click();
+
+      cy.get("@select")
+      .find(".udex-filter-menu__search")
+      .shadow()
+      .find(".udex-search__field")
+      .click();
+      cy.realType("java");
+
+      cy.get("@select")
+      .find(".udex-filter-menu__search")
+      .shadow()
+      .find("#reset-button")
+      .click();
+
+      cy.get("@resetsearch")
+      .should("have.been.called");
+    });
+    
+    it('emit submit-search when user presses Enter key in the search', () => {
+      cy.mount(fullComponent);
+      cy.get("#select-box").then(select => {
+        select.get(0).addEventListener("submit-search", cy.stub().as("submitsearch"));
+      });
+      cy.get("#select-box").shadow()
+      .find(".udex-text-field__trigger")
+      .click();
+      
+      cy.get("#select-box").shadow()
+      .find(".udex-filter-menu__search")
+      .shadow()
+      .find(".udex-search__field")
+      .click();
+      cy.realType("java");
+      
+      cy.realPress("Enter");
+      
+      cy.get("@submitsearch")
+      .should("have.been.called");
+    });
+  
+    it('emit remove when click on decline icon in the tag', () => {
+      cy.mount(multiSelect);
+      cy.get("#select-box").then(select => {
+        select.get(0).addEventListener("remove", cy.stub().as("remove"));
+      });
+      cy.get("#select-box").shadow().as("select");
+
+      cy.get("@select").find(".udex-text-field__trigger")
+      .click();
+
+      cy.get("@select")
+      .find("udex-list-item").as("items")
+      
+      cy.get("@items").eq(0).click();
+      cy.get("@items").eq(1).click();
+
+      cy.get("@select")
+      .find("udex-tag-group").shadow()
+      .find("udex-tag").eq(0).shadow()
+      .find(".udex-tag__icon")
+      .click();
+
+      cy.get("@remove")
+      .should("have.been.called");
+    });
+  
+    it('emit show-more when more button clicked', () => {
+      cy.mount(multiSelect);
+      cy.get("#select-box").then(select => {
+        select.get(0).addEventListener("show-more", cy.stub().as("showmore"));
+      });
+
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+  
+      cy.get("#select-box").shadow()
+      .find("udex-list-item").as("items")
+      
+      cy.get("@items").eq(0).click();
+      cy.get("@items").eq(1).click();
+      cy.get("@items").eq(2).click();
+      cy.get("@items").eq(3).click();
+  
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+  
+      cy.get("#select-box").shadow()
+      .find("udex-tag-group").shadow()
+      .find(".udex-tag-group__tokenizer").shadow()
+      .find(".ui5-tokenizer-more-text")
+      .click();
+
+      cy.get("@showmore")
+      .should("have.been.called");
+    });
+  });
+
+});