@sapudex/web-components 2.31.0 → 2.32.1

package/cypress/specs/TabNavigation.cy.tsx

@@ -1,4 +1,4 @@
-import UDExTabNavigation from "../../src/TabNavigation.js";
+import UDExTabNavigation, { UDExTabNavigationOrientation, UDExTabNavigationPlacement, UDExTabNavigationVerticalAlignment } from "../../src/TabNavigation.js";
 import UDExTab from "../../src/Tab.js";
 
 // Test fixtures
@@ -725,9 +725,7 @@ describe("Tab Navigation component", () => {
           .should("not.exist");
       });
 
-      it("does NOT show link slot in header for horizontal tabs", () => {
-        // Note: The Tab component uses a `link` slot for adding links
-        // In horizontal mode, even with bodyText, the wrapper and links should not be shown
+      it("does NOT show tab wrapper in header for horizontal tabs", () => {
         cy.mount(
           <UDExTabNavigation orientation="Horizontal">
             <UDExTab text="Settings" bodyText="Configure your preferences" selected>
@@ -739,12 +737,6 @@ describe("Tab Navigation component", () => {
           </UDExTabNavigation>
         );
 
-        // Link container should NOT be visible in the header for horizontal tabs
-        cy.get("[udex-tab-navigation]")
-          .shadow()
-          .find(".udex-tab-navigation__button-links")
-          .should("not.exist");
-
         // Wrapper should NOT be used for horizontal tabs
         cy.get("[udex-tab-navigation]")
           .shadow()
@@ -804,35 +796,6 @@ describe("Tab Navigation component", () => {
           .should("have.length", 2);
       });
 
-      it("shows link slot in header for vertical tabs with link elements", () => {
-        // The Tab component uses a `link` slot for adding links in vertical mode
-        // When link slot elements are provided, they should be rendered in the tab header
-        cy.mount(
-          <UDExTabNavigation orientation="Vertical">
-            <UDExTab text="Settings" selected>
-              <a slot="link" href="https://example.com">Learn more</a>
-              <div>Settings content</div>
-            </UDExTab>
-            <UDExTab text="Account">
-              <a slot="link" href="https://example.com">View details</a>
-              <div>Account content</div>
-            </UDExTab>
-          </UDExTabNavigation>
-        );
-
-        // Wrapper should be used for vertical tabs with link slot
-        cy.get("[udex-tab-navigation]")
-          .shadow()
-          .find(".udex-tab-navigation__tab-wrapper")
-          .should("have.length", 2);
-
-        // Link container should exist for tabs with link slot
-        cy.get("[udex-tab-navigation]")
-          .shadow()
-          .find(".udex-tab-navigation__button-links")
-          .should("have.length", 2);
-      });
-
       it("displays body text content correctly for each vertical tab", () => {
         cy.mount(
           <UDExTabNavigation orientation="Vertical">
@@ -898,6 +861,605 @@ describe("Tab Navigation component", () => {
     });
   });
 
+  describe("TabNavigation - Vertical Placement", () => {
+    const verticalTabItems = (
+      <>
+        <UDExTab text="Settings" selected><div>Settings content</div></UDExTab>
+        <UDExTab text="Account"><div>Account content</div></UDExTab>
+      </>
+    );
+
+    it("renders header before content by default (Start placement)", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          {verticalTabItems}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]").shadow().then($shadow => {
+        const header = $shadow[0].querySelector(".udex-tab-navigation__header") as HTMLElement;
+        const content = $shadow[0].querySelector(".udex-tab-navigation__content") as HTMLElement;
+        expect(header.getBoundingClientRect().left).to.be.lessThan(content.getBoundingClientRect().left);
+      });
+    });
+
+    it("renders header after content for End placement", () => {
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          placement={UDExTabNavigationPlacement.End}
+        >
+          {verticalTabItems}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]").shadow().then($shadow => {
+        const header = $shadow[0].querySelector(".udex-tab-navigation__header") as HTMLElement;
+        const content = $shadow[0].querySelector(".udex-tab-navigation__content") as HTMLElement;
+        expect(header.getBoundingClientRect().left).to.be.greaterThan(content.getBoundingClientRect().left);
+      });
+    });
+
+    it("sets placement attribute on the host element", () => {
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          placement={UDExTabNavigationPlacement.End}
+        >
+          {verticalTabItems}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]").should("have.attr", "placement", "End");
+    });
+
+    it("does not apply End placement in Horizontal orientation", () => {
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Horizontal}
+          placement={UDExTabNavigationPlacement.End}
+        >
+          {verticalTabItems}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]").shadow().then($shadow => {
+        const header = $shadow[0].querySelector(".udex-tab-navigation__header") as HTMLElement;
+        expect(getComputedStyle(header).order).to.equal("0");
+      });
+    });
+
+    it("tab switching works correctly with End placement", () => {
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          placement={UDExTabNavigationPlacement.End}
+        >
+          {verticalTabItems}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab']")
+        .contains("Account")
+        .click();
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Account");
+    });
+  });
+
+  describe("TabNavigation - Footer slot", () => {
+    it("renders footer slot content below the tablist in Vertical orientation", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          <UDExTab text="Settings" selected><div>Settings content</div></UDExTab>
+          <UDExTab text="Account"><div>Account content</div></UDExTab>
+          <button slot="footer">Overview</button>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__footer")
+        .should("exist");
+    });
+
+    it("does not render footer container when no footer slot content is provided", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          <UDExTab text="Settings" selected><div>Settings content</div></UDExTab>
+          <UDExTab text="Account"><div>Account content</div></UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__footer")
+        .should("not.exist");
+    });
+
+    it("footer is below the tablist in the DOM order", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          <UDExTab text="Settings" selected><div>Settings content</div></UDExTab>
+          <UDExTab text="Account"><div>Account content</div></UDExTab>
+          <button slot="footer">Overview</button>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]").shadow().then($shadow => {
+        const tablist = $shadow[0].querySelector(".udex-tab-navigation__header-tabs") as HTMLElement;
+        const footer = $shadow[0].querySelector(".udex-tab-navigation__footer") as HTMLElement;
+        expect(tablist.getBoundingClientRect().bottom).to.be.lessThan(footer.getBoundingClientRect().top);
+      });
+    });
+
+    it("does not render footer slot for Horizontal orientation", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Horizontal}>
+          <UDExTab text="Settings" selected><div>Settings content</div></UDExTab>
+          <UDExTab text="Account"><div>Account content</div></UDExTab>
+          <button slot="footer">Overview</button>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__footer")
+        .should("not.exist");
+    });
+  });
+
+  describe("TabNavigation - Link slot", () => {
+    it("renders the links container inside the tab wrapper when link slot elements are provided in Vertical orientation", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          <UDExTab text="Account" body-text="Privacy settings" selected>
+            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <div>Account content</div>
+          </UDExTab>
+          <UDExTab text="Settings">
+            <div>Settings content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-links")
+        .should("exist");
+    });
+
+    it("renders all slotted link elements inside the links container", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          <UDExTab text="Account" selected>
+            <udex-link slot="link" href="https://sap.com/privacy" design="Default">Privacy Policy</udex-link>
+            <udex-link slot="link" href="https://sap.com/terms" design="Default">Terms of Service</udex-link>
+            <div>Account content</div>
+          </UDExTab>
+          <UDExTab text="Settings">
+            <div>Settings content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-links udex-link")
+        .should("have.length", 2);
+    });
+
+    it("links container is hidden on a non-selected tab and visible on the selected tab", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          <UDExTab text="Account" selected>
+            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <div>Account content</div>
+          </UDExTab>
+          <UDExTab text="Settings">
+            <udex-link slot="link" href="https://sap.com/" design="Default">Terms of Service</udex-link>
+            <div>Settings content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      // Selected tab's links container must be visible (display: flex via CSS sibling rule)
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab--active ~ .udex-tab-navigation__button-links")
+        .should("have.css", "display", "flex");
+
+      // Non-selected tab's links container must be hidden (display: none)
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__tab-wrapper")
+        .not(":has(.udex-tab-navigation__button-tab--active)")
+        .find(".udex-tab-navigation__button-links")
+        .should("have.css", "display", "none");
+    });
+
+    it("links container becomes visible after switching to a tab that has link slot elements", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          <UDExTab text="Account" selected>
+            <div>Account content</div>
+          </UDExTab>
+          <UDExTab text="Settings">
+            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <div>Settings content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab']")
+        .contains("Settings")
+        .click();
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab--active ~ .udex-tab-navigation__button-links")
+        .should("have.css", "display", "flex");
+    });
+
+    it("does not render the links container in Horizontal orientation", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Horizontal}>
+          <UDExTab text="Account" selected>
+            <udex-link slot="link" href="https://sap.com/" design="Default">Privacy Policy</udex-link>
+            <div>Account content</div>
+          </UDExTab>
+          <UDExTab text="Settings">
+            <div>Settings content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      // hasBodyTextOrLink requires _isVertical=true, so the wrapper branch is never entered
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-links")
+        .should("not.exist");
+    });
+
+    it("does not render links container when the link slot is empty", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          <UDExTab text="Account" selected>
+            <div>Account content</div>
+          </UDExTab>
+          <UDExTab text="Settings">
+            <div>Settings content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__button-links")
+        .should("not.exist");
+    });
+  });
+
+  describe("TabNavigation - Auto-play", () => {
+    const autoPlayTabs = (
+      <>
+        <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+        <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+        <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+      </>
+    );
+
+    it("renders play button when autoPlay is enabled on Vertical orientation", () => {
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          autoPlay
+          autoPlayInterval={5000}
+        >
+          {autoPlayTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__play-button")
+        .should("exist");
+    });
+
+    it("does not render play button for Horizontal orientation", () => {
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Horizontal}
+          autoPlay
+        >
+          {autoPlayTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__play-button")
+        .should("not.exist");
+    });
+
+    it("does not render play button when autoPlay is false", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          {autoPlayTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__play-button")
+        .should("not.exist");
+    });
+
+    it("advances to next tab after interval", () => {
+      cy.clock(0, ["setInterval", "clearInterval"]);
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          autoPlay
+          autoPlayInterval={1000}
+        >
+          {autoPlayTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Tab 1");
+
+      cy.tick(1000);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Tab 2");
+    });
+
+    it("loops back to first tab after the last tab", () => {
+      cy.clock(0, ["setInterval", "clearInterval"]);
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          autoPlay
+          autoPlayInterval={1000}
+        >
+          {autoPlayTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.tick(3000);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Tab 1");
+    });
+
+    it("pauses auto-play when play button is clicked", () => {
+      cy.clock(0, ["setInterval", "clearInterval"]);
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          autoPlay
+          autoPlayInterval={1000}
+        >
+          {autoPlayTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__play-button")
+        .click();
+
+      cy.tick(2000);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Tab 1");
+    });
+
+    it("resumes auto-play when play button is clicked again after pause", () => {
+      cy.clock(0, ["setInterval", "clearInterval"]);
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          autoPlay
+          autoPlayInterval={1000}
+        >
+          {autoPlayTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__play-button")
+        .click();
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__play-button")
+        .click();
+
+      cy.tick(1000);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Tab 2");
+    });
+
+    it("respects custom autoPlayInterval", () => {
+      cy.clock(0, ["setInterval", "clearInterval"]);
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          autoPlay
+          autoPlayInterval={3000}
+        >
+          {autoPlayTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.tick(2000);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Tab 1");
+
+      cy.tick(1000);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Tab 2");
+    });
+
+    it("resets interval timer when tab is manually selected", () => {
+      cy.clock(0, ["setInterval", "clearInterval"]);
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          autoPlay
+          autoPlayInterval={1000}
+        >
+          {autoPlayTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.tick(800);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab']")
+        .contains("Tab 3")
+        .click();
+
+      cy.tick(800);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Tab 3");
+
+      cy.tick(200);
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Tab 1");
+    });
+
+    it("shows pause icon when playing and play icon when paused", () => {
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          autoPlay
+          autoPlayInterval={5000}
+        >
+          {autoPlayTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__play-button")
+        .should("have.attr", "icon", "pause");
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__play-button")
+        .click();
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__play-button")
+        .should("have.attr", "icon", "play");
+    });
+  });
+
+  describe("TabNavigation - Vertical Alignment", () => {
+    const alignmentTabs = (
+      <>
+        <UDExTab text="Tab 1" selected><div style={{ height: "200px" }}>Tall content 1</div></UDExTab>
+        <UDExTab text="Tab 2"><div style={{ height: "200px" }}>Tall content 2</div></UDExTab>
+      </>
+    );
+
+    it("defaults to Top alignment when verticalAlignment is not set", () => {
+      cy.mount(
+        <UDExTabNavigation orientation={UDExTabNavigationOrientation.Vertical}>
+          {alignmentTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]").should("not.have.attr", "vertical-alignment", "Center");
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__header")
+        .should("have.css", "align-self", "flex-start");
+    });
+
+    it("applies center alignment when verticalAlignment is Center", () => {
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          verticalAlignment={UDExTabNavigationVerticalAlignment.Center}
+        >
+          {alignmentTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__header")
+        .should("have.css", "align-self", "center");
+    });
+
+    it("reflects vertical-alignment attribute on the host element", () => {
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Vertical}
+          verticalAlignment={UDExTabNavigationVerticalAlignment.Center}
+        >
+          {alignmentTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]").should("have.attr", "vertical-alignment", "Center");
+    });
+
+    it("does not apply vertical-alignment styles in Horizontal orientation", () => {
+      cy.mount(
+        <UDExTabNavigation
+          orientation={UDExTabNavigationOrientation.Horizontal}
+          verticalAlignment={UDExTabNavigationVerticalAlignment.Center}
+        >
+          {alignmentTabs}
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find(".udex-tab-navigation__header")
+        .should("not.have.css", "align-self", "center");
+    });
+  });
+
   describe("TabNavigation - Additional Features", () => {
     it("applies tabWidth property to vertical tabs", () => {
       cy.mount(
@@ -990,6 +1552,8 @@ describe("Tab Navigation component", () => {
     });
 
     it("handles tab selection in vertical mode with many tabs", () => {
+      cy.viewport(1280, 1200);
+
       const manyTabs = Array.from({ length: 10 }, (_, i) => (
         <UDExTab text={`Tab ${i + 1}`} selected={i === 0}>
           <div>Content {i + 1}</div>