@sapudex/web-components 2.30.0 → 2.32.0

package/cypress/specs/SelectBox.cy.tsx

@@ -25,6 +25,17 @@ const fullComponent = <UDExSelectBox
   <UDExSelectBoxItem label="R" supportingText="Language for statistical computing"></UDExSelectBoxItem>
 </UDExSelectBox>
 
+
+const groupHeaderCollapsible = <div style="width: 350px; position:relative;"><UDExSelectBox
+  id="select-box"
+  mode={UDExListMode.MultiSelect}
+  label="Programming languages">
+  <UDExSelectBoxGroupHeader label="Programming Languages" collapsible>
+    <UDExSelectBoxItem label="JavaScript" supportingText="Frontend web development"></UDExSelectBoxItem>
+    <UDExSelectBoxItem label="Python" supportingText="Used in data analysis"></UDExSelectBoxItem>
+  </UDExSelectBoxGroupHeader>
+</UDExSelectBox></div>
+
 const multiSelect = <div style="width: 350px; position:relative;">
   <a id="previous-focus" href="#">Previous focusable element</a>
   <UDExSelectBox
@@ -590,6 +601,71 @@ describe("SelectBox", () => {
       .find(".udex-list__inactive-header")
       .should("exist")
     });
+
+    it("MultiSelect mode - arrow keys navigate items when group header is nonInteractive", () => {
+      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-text-field__search").click();
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("be.focused");
+
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .should("be.focused");
+
+      cy.realPress("ArrowUp");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("be.focused");
+    });
+
+    it("MultiSelect mode - arrow keys navigate through collapsible group header and its items", () => {
+      cy.mount(groupHeaderCollapsible);
+
+      cy.get("#select-box").shadow().find(".udex-text-field__search").click();
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find(".udex-list__group-header-wrap")
+        .should("be.focused");
+
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("be.focused");
+
+      cy.realPress("ArrowDown");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(1)
+        .should("be.focused");
+
+      cy.realPress("ArrowUp");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-item").eq(0)
+        .should("be.focused");
+
+      cy.realPress("ArrowUp");
+
+      cy.get("#select-box").shadow()
+        .find("udex-list-group-header").shadow()
+        .find(".udex-list__group-header-wrap")
+        .should("be.focused");
+    });
   });
 
   describe("Select Box focus tests", () => {