@sapudex/web-components 2.32.1 → 2.34.0

package/cypress/specs/MastheadMobileMenu.cy.tsx

@@ -0,0 +1,573 @@
+import { UDExMastheadMobileMenu } from "../support/component-imports.js";
+
+// Fixture: category with 3rd-level sub-items
+const categoryWithSubItems = {
+  category: "Cloud Products",
+  index: 0,
+  items: [
+    {
+      title: "Platform Services",
+      url: "",
+      externalLink: false,
+      subItems: [
+        {
+          title: "SAP BTP",
+          url: "https://example.com/btp",
+          externalLink: false,
+        },
+        {
+          title: "SAP Integration Suite",
+          url: "https://example.com/integration",
+          externalLink: false,
+        },
+      ],
+    },
+    {
+      title: "ERP Solutions",
+      url: "",
+      externalLink: false,
+      subItems: [
+        {
+          title: "SAP S/4HANA Cloud",
+          url: "https://example.com/s4hana",
+          externalLink: false,
+        },
+      ],
+    },
+  ],
+};
+
+// Fixture: category with only flat items (no subItems)
+const categoryWithoutSubItems = {
+  category: "Services",
+  index: 0,
+  items: [
+    {
+      title: "Consulting",
+      url: "https://example.com/consulting",
+      externalLink: false,
+    },
+    {
+      title: "Training",
+      url: "https://example.com/training",
+      externalLink: false,
+    },
+  ],
+};
+
+// Fixture: mixed — one item with subItems, one without
+const categoryMixed = {
+  category: "Solutions",
+  index: 0,
+  items: [
+    {
+      title: "Cloud Solutions",
+      url: "",
+      externalLink: false,
+      subItems: [
+        {
+          title: "SAP Analytics Cloud",
+          url: "https://example.com/analytics",
+          externalLink: false,
+        },
+      ],
+    },
+    {
+      title: "Direct Link Item",
+      url: "https://example.com/direct",
+      externalLink: false,
+    },
+  ],
+};
+
+// Fixture: sub-category parent items all have urls (linked sub-categories)
+const categoryWithLinkedSubCategories = {
+  category: "AI Platform",
+  index: 0,
+  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,
+      subItems: [
+        {
+          title: "Staging",
+          url: "https://example.com/staging",
+          externalLink: false,
+        },
+        {
+          title: "Production",
+          url: "https://example.com/production",
+          externalLink: false,
+        },
+      ],
+    },
+  ],
+};
+
+// Fixture: mixed linked and unlinked sub-category parents
+const categoryMixedLinkedAndUnlinked = {
+  category: "Data Services",
+  index: 0,
+  items: [
+    {
+      title: "Integration",
+      url: "https://example.com/integration",
+      externalLink: false,
+      subItems: [
+        {
+          title: "API Management",
+          url: "https://example.com/api-mgmt",
+          externalLink: false,
+        },
+      ],
+    },
+    {
+      title: "Analytics",
+      url: "",
+      externalLink: false,
+      subItems: [
+        {
+          title: "Dashboards",
+          url: "https://example.com/dashboards",
+          externalLink: false,
+        },
+      ],
+    },
+  ],
+};
+
+/**
+ * Helper: mount the mobile menu and activate category-items view.
+ * Sets _showCategoryItems = true and _category to the provided fixture,
+ * which triggers the category-items inline partial template.
+ */
+function mountWithCategoryItems(category: typeof categoryWithSubItems) {
+  cy.mount(<UDExMastheadMobileMenu id="mobile-menu" />);
+  cy.get("[udex-masthead-mobile-menu]").then(($el) => {
+    const el = $el[0] as any;
+    el._category = category;
+    el._showCategoryItems = true;
+  });
+  // Wait for re-render after property changes
+  cy.get("[udex-masthead-mobile-menu]").shadow().as("shadow");
+}
+
+describe("UDExMastheadMobileMenu -- 3rd-level navigation (sub-items)", () => {
+  describe("Rendering sub-categories (no url — span)", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryWithSubItems);
+    });
+
+    it("renders a .udex-masthead-mobile-menu__sub-category span for each item with subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .should("have.length", 2);
+    });
+
+    it("renders sub-category as a <span> element when the item has no url", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .first()
+        .should("have.prop", "tagName", "SPAN");
+    });
+
+    it("displays the correct title text for each sub-category span", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .eq(0)
+        .should("have.text", "Platform Services");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .eq(1)
+        .should("have.text", "ERP Solutions");
+    });
+  });
+
+  describe("Rendering sub-list and sub-items", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryWithSubItems);
+    });
+
+    it("renders a .udex-masthead-mobile-menu__sub-list for each item with subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .should("have.length", 2);
+    });
+
+    it("renders udex-masthead-menu-item elements inside each sub-list with correct count", () => {
+      // First sub-list: "Platform Services" has 2 sub-items
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 2);
+
+      // Second sub-list: "ERP Solutions" has 1 sub-item
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1);
+    });
+
+    it("renders the correct label attribute for each sub-item menu-item", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "label", "SAP BTP");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .eq(1)
+        .should("have.attr", "label", "SAP Integration Suite");
+    });
+
+    it("sets the correct url attribute on sub-item menu-items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "url", "https://example.com/btp");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "url", "https://example.com/s4hana");
+    });
+
+    it("sets third-level attribute on sub-item menu-items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .first()
+        .should("have.attr", "third-level");
+    });
+
+    // Updated: has-border removed from sub-item menu-items in template
+    it("does not set has-border attribute on sub-item menu-items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .first()
+        .should("not.have.attr", "has-border");
+    });
+  });
+
+  describe("Sub-list accessibility", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryWithSubItems);
+    });
+
+    it("sets aria-label on the sub-list matching the sub-category title", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .should("have.attr", "aria-label", "Platform Services");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .should("have.attr", "aria-label", "ERP Solutions");
+    });
+
+    it("wraps sub-items in a <ul> element for correct list semantics", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .first()
+        .should("have.prop", "tagName", "UL");
+    });
+  });
+
+  describe("Regression: items without subItems still render directly", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryWithoutSubItems);
+    });
+
+    it("does not render any .udex-masthead-mobile-menu__sub-category when no items have subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .should("not.exist");
+    });
+
+    it("does not render any .udex-masthead-mobile-menu__sub-list when no items have subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .should("not.exist");
+    });
+
+    it("renders udex-masthead-menu-item elements directly for flat items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__list udex-masthead-menu-item[third-level]")
+        .should("have.length", 2);
+    });
+
+    it("renders the correct labels for flat items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__list udex-masthead-menu-item[third-level]")
+        .eq(0)
+        .should("have.attr", "label", "Consulting");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__list udex-masthead-menu-item[third-level]")
+        .eq(1)
+        .should("have.attr", "label", "Training");
+    });
+
+    it("renders the correct url for flat items", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__list udex-masthead-menu-item[third-level]")
+        .eq(0)
+        .should("have.attr", "url", "https://example.com/consulting");
+    });
+  });
+
+  describe("Mixed content: items with and without subItems in the same category", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryMixed);
+    });
+
+    it("renders a sub-category span only for the item that has subItems", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .should("have.length", 1)
+        .and("have.text", "Cloud Solutions");
+    });
+
+    it("renders a sub-list with the correct sub-item for the grouped item", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .should("have.length", 1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "SAP Analytics Cloud");
+    });
+
+    it("renders the flat item as a direct udex-masthead-menu-item outside any sub-list", () => {
+      // The direct link item sits at top level in the main list, not inside a sub-list
+      cy.get("@shadow")
+        .find(
+          ".udex-masthead-mobile-menu__list > li > udex-masthead-menu-item[third-level]"
+        )
+        .should("have.length", 1)
+        .and("have.attr", "label", "Direct Link Item")
+        .and("have.attr", "url", "https://example.com/direct");
+    });
+  });
+
+  // Updated: linked sub-categories (with url) now have the
+  // .udex-masthead-mobile-menu__sub-category class restored. CSS variable
+  // remapping is done via the `udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category`
+  // rule (no padding/border — those only apply to the span variant).
+  describe("Rendering linked sub-categories (item has url + subItems)", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryWithLinkedSubCategories);
+    });
+
+    // Updated: linked sub-categories now carry the __sub-category class again
+    it("renders .udex-masthead-mobile-menu__sub-category for linked items (udex-masthead-menu-item, not span)", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .should("have.length", 2);
+    });
+
+    it("renders linked sub-category as a udex-masthead-menu-item (not a span) when the item has a url", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .first()
+        .should("have.prop", "tagName")
+        .then((tagName: string) => {
+          expect(tagName.toLowerCase()).to.include("udex-masthead-menu-item");
+        });
+    });
+
+    it("sets the correct label attribute on the linked sub-category", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .eq(0)
+        .should("have.attr", "label", "Build");
+
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .eq(1)
+        .should("have.attr", "label", "Deploy");
+    });
+
+    it("sets the correct url attribute on the linked sub-category", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .eq(0)
+        .should("have.attr", "url", "https://example.com/build");
+
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .eq(1)
+        .should("have.attr", "url", "https://example.com/deploy");
+    });
+
+    it("sets the third-level attribute on the linked sub-category", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .first()
+        .should("have.attr", "third-level");
+    });
+
+    // Updated: linked sub-category has the __sub-category class but does NOT
+    // have has-border — padding/border styles only apply to the span variant
+    it("does not set has-border attribute on the linked sub-category", () => {
+      cy.get("@shadow")
+        .find("udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category")
+        .first()
+        .should("not.have.attr", "has-border");
+    });
+
+    it("still renders the sub-list beneath the linked sub-category", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .should("have.length", 2);
+    });
+
+    it("renders the correct sub-items inside the sub-list of a linked sub-category", () => {
+      // First sub-list (under "Build") has 1 sub-item: "Develop"
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "Develop");
+
+      // Second sub-list (under "Deploy") has 2 sub-items: "Staging", "Production"
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 2);
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .eq(0)
+        .should("have.attr", "label", "Staging");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .eq(1)
+        .should("have.attr", "label", "Production");
+    });
+
+    it("preserves aria-label on the sub-list matching the linked sub-category title", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .should("have.attr", "aria-label", "Build");
+
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .should("have.attr", "aria-label", "Deploy");
+    });
+  });
+
+  describe("Mixed linked and unlinked sub-categories in the same category", () => {
+    beforeEach(() => {
+      mountWithCategoryItems(categoryMixedLinkedAndUnlinked);
+    });
+
+    // Updated: linked sub-category now has the __sub-category class restored;
+    // target it via udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category
+    it("renders the linked sub-category as a udex-masthead-menu-item with __sub-category class", () => {
+      // "Integration" has a url — should be a menu-item with the class
+      cy.get("@shadow")
+        .find(
+          "udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category"
+        )
+        .should("have.length", 1)
+        .and("have.attr", "label", "Integration")
+        .and("have.attr", "url", "https://example.com/integration");
+    });
+
+    it("renders the unlinked sub-category as a span", () => {
+      // "Analytics" has no url — should be a span
+      cy.get("@shadow")
+        .find("span.udex-masthead-mobile-menu__sub-category")
+        .should("have.length", 1)
+        .and("have.text", "Analytics");
+    });
+
+    // Updated: both linked and unlinked sub-categories now have __sub-category class
+    it("renders two .udex-masthead-mobile-menu__sub-category elements (one linked, one unlinked)", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-category")
+        .should("have.length", 2);
+    });
+
+    it("renders sub-lists for both linked and unlinked sub-categories", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .should("have.length", 2);
+    });
+
+    it("renders the linked sub-category's sub-item correctly", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(0)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "API Management")
+        .and("have.attr", "url", "https://example.com/api-mgmt");
+    });
+
+    it("renders the unlinked sub-category's sub-item correctly", () => {
+      cy.get("@shadow")
+        .find(".udex-masthead-mobile-menu__sub-list")
+        .eq(1)
+        .find("udex-masthead-menu-item")
+        .should("have.length", 1)
+        .and("have.attr", "label", "Dashboards")
+        .and("have.attr", "url", "https://example.com/dashboards");
+    });
+
+    // Updated: linked sub-category has __sub-category class but NOT has-border;
+    // padding/border styles only apply to the span variant via CSS rule split
+    it("sets third-level but not has-border on the linked sub-category menu-item", () => {
+      cy.get("@shadow")
+        .find(
+          "udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category"
+        )
+        .first()
+        .should("have.attr", "third-level");
+
+      cy.get("@shadow")
+        .find(
+          "udex-masthead-menu-item.udex-masthead-mobile-menu__sub-category"
+        )
+        .first()
+        .should("not.have.attr", "has-border");
+    });
+  });
+});