@sapudex/web-components 2.40.0 → 2.42.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/Dropdown.cy.tsx

@@ -0,0 +1,90 @@
+import {
+  UDExDropdown,
+  UDExButton,
+  UDExList,
+  UDExListItem,
+  UDExSearch,
+} from "../support/component-imports.js";
+
+const dropdownFixture = (
+  <div style="position:relative; padding: 24px;">
+    <a id="prev-link" href="#">Previous focusable element</a>
+    {" "}
+    <UDExButton id="opener">Open dropdown</UDExButton>
+    {" "}
+    <a id="next-link" href="#">Next focusable element</a>
+    <UDExDropdown id="dropdown" opener="opener">
+      <div slot="header">
+        <UDExSearch id="dropdown-search"></UDExSearch>
+      </div>
+      <UDExList id="dropdown-list">
+        <UDExListItem id="item-1">List Item 1</UDExListItem>
+        <UDExListItem id="item-2">List Item 2</UDExListItem>
+        <UDExListItem id="item-3">List Item 3</UDExListItem>
+      </UDExList>
+      <div slot="footer">
+        <UDExButton id="footer-button" design="Tertiary">Apply</UDExButton>
+      </div>
+    </UDExDropdown>
+  </div>
+);
+
+const openDropdown = () => {
+  cy.get("#dropdown").then($el => {
+    ($el[0] as any).open = true;
+  });
+  cy.get("[udex-dropdown]").should("have.attr", "open");
+};
+
+describe("UDExDropdown", () => {
+  describe("Rendering", () => {
+    it("registers the udex-dropdown custom element", () => {
+      cy.mount(dropdownFixture);
+      cy.get("[udex-dropdown]").should("exist");
+    });
+  });
+
+  describe("Dropdown keyboard navigation", () => {
+    it("Shift+Tab from first focusable element closes dropdown and returns focus to opener", () => {
+      cy.mount(dropdownFixture);
+      openDropdown();
+
+      // Opening the dropdown auto-focuses the search input in the header.
+      // forwardToLast() (Shift+Tab from the first focusable element) calls
+      // closePopup() which resets focus back to the opener.
+      cy.realPress(["Shift", "Tab"]);
+
+      cy.get("[udex-dropdown]").should("not.have.attr", "open");
+      cy.get("#opener").should("be.focused");
+    });
+
+    it("Tab from last focusable element closes dropdown and moves focus past opener", () => {
+      cy.mount(dropdownFixture);
+      openDropdown();
+
+      // Directly focus the last-fe sentinel — this is exactly what the browser
+      // does when Tab is pressed from the last focusable element inside the
+      // popover. The sentinel's onFocusIn calls forwardToFirst(), which closes
+      // the dropdown and moves focus to the next element after the opener.
+      cy.get("[udex-dropdown]").shadow().find(".last-fe").then($el => {
+        $el[0].focus();
+      });
+
+      cy.get("[udex-dropdown]").should("not.have.attr", "open");
+      cy.get("#next-link").should("be.focused");
+    });
+
+    it("Tab navigates forward through focusable elements without closing the dropdown", () => {
+      cy.mount(dropdownFixture);
+      openDropdown();
+
+      // The search input is auto-focused on open. A single forward Tab should
+      // move focus to the next focusable element inside the popover (list /
+      // footer) — the dropdown should remain open because we have not yet
+      // crossed the last-fe sentinel.
+      cy.realPress("Tab");
+
+      cy.get("[udex-dropdown]").should("have.attr", "open");
+    });
+  });
+});

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/PasswordField.cy.tsx

@@ -237,6 +237,43 @@ describe("passwordVisible property", () => {
   });
 });
 
+describe("activeButtonTooltip", () => {
+  const controlBtn = () =>
+    cy.get("[udex-password-field]")
+      .shadow().find("[udex-text-field]")
+      .shadow().find("[udex-control-button]");
+
+  it("uses showButtonTooltip when password is hidden", () => {
+    cy.mount(<UDExPasswordField show-button-enabled show-button-tooltip="Show it" hide-button-tooltip="Hide it"></UDExPasswordField>);
+    controlBtn().should("have.attr", "accessible-name", "Show it");
+    controlBtn().shadow().find("[data-sap-focus-ref]").should("have.attr", "title", "Show it");
+  });
+
+  it("uses hideButtonTooltip when password is visible", () => {
+    cy.mount(<UDExPasswordField show-button-enabled show-button-tooltip="Show it" hide-button-tooltip="Hide it"></UDExPasswordField>);
+    controlBtn().click();
+    controlBtn().should("have.attr", "accessible-name", "Hide it");
+    controlBtn().shadow().find("[data-sap-focus-ref]").should("have.attr", "title", "Hide it");
+  });
+
+  it("falls back to showButtonTooltip when hideButtonTooltip is not set", () => {
+    cy.mount(<UDExPasswordField show-button-enabled show-button-tooltip="Show it"></UDExPasswordField>);
+    controlBtn().click();
+    controlBtn().should("have.attr", "accessible-name", "Hide password");
+  });
+
+  it("falls back to i18n default 'Show password' when no tooltips are set and password is hidden", () => {
+    cy.mount(<UDExPasswordField show-button-enabled></UDExPasswordField>);
+    controlBtn().should("have.attr", "accessible-name", "Show password");
+  });
+
+  it("falls back to i18n default 'Hide password' when no tooltips are set and password is visible", () => {
+    cy.mount(<UDExPasswordField show-button-enabled></UDExPasswordField>);
+    controlBtn().click();
+    controlBtn().should("have.attr", "accessible-name", "Hide password");
+  });
+});
+
 describe("Events", () => {
   it("fires input event on typing", () => {
     const inputHandler = cy.stub().as("inputHandler");