@sapudex/web-components 2.33.0 → 2.35.0

package/cypress/specs/MastheadMenu.cy.tsx

@@ -0,0 +1,645 @@
+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");
+      });
+    });
+  });
+
+  // Added: verifies focusInnerElement is used for Home/End/Tab navigation within the menu
+  describe("Keyboard navigation (Home/End/Tab focus inner element)", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExMastheadMenu
+          id="menu-keyboard"
+          subItems={JSON.stringify(itemsWithSubItems)}
+        />
+      );
+      cy.get("[udex-masthead-menu]").shadow().as("shadow");
+    });
+
+    it("Home key focuses the inner element of the first menu item", () => {
+      // Focus the last link, then press Home — should move focus to the inner element of the first link
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .last()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .focus();
+      cy.realPress("Home");
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+
+    it("End key focuses the inner element of the last menu item", () => {
+      // Focus the first link, then press End — should move focus to the inner element of the last link
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .focus();
+      cy.realPress("End");
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .last()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+
+    it("Shift+Tab focuses the inner element of the previous menu item", () => {
+      // Focus the second link, then press Shift+Tab — should focus the inner element of the first link
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .eq(1)
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .focus();
+      cy.realPress(["Shift", "Tab"]);
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+
+    it("Tab focuses the inner element of the next menu item", () => {
+      // Focus the first link, then press Tab — should focus the inner element of the second link
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .first()
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .focus();
+      cy.realPress("Tab");
+      cy.get("@shadow")
+        .find("[udex-masthead-menu-item][url]")
+        .eq(1)
+        .shadow()
+        .find(".udex-masthead-menu-item")
+        .should("be.focused");
+    });
+  });
+
+  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");
+    });
+  });
+});