@sapudex/web-components 2.33.0 → 2.34.0

package/cypress/specs/FilterMenu.cy.tsx

@@ -1,6 +1,18 @@
 import {UDExFilterMenu, UDExFilterMenuItem, UDExFilterMenuGroupHeader, UDExFilterMenuSelectAll} from "../support/component-imports.js";
 import {UDExListMode} from "../../src/types/List.js";
 
+const filterMenuWithRating = <UDExFilterMenu
+  id="filter-menu-rating"
+  filter-name="Rating"
+  show-search-input="true"
+  mode={UDExListMode.MultiSelect}>
+  <UDExFilterMenuItem rating="5" ratingCount="5.0" totalCount="23"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="4" ratingCount="4.0" totalCount="17"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="3" ratingCount="3.0" totalCount="34"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="2" ratingCount="2.0" totalCount="40"></UDExFilterMenuItem>
+  <UDExFilterMenuItem rating="1" ratingCount="1.0" totalCount="73"></UDExFilterMenuItem>
+</UDExFilterMenu>
+
 const filterMenu = <>
   <div id="resetClick"></div>
   <div id="resultClick"></div>
@@ -911,4 +923,45 @@ describe("Filter Menu component", () => {
       cy.get("#resultSelectAll").should("have.text", "ui5-select-all");
     });
   });
+
+  describe("Filter Menu Rating Indicator", () => {
+    it("renders rating indicator in dropdown items when rating is set", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0).shadow()
+        .find("[udex-rating-indicator]")
+        .should("exist");
+    });
+
+    it("passes correct rating attributes to dropdown list items", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0)
+        .should("have.attr", "rating", "5")
+        .and("have.attr", "rating-count", "5.0")
+        .and("have.attr", "total-count", "23");
+    });
+
+    it("renders correct number of rating items", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item")
+        .should("have.length", 5);
+    });
+
+    it("selects a rating item on click", () => {
+      cy.mount(filterMenuWithRating);
+      cy.get("#filter-menu-rating").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item").click();
+
+      cy.get("#filter-menu-rating").shadow().find("udex-list-item").eq(0).shadow()
+        .find(".udex-list__item")
+        .should("have.attr", "data-selected", "true");
+    });
+  });
 });

package/cypress/specs/ListItem.cy.tsx

@@ -4,6 +4,7 @@ import { UDExAvatarShape } from "../../dist/Avatar.js";
 import { UDExAvatarSize } from "../../src/Avatar.js";
 import { UDExAdditionalTextState, UDExListStyleType } from "../../src/types/List.js";
 import UDExStatusBadgeValueState from "../../dist/types/StatusBadgeValueState.js";
+import { UDExDisplayType } from "../../src/RatingIndicator.js";
 
 const defaultListItem = <UDExListItem
   id="listItem"
@@ -73,6 +74,13 @@ const listItemWithIcons = <UDExListItem
   <UDExButton accessible-name='Action' slot='secondIcon' design='Tertiary' icon='decline' size='Small'></UDExButton>
 </UDExListItem>
 
+const listItemWithRating = <UDExListItem
+  id="listItemRating"
+  rating="4"
+  ratingCount="4.0"
+  totalCount="20">
+</UDExListItem>
+
 describe("ListItem", () => {
     describe("Default rendering", () => {
       it("should render the component", () => {
@@ -169,4 +177,44 @@ describe("ListItem", () => {
         cy.get("#listItemWarning").shadow().find(".udex-list__add-text").should("have.css", "color", "rgb(141, 42, 0)");
       });
     });
+
+    describe("RatingIndicator", () => {
+      beforeEach(() => {
+        cy.mount(listItemWithRating);
+        cy.get("#listItemRating").shadow().find("[udex-rating-indicator]").as("rating");
+      });
+
+      it("renders rating indicator when rating is set", () => {
+        cy.get("@rating").should("exist");
+      });
+
+      it("passes correct value to rating indicator", () => {
+        cy.get("@rating").should("have.attr", "value", "4");
+      });
+
+      it("passes correct rating-count to rating indicator", () => {
+        cy.get("@rating").should("have.attr", "rating-count", "4.0");
+      });
+
+      it("passes correct total-count to rating indicator", () => {
+        cy.get("@rating").should("have.attr", "total-count", "20");
+      });
+
+      it("sets max to 5 by default", () => {
+        cy.get("@rating").should("have.attr", "max", "5");
+      });
+
+      it("sets display to Desktop by default", () => {
+        cy.get("@rating").should("have.attr", "display", UDExDisplayType.Desktop);
+      });
+
+      it("sets disabled and readonly states by default", () => {
+        cy.get("@rating").should("have.attr", "disabled");
+        cy.get("@rating").should("have.attr", "readonly");
+      });
+
+      it("sets correct aria-label on rating indicator", () => {
+        cy.get("@rating").should("have.attr", "aria-label", "Rating 4.0, Total 20, Rating Indicator 4 of 5");
+      });
+    });
 });

package/cypress/specs/MastheadMenu.cy.tsx

@@ -0,0 +1,564 @@
+import { UDExMastheadMenu } from "../support/component-imports.js";
+
+// Fixture: items with 3rd-level sub-items (no url on parent items — sub-category renders as <span>)
+const itemsWithSubItems = [
+  {
+    subMenuLinkItems: [
+      {
+        category: "Products",
+        url: "https://example.com/products",
+        items: [
+          {
+            title: "Cloud Solutions",
+            subItems: [
+              {
+                title: "SAP S/4HANA Cloud",
+                url: "https://example.com/s4hana",
+                externalLink: false,
+              },
+              {
+                title: "SAP BTP",
+                url: "https://example.com/btp",
+                externalLink: false,
+              },
+            ],
+          },
+          {
+            title: "On-Premise Solutions",
+            subItems: [
+              {
+                title: "SAP ERP",
+                url: "https://example.com/erp",
+                externalLink: false,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// Fixture: items with 3rd-level sub-items AND url on the parent item — sub-category renders as <udex-masthead-menu-item> link
+const itemsWithLinkedSubCategory = [
+  {
+    subMenuLinkItems: [
+      {
+        category: "AI Platform",
+        items: [
+          {
+            title: "Build",
+            url: "https://example.com/build",
+            externalLink: false,
+            subItems: [
+              {
+                title: "Develop",
+                url: "https://example.com/develop",
+                externalLink: false,
+              },
+              {
+                title: "Deploy",
+                url: "https://example.com/deploy",
+                externalLink: false,
+              },
+            ],
+          },
+          {
+            title: "Run",
+            url: "https://example.com/run",
+            externalLink: false,
+            subItems: [
+              {
+                title: "Monitor",
+                url: "https://example.com/monitor",
+                externalLink: false,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// Fixture: mixed linked and non-linked sub-categories within the same list
+const mixedLinkedSubCategories = [
+  {
+    subMenuLinkItems: [
+      {
+        category: "Platform",
+        items: [
+          {
+            title: "Build",
+            url: "https://example.com/build",
+            externalLink: false,
+            subItems: [
+              {
+                title: "Develop",
+                url: "https://example.com/develop",
+                externalLink: false,
+              },
+            ],
+          },
+          {
+            title: "Design",
+            // no url — renders as <span>
+            subItems: [
+              {
+                title: "Figma",
+                url: "https://example.com/figma",
+                externalLink: false,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// Fixture: items without sub-items (plain links only)
+const itemsWithoutSubItems = [
+  {
+    subMenuLinkItems: [
+      {
+        category: "Services",
+        items: [
+          {
+            title: "Consulting",
+            url: "https://example.com/consulting",
+            externalLink: false,
+          },
+          {
+            title: "Training",
+            url: "https://example.com/training",
+            externalLink: false,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// Fixture: mixed — one category with sub-items, another without
+const mixedItems = [
+  {
+    subMenuLinkItems: [
+      {
+        category: "Solutions",
+        items: [
+          {
+            title: "Cloud Solutions",
+            subItems: [
+              {
+                title: "SAP S/4HANA Cloud",
+                url: "https://example.com/s4hana",
+                externalLink: false,
+              },
+            ],
+          },
+          {
+            title: "Direct Link Item",
+            url: "https://example.com/direct",
+            externalLink: false,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+describe("UDExMastheadMenu — 3rd-level navigation (sub-items)", () => {
+  describe("Rendering sub-categories", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadMenu
+          id="menu-sub-items"
+          subItems={JSON.stringify(itemsWithSubItems)}
+        />
+      );
+      cy.get("[udex-masthead-menu]").shadow().as("shadow");
+    });
+
+    it("renders a .udex-masthead-menu__sub-category for each item with subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-category")
+        .should("have.length", 2);
+    });
+
+    // Updated: clarified that this covers the no-url case (item.url absent)
+    it("renders sub-category as a <span> when item has no url", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-category")
+        .first()
+        .should("have.prop", "tagName", "SPAN");
+    });
+
+    it("displays the correct title text in each sub-category", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-category")
+        .eq(0)
+        .should("have.text", "Cloud Solutions");
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-category")
+        .eq(1)
+        .should("have.text", "On-Premise Solutions");
+    });
+  });
+
+  describe("Rendering sub-list and sub-items", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadMenu
+          id="menu-sub-items"
+          subItems={JSON.stringify(itemsWithSubItems)}
+        />
+      );
+      cy.get("[udex-masthead-menu]").shadow().as("shadow");
+    });
+
+    it("renders a .udex-masthead-menu__sub-list for each item with subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .should("have.length", 2);
+    });
+
+    it("renders udex-masthead-menu-item elements inside each sub-list", () => {
+      // First sub-list: "Cloud Solutions" has 2 sub-items
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 2);
+
+      // Second sub-list: "On-Premise Solutions" has 1 sub-item
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1);
+    });
+
+    it("renders the correct label for each sub-item menu-item", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "label", "SAP S/4HANA Cloud");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .eq(1)
+        .should("have.attr", "label", "SAP BTP");
+    });
+
+    it("sets the correct url attribute on sub-item menu-items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "url", "https://example.com/s4hana");
+    });
+  });
+
+  describe("Sub-list accessibility", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadMenu
+          id="menu-sub-items"
+          subItems={JSON.stringify(itemsWithSubItems)}
+        />
+      );
+      cy.get("[udex-masthead-menu]").shadow().as("shadow");
+    });
+
+    it("sets aria-label on the sub-list matching the sub-category title", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .eq(0)
+        .should("have.attr", "aria-label", "Cloud Solutions");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .eq(1)
+        .should("have.attr", "aria-label", "On-Premise Solutions");
+    });
+  });
+
+  describe("Regression: items without subItems still render normally", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadMenu
+          id="menu-no-sub-items"
+          subItems={JSON.stringify(itemsWithoutSubItems)}
+        />
+      );
+      cy.get("[udex-masthead-menu]").shadow().as("shadow");
+    });
+
+    it("does not render any .udex-masthead-menu__sub-category when no items have subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-category")
+        .should("not.exist");
+    });
+
+    it("does not render any .udex-masthead-menu__sub-list when no items have subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .should("not.exist");
+    });
+
+    it("renders udex-masthead-menu-item elements directly in the main list", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__list")
+        .find("udex-masthead-menu-item")
+        .should("have.length", 2);
+    });
+
+    it("renders the correct labels for plain items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__list udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "label", "Consulting");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__list udex-masthead-menu-item")
+        .eq(1)
+        .should("have.attr", "label", "Training");
+    });
+  });
+
+  describe("Mixed content: items with and without subItems in the same list", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadMenu
+          id="menu-mixed"
+          subItems={JSON.stringify(mixedItems)}
+        />
+      );
+      cy.get("[udex-masthead-menu]").shadow().as("shadow");
+    });
+
+    it("renders a sub-category for the item that has subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-category")
+        .should("have.length", 1)
+        .and("have.text", "Cloud Solutions");
+    });
+
+    it("renders a sub-list with the sub-item for the grouped item", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .should("have.length", 1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "SAP S/4HANA Cloud");
+    });
+
+    it("also renders the plain item as a direct udex-masthead-menu-item in the main list", () => {
+      // The main .udex-masthead-menu__list should contain both the sub-category group
+      // and the direct link item. The direct link item sits at the top level of the list.
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__list > li > udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "Direct Link Item");
+    });
+  });
+
+  // CSS variable remapping for linked sub-categories is handled by the
+  // `udex-masthead-menu-item.udex-masthead-menu__sub-category` CSS rule, which sets
+  // --udex-masthead-menu-item-color, --udex-masthead-menu-item-font-size,
+  // --udex-masthead-menu-item-line-height, --udex-masthead-menu-item-font-weight,
+  // and text-transform from the --udex-masthead-menu-sub-category-* variables.
+  describe("Linked sub-category: item with subItems AND url renders as udex-masthead-menu-item", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadMenu
+          id="menu-linked-sub"
+          subItems={JSON.stringify(itemsWithLinkedSubCategory)}
+        />
+      );
+      cy.get("[udex-masthead-menu]").shadow().as("shadow");
+    });
+
+    describe("Rendering", () => {
+      it("renders a .udex-masthead-menu__sub-category for each item with subItems", () => {
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-category")
+          .should("have.length", 2);
+      });
+
+      it("applies the udex-masthead-menu__sub-category class on the linked udex-masthead-menu-item", () => {
+        cy.get("@shadow")
+          .find("udex-masthead-menu-item.udex-masthead-menu__sub-category")
+          .should("have.length", 2)
+          .each(($el) => {
+            cy.wrap($el).should("have.class", "udex-masthead-menu__sub-category");
+          });
+      });
+
+      it("renders sub-category as a <udex-masthead-menu-item>, not a <span>", () => {
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-category")
+          .first()
+          .should("have.prop", "tagName")
+          .then((tagName: string) => {
+            expect(tagName.toLowerCase()).to.equal("udex-masthead-menu-item");
+          });
+      });
+
+      it("displays the correct label attribute on each linked sub-category", () => {
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-category")
+          .eq(0)
+          .should("have.attr", "label", "Build");
+
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-category")
+          .eq(1)
+          .should("have.attr", "label", "Run");
+      });
+
+      it("sets the correct url attribute on each linked sub-category", () => {
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-category")
+          .eq(0)
+          .should("have.attr", "url", "https://example.com/build");
+
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-category")
+          .eq(1)
+          .should("have.attr", "url", "https://example.com/run");
+      });
+    });
+
+    describe("Accessibility", () => {
+      it("sets accessible-role='link' on the linked sub-category", () => {
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-category")
+          .each(($el) => {
+            cy.wrap($el).should("have.attr", "accessible-role", "link");
+          });
+      });
+
+      it("still renders the sub-list with aria-label matching the sub-category title", () => {
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-list")
+          .eq(0)
+          .should("have.attr", "aria-label", "Build");
+
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-list")
+          .eq(1)
+          .should("have.attr", "aria-label", "Run");
+      });
+    });
+
+    describe("Sub-items under linked sub-category", () => {
+      it("renders the correct number of sub-items in each sub-list", () => {
+        // "Build" has 2 sub-items: Develop, Deploy
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-list")
+          .eq(0)
+          .find("udex-masthead-menu-item")
+          .should("have.length", 2);
+
+        // "Run" has 1 sub-item: Monitor
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-list")
+          .eq(1)
+          .find("udex-masthead-menu-item")
+          .should("have.length", 1);
+      });
+
+      it("renders the correct labels and urls on sub-items", () => {
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-list")
+          .eq(0)
+          .find("udex-masthead-menu-item")
+          .eq(0)
+          .should("have.attr", "label", "Develop")
+          .and("have.attr", "url", "https://example.com/develop");
+
+        cy.get("@shadow")
+          .find(".udex-masthead-menu__sub-list")
+          .eq(0)
+          .find("udex-masthead-menu-item")
+          .eq(1)
+          .should("have.attr", "label", "Deploy")
+          .and("have.attr", "url", "https://example.com/deploy");
+      });
+    });
+  });
+
+  describe("Mixed linked and non-linked sub-categories in the same list", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadMenu
+          id="menu-mixed-linked"
+          subItems={JSON.stringify(mixedLinkedSubCategories)}
+        />
+      );
+      cy.get("[udex-masthead-menu]").shadow().as("shadow");
+    });
+
+    it("renders two .udex-masthead-menu__sub-category elements", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-category")
+        .should("have.length", 2);
+    });
+
+    it("renders the linked sub-category (Build) as a udex-masthead-menu-item", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-category")
+        .eq(0)
+        .should("have.prop", "tagName")
+        .then((tagName: string) => {
+          expect(tagName.toLowerCase()).to.equal("udex-masthead-menu-item");
+        });
+
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-category")
+        .eq(0)
+        .should("have.attr", "label", "Build")
+        .and("have.attr", "url", "https://example.com/build")
+        .and("have.attr", "accessible-role", "link");
+    });
+
+    it("renders the non-linked sub-category (Design) as a <span>", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-category")
+        .eq(1)
+        .should("have.prop", "tagName", "SPAN")
+        .and("have.text", "Design");
+    });
+
+    it("renders sub-lists under both sub-categories", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .should("have.length", 2);
+    });
+
+    it("renders sub-items correctly under the linked sub-category", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "Develop");
+    });
+
+    it("renders sub-items correctly under the non-linked sub-category", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "Figma");
+    });
+  });
+});