@sapudex/web-components 2.41.0 → 2.43.0

package/config/wdio.conf.cjs

@@ -1,3 +1,19 @@
-const config = require("@ui5/webcomponents-tools/components-package/wdio.js");
+const baseConfig = require("@ui5/webcomponents-tools/components-package/wdio.js");
+const fs = require("fs");
 
-module.exports = config;
+// When CHROMEDRIVER_SKIP_DOWNLOAD=true the npm package binary is not downloaded,
+// so the wdio-chromedriver-service fallback resolves 'chromedriver' via PATH and
+// finds node_modules/.bin/chromedriver (a Node wrapper) before /usr/local/bin.
+// That wrapper then fails to find the binary and exits, so the port never binds.
+// Explicitly point at the system binary installed by setup-node to bypass this.
+const ciChromedriverPath = "/usr/local/bin/chromedriver";
+if (fs.existsSync(ciChromedriverPath)) {
+  baseConfig.config.services = baseConfig.config.services.map((service) => {
+    if (service === "chromedriver") {
+      return ["chromedriver", { chromedriverCustomPath: ciChromedriverPath }];
+    }
+    return service;
+  });
+}
+
+module.exports = baseConfig;

package/cypress/specs/Checkbox.cy.tsx

@@ -34,7 +34,7 @@ describe("Checkbox", () => {
 
   it("renders displayonly corectly", () => {
     cy.mount(<UDExCheckbox displayOnly></UDExCheckbox>)
-    cy.get("[udex-checkbox]").shadow().find("ui5-icon").should("be.visible")
+    cy.get("[udex-checkbox]").shadow().find("[ui5-icon]").should("exist")
   });
 
   it("correctly sets aria-checked", () => {

package/cypress/specs/FilterMenu.cy.tsx

@@ -964,4 +964,185 @@ describe("Filter Menu component", () => {
         .should("have.attr", "data-selected", "true");
     });
   });
+
+  // Added: covers SearchableListBase.filterItems group-header label matching.
+  // When the search query matches a group header's label, the header label is
+  // highlighted with <b> tags and ALL children of that group are shown.
+  // When only some children match, the header label is left intact (no <b>)
+  // and only the matching children are rendered.
+  describe("Filter Menu group header search highlighting", () => {
+    // Helper selector — the header's label is rendered inside the inner
+    // udex-list-item's shadow DOM as <span part="title">{{{label}}}</span>.
+    const titleSelector = "[part='title']";
+
+    // A stale document-level 'ui5-change-search' listener registered by the
+    // "emit change-search" test above references #changeSearch which doesn't
+    // exist in the filterMenuGroupWithSearch fixture, causing an app crash.
+    // Suppress it so it doesn't bleed into these tests.
+    beforeEach(() => {
+      cy.on("uncaught:exception", (err) => {
+        if (err.message.includes("Cannot set properties of null (setting 'innerText')")) {
+          return false;
+        }
+      });
+    });
+
+    const typeIntoSearch = (query: string) => {
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-search").shadow()
+        .find(".udex-search__field")
+        .click().type(query);
+    };
+
+    // Updated: covers Fix 1 — when the header label matches, children whose
+    // labels also contain the query now get <b> highlights too. Query "P"
+    // matches header "Programming Languages" AND children Python, Perl, PHP.
+    it("highlights the group header label with <b> tags when the search query matches the header label", () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__trigger").click();
+
+      typeIntoSearch("P");
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header").should("exist");
+
+      // Header "Programming Languages" starts with "P" — it must be highlighted.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("exist")
+        .and("have.text", "P");
+
+      // Fix 1: child "Python" (index 1) also contains "P" and must be highlighted.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(1).shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("exist")
+        .and("have.text", "P");
+    });
+
+    // Updated: covers Fix 1 — children matching the query DO get <b>; children
+    // that do not contain the query do NOT get <b>. Highlighting is selective,
+    // not all-or-nothing, even when the header match keeps every child visible.
+    it("shows ALL children of the group when the search query matches the group header label", () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__trigger").click();
+
+      typeIntoSearch("P");
+
+      // The fixture has 14 children. Header match means none are filtered out.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item")
+        .should("have.length", 14);
+
+      // "Python" (index 1) contains "P" — its label gets a <b> highlight.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(1).shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("exist");
+
+      // "Java" (index 2) does NOT contain "P" — its label has no <b>.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").eq(2).shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("not.exist");
+    });
+
+    // Added: covers Fix 2 — checkAndUpdateLabel now resets item.label to its
+    // clean form before deciding whether to add a new <b>, so a header that
+    // matched a previous query is cleaned up when the new query no longer
+    // matches it.
+    it("clears stale highlight on header when query changes", () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__trigger").click();
+
+      // First search matches the header — header label is highlighted.
+      typeIntoSearch("Programming");
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("exist");
+
+      // Replace the search with one that does NOT match the header label.
+      // "Java" matches children but not "Programming Languages".
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-search").shadow()
+        .find(".udex-search__field")
+        .clear().type("Java");
+
+      // Fix 2: stale <b> from the previous "Programming" match must be gone.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("not.exist");
+    });
+
+    it("does NOT highlight the group header label when only child items match the query", () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__trigger").click();
+
+      // "Java" matches both "Java" and "JavaScript" in the children list, but
+      // not the header label "Programming Languages".
+      typeIntoSearch("Java");
+
+      // Only matching children are rendered.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item")
+        .should("have.length", 2);
+
+      // Header label has no <b> tag because the header label itself does not
+      // contain "Java" — only the children do.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header").shadow()
+        .find("udex-list-item").shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("not.exist");
+
+      // The matching children themselves DO have <b> highlighting in their labels.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .find("udex-list-item").first().shadow()
+        .find(titleSelector)
+        .find("b")
+        .should("exist");
+    });
+
+    it("hides the group entirely when neither the header nor any child matches the query", () => {
+      cy.mount(filterMenuGroupWithSearch);
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-filter-menu__trigger").click();
+
+      typeIntoSearch("zzznomatch");
+
+      // The whole group is filtered out — group header is not rendered in shadow.
+      cy.get("[udex-filter-menu]").shadow()
+        .find("udex-list-group-header")
+        .should("not.exist");
+
+      // The empty-state message is shown instead.
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-no-result")
+        .should("have.text", "No matches found.");
+    });
+  });
 });

package/cypress/specs/MessageStrip.cy.tsx

@@ -0,0 +1,77 @@
+import { UDExMessageStrip } from "../support/component-imports.js";
+import { UDExMessageStripDesign, UDExMessageStripStatusType } from "../../src/types/MessageStrip.js";
+
+describe("MessageStrip — custom status text", () => {
+  it("renders custom information status text", () => {
+    cy.mount(
+      <UDExMessageStrip
+        design={UDExMessageStripDesign.Information}
+        statusType={UDExMessageStripStatusType.Text}
+        statusInformationText="Custom Info"
+      >
+        Message
+      </UDExMessageStrip>
+    );
+    cy.get("[udex-message-strip]").shadow().find(".message-strip__text-status").should("have.text", "Custom Info:");
+  });
+
+  it("renders custom success status text", () => {
+    cy.mount(
+      <UDExMessageStrip
+        design={UDExMessageStripDesign.Positive}
+        statusType={UDExMessageStripStatusType.Text}
+        statusSuccessText="Custom Success"
+      >
+        Message
+      </UDExMessageStrip>
+    );
+    cy.get("[udex-message-strip]").shadow().find(".message-strip__text-status").should("have.text", "Custom Success:");
+  });
+
+  it("renders custom error status text", () => {
+    cy.mount(
+      <UDExMessageStrip
+        design={UDExMessageStripDesign.Negative}
+        statusType={UDExMessageStripStatusType.Text}
+        statusErrorText="Custom Error"
+      >
+        Message
+      </UDExMessageStrip>
+    );
+    cy.get("[udex-message-strip]").shadow().find(".message-strip__text-status").should("have.text", "Custom Error:");
+  });
+
+  it("renders custom warning status text", () => {
+    cy.mount(
+      <UDExMessageStrip
+        design={UDExMessageStripDesign.Warning}
+        statusType={UDExMessageStripStatusType.Text}
+        statusWarningText="Custom Warning"
+      >
+        Message
+      </UDExMessageStrip>
+    );
+    cy.get("[udex-message-strip]").shadow().find(".message-strip__text-status").should("have.text", "Custom Warning:");
+  });
+
+  it("falls back to default text when custom status text is not provided", () => {
+    cy.mount(
+      <UDExMessageStrip
+        design={UDExMessageStripDesign.Information}
+        statusType={UDExMessageStripStatusType.Text}
+      >
+        Message
+      </UDExMessageStrip>
+    );
+    cy.get("[udex-message-strip]").shadow().find(".message-strip__text-status").should("not.have.text", "Custom Info:");
+  });
+
+  it("does not render status text for Action design", () => {
+    cy.mount(
+      <UDExMessageStrip design={UDExMessageStripDesign.Action} statusType={UDExMessageStripStatusType.Text}>
+        Message
+      </UDExMessageStrip>
+    );
+    cy.get("[udex-message-strip]").shadow().find(".message-strip__text-status").should("not.exist");
+  });
+});

package/cypress/specs/Search.cy.tsx

@@ -383,4 +383,24 @@ describe("UDExSearch — keyboard focus management (rewritten)", () => {
         });
     });
   });
+
+  describe("maxlength property", () => {
+    it("forwards the maxLength property onto the inner #search-input as a maxlength attribute", () => {
+      cy.mount(<UDExSearch id="search" maxlength={10} />);
+
+      cy.get(SEARCH_SHADOW)
+        .shadow()
+        .find(SEARCH_INPUT)
+        .should("have.attr", "maxlength", "10");
+    });
+
+    it("does not set a maxlength attribute on the inner #search-input when maxLength is not provided", () => {
+      cy.mount(<UDExSearch id="search" />);
+
+      cy.get(SEARCH_SHADOW)
+        .shadow()
+        .find(SEARCH_INPUT)
+        .should("not.have.attr", "maxlength");
+    });
+  });
 });