@sapudex/web-components 2.26.0 → 2.27.0

package/cypress/specs/TabNavigation.cy.tsx

@@ -0,0 +1,1024 @@
+import UDExTabNavigation from "../../src/TabNavigation.js";
+import UDExTab from "../../src/Tab.js";
+
+// Test fixtures
+const verticalTabNavigation = (
+  <UDExTabNavigation orientation="Vertical" id="verticalTabNav">
+    <UDExTab text="General Settings" selected>
+      <div>
+        <h3>General Settings</h3>
+        <p>Configure your general application preferences and system settings.</p>
+      </div>
+    </UDExTab>
+    <UDExTab text="Account & Privacy">
+      <div>
+        <h3>Account & Privacy</h3>
+        <p>Manage your account information, password, and privacy settings.</p>
+      </div>
+    </UDExTab>
+    <UDExTab text="Notifications">
+      <div>
+        <h3>Notifications</h3>
+        <p>Control how and when you receive notifications from the application.</p>
+      </div>
+    </UDExTab>
+    <UDExTab text="Billing & Plans">
+      <div>
+        <h3>Billing & Plans</h3>
+        <p>View your current plan, billing information, and upgrade options.</p>
+      </div>
+    </UDExTab>
+    <UDExTab text="Help & Support">
+      <div>
+        <h3>Help & Support</h3>
+        <p>Access documentation, FAQs, and contact support team.</p>
+      </div>
+    </UDExTab>
+  </UDExTabNavigation>
+);
+
+const horizontalTabNavigation = (
+  <UDExTabNavigation orientation="Horizontal" id="horizontalTabNav">
+    <UDExTab text="Tab 1" selected>
+      <div><p>Content 1</p></div>
+    </UDExTab>
+    <UDExTab text="Tab 2">
+      <div><p>Content 2</p></div>
+    </UDExTab>
+    <UDExTab text="Tab 3">
+      <div><p>Content 3</p></div>
+    </UDExTab>
+  </UDExTabNavigation>
+);
+
+// Standard horizontal tabs with 5 tabs and badge (matching WebDriver tests)
+const standardTabNavigation = (
+  <UDExTabNavigation orientation="Horizontal" id="standard-tab-navigation">
+    <UDExTab text="Tab Text 1" numberBadge="72" selected slot="default-1">
+      <div>Tab Content 1</div>
+    </UDExTab>
+    <UDExTab text="Tab Text 2" slot="default-2">
+      <div>Tab Content 2</div>
+    </UDExTab>
+    <UDExTab text="Tab Text 3" slot="default-3">
+      <div>Tab Content 3</div>
+    </UDExTab>
+    <UDExTab text="Tab Text 4" slot="default-4">
+      <div>Tab Content 4</div>
+    </UDExTab>
+    <UDExTab text="Tab Text 5" slot="default-5">
+      <div>Tab Content 5</div>
+    </UDExTab>
+  </UDExTabNavigation>
+);
+
+describe("Tab Navigation component", () => {
+  describe("Standard Horizontal Tabs - Rendering", () => {
+    beforeEach(() => {
+      cy.mount(standardTabNavigation);
+    });
+
+    it("should correctly render", () => {
+      cy.get("#standard-tab-navigation")
+        .shadow()
+        .find(".udex-tab-navigation__root")
+        .should("exist");
+    });
+
+    it("the component has 5 tabs", () => {
+      cy.get("#standard-tab-navigation")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab")
+        .should("have.length", 5);
+    });
+
+    it("the component has contents of tabs", () => {
+      cy.get("#standard-tab-navigation")
+        .shadow()
+        .find("slot")
+        .should("have.length", 5);
+    });
+
+    it("the component has badge", () => {
+      cy.get("#standard-tab-navigation")
+        .shadow()
+        .find("udex-badge")
+        .should("exist");
+    });
+
+    it("the first tab should be selected", () => {
+      cy.get("#standard-tab-navigation")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab--active")
+        .invoke("text")
+        .should("match", /Tab Text 1[\s\n]*72/);
+    });
+
+    it("the content of the first tab should be displayed", () => {
+      cy.get("#standard-tab-navigation")
+        .find("udex-tab[selected][slot='default-1']")
+        .should("contain.text", "Tab Content 1");
+    });
+  });
+
+  describe("Standard Horizontal Tabs - Tab Selection", () => {
+    beforeEach(() => {
+      cy.mount(standardTabNavigation);
+    });
+
+    it("should change the selected tab", () => {
+      cy.get("#standard-tab-navigation")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab--active")
+        .invoke("text")
+        .should("match", /Tab Text 1[\s\n]*72/);
+
+      cy.get("#standard-tab-navigation")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab:nth-child(2)")
+        .click();
+
+      cy.get("#standard-tab-navigation")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab--active")
+        .should("contain.text", "Tab Text 2");
+    });
+
+    it("should display the content of the third tab", () => {
+      cy.get("#standard-tab-navigation")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab:nth-child(3)")
+        .click();
+
+      cy.get("#standard-tab-navigation")
+        .shadow()
+        .find(".udex-tab-navigation__button-tab--active")
+        .should("contain.text", "Tab Text 3");
+
+      cy.get("#standard-tab-navigation")
+        .find("udex-tab[selected][slot='default-3']")
+        .should("contain.text", "Tab Content 3");
+    });
+  });
+
+  /**
+   * NOTE: Overflow behavior tests are skipped in Cypress component testing
+   * because the TabNavigation overflow calculation depends on accurate DOM measurements
+   * that don't work reliably in the component test environment. The overflow logic
+   * triggers when tab widths exceed the container width, but in isolated component tests
+   * the dimensions aren't calculated the same way as in a full page context.
+   * 
+   * The original WebDriver.io tests (TabNavigation.spec.js) that run in full page context
+   * successfully test the overflow behavior including:
+   * - More button visibility
+   * - Dropdown opening/closing
+   * - Keyboard navigation in dropdown (Arrow keys, Home, End, Enter, Escape, Tab, Shift+Tab)
+   * 
+   * These tests remain in the WebDriver.io suite and provide coverage for overflow functionality.
+   */
+  describe.skip("Horizontal Tabs - Overflow Behavior (tested in WebDriver.io)", () => {
+    // Tests skipped - see note above
+  });
+
+  describe.skip("Overflow Tabs - Accessibility Keyboard Navigation (tested in WebDriver.io)", () => {
+    // Tests skipped - see note above
+  });
+
+  describe("TabNavigation - Vertical Tabs", () => {
+    beforeEach(() => {
+      cy.mount(verticalTabNavigation);
+    });
+
+    describe("Rendering", () => {
+      it("renders with correct orientation and structure", () => {
+        cy.get("[udex-tab-navigation]")
+          .should("have.attr", "orientation", "Vertical")
+          .shadow()
+          .find(".udex-tab-navigation__root")
+          .should("be.visible");
+        
+        // All tabs should be visible without overflow
+        cy.get("[udex-tab-navigation]")
+          .find("udex-tab")
+          .should("have.length", 5);
+        
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .should("have.length", 5)
+          .each($tab => {
+            cy.wrap($tab).should("be.visible");
+          });
+      });
+
+      it("does not show More button in vertical mode", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__button-more")
+          .should("not.be.visible");
+      });
+
+      it("displays selected tab and content correctly", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "General Settings");
+        
+        cy.get("[udex-tab-navigation]")
+          .find("udex-tab[selected]")
+          .find("h3")
+          .should("contain.text", "General Settings");
+      });
+    });
+
+    describe("Tab Selection", () => {
+      it("switches tabs and updates content on click", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .click();
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Notifications");
+        
+        cy.get("[udex-tab-navigation]")
+          .find("udex-tab[selected]")
+          .find("h3")
+          .should("contain.text", "Notifications");
+      });
+
+      it("emits tab-select event on tab change", () => {
+        const tabSelectHandler = cy.stub().as("tabSelect");
+        
+        cy.mount(
+          <UDExTabNavigation orientation="Vertical" onTabSelect={tabSelectHandler}>
+            <UDExTab text="Tab 1" selected>
+              <div>Content 1</div>
+            </UDExTab>
+            <UDExTab text="Tab 2">
+              <div>Content 2</div>
+            </UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .click();
+
+        cy.get("@tabSelect").should("have.been.called");
+      });
+    });
+
+    describe("Vertical Keyboard Navigation", () => {
+      it("navigates to next tab with ArrowDown key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowDown");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("be.focused");
+      });
+
+      it("navigates to previous tab with ArrowUp key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .focus()
+          .realPress("ArrowUp");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("be.focused");
+      });
+
+      it("wraps to first tab when pressing ArrowDown on last tab", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(4)
+          .focus()
+          .realPress("ArrowDown");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("be.focused");
+      });
+
+      it("wraps to last tab when pressing ArrowUp on first tab", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowUp");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(4)
+          .should("be.focused");
+      });
+
+      it("does not respond to ArrowLeft key in vertical mode", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .focus()
+          .realPress("ArrowLeft");
+
+        // Focus should remain on the same tab
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("be.focused");
+      });
+
+      it("does not respond to ArrowRight key in vertical mode", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .focus()
+          .realPress("ArrowRight");
+
+        // Focus should remain on the same tab
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("be.focused");
+      });
+
+      it("focuses first tab with Home key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(3)
+          .focus()
+          .realPress("Home");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("be.focused");
+      });
+
+      it("focuses last tab with End key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("End");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(4)
+          .should("be.focused");
+      });
+
+      it("activates tab with Enter key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .focus()
+          .realPress("Enter");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("have.attr", "aria-selected", "true");
+      });
+
+      it("activates tab with Space key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(3)
+          .focus()
+          .realPress("Space");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(3)
+          .should("have.attr", "aria-selected", "true");
+      });
+    });
+  });
+
+  describe("TabNavigation - Horizontal Tabs", () => {
+    beforeEach(() => {
+      cy.mount(horizontalTabNavigation);
+    });
+
+    describe("Rendering", () => {
+      it("renders with correct orientation and structure", () => {
+        cy.get("[udex-tab-navigation]")
+          .should("have.attr", "orientation", "Horizontal")
+          .shadow()
+          .find(".udex-tab-navigation__root")
+          .should("be.visible");
+        
+        cy.get("[udex-tab-navigation]")
+          .find("udex-tab")
+          .should("have.length", 3);
+        
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .should("have.length", 3);
+      });
+
+      it("displays selected tab and content correctly", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 1");
+        
+        cy.get("[udex-tab-navigation]")
+          .find("udex-tab[selected]")
+          .find("p")
+          .should("contain.text", "Content 1");
+      });
+    });
+
+    describe("Tab Selection", () => {
+      it("switches tabs and updates content on click", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .click();
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 3");
+        
+        cy.get("[udex-tab-navigation]")
+          .find("udex-tab[selected]")
+          .find("p")
+          .should("contain.text", "Content 3");
+      });
+    });
+
+    describe("Horizontal Keyboard Navigation", () => {
+      it("navigates to next tab with ArrowRight key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowRight");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("be.focused");
+      });
+
+      it("navigates to previous tab with ArrowLeft key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .focus()
+          .realPress("ArrowLeft");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("be.focused");
+      });
+
+      it("wraps to first tab when pressing ArrowRight on last tab", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .focus()
+          .realPress("ArrowRight");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("be.focused");
+      });
+
+      it("wraps to last tab when pressing ArrowLeft on first tab", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowLeft");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("be.focused");
+      });
+
+      it("does not respond to ArrowUp key in horizontal mode", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .focus()
+          .realPress("ArrowUp");
+
+        // Focus should remain on the same tab
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("be.focused");
+      });
+
+      it("does not respond to ArrowDown key in horizontal mode", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .focus()
+          .realPress("ArrowDown");
+
+        // Focus should remain on the same tab
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("be.focused");
+      });
+
+      it("focuses first tab with Home key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .focus()
+          .realPress("Home");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("be.focused");
+      });
+
+      it("focuses last tab with End key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("End");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("be.focused");
+      });
+
+      it("activates tab with Enter key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .focus()
+          .realPress("Enter");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("have.attr", "aria-selected", "true");
+      });
+
+      it("activates tab with Space key", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .focus()
+          .realPress("Space");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("have.attr", "aria-selected", "true");
+      });
+    });
+
+    describe("Accessibility", () => {
+      it("has correct ARIA role on tabs", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .should("have.length.at.least", 1);
+      });
+
+      it("has correct ARIA role on tab list", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("[role='tablist']")
+          .should("exist");
+      });
+
+      it("has correct tabindex on selected tab", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("have.attr", "tabindex", "0");
+      });
+
+      it("has correct tabindex on non-selected tabs", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='false']")
+          .should("have.attr", "tabindex", "-1");
+      });
+
+      it("has aria-controls attribute pointing to tab panel", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .first()
+          .should("have.attr", "aria-controls");
+      });
+
+      it("updates aria-selected when tabs change", () => {
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .click();
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("have.attr", "aria-selected", "true");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("have.attr", "aria-selected", "false");
+      });
+    });
+  });
+
+  describe("TabNavigation - Body Text and Link Slot Features", () => {
+    describe("Horizontal tabs with bodyText", () => {
+      it("does NOT show body text in header for horizontal tabs", () => {
+        cy.mount(
+          <UDExTabNavigation orientation="Horizontal">
+            <UDExTab text="Settings" bodyText="Configure your preferences" selected>
+              <div>Settings content</div>
+            </UDExTab>
+            <UDExTab text="Account" bodyText="Manage your account">
+              <div>Account content</div>
+            </UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Body text should NOT be visible in the header for horizontal tabs
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__button-body-text")
+          .should("not.exist");
+
+        // Wrapper should NOT be used for horizontal tabs
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__tab-wrapper")
+          .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
+        cy.mount(
+          <UDExTabNavigation orientation="Horizontal">
+            <UDExTab text="Settings" bodyText="Configure your preferences" selected>
+              <div>Settings content</div>
+            </UDExTab>
+            <UDExTab text="Account" bodyText="Manage your account">
+              <div>Account content</div>
+            </UDExTab>
+          </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()
+          .find(".udex-tab-navigation__tab-wrapper")
+          .should("not.exist");
+      });
+
+      it("renders all tabs visible in horizontal mode with bodyText", () => {
+        cy.mount(
+          <UDExTabNavigation orientation="Horizontal">
+            <UDExTab text="Tab 1" bodyText="Description 1" selected>
+              <div>Content 1</div>
+            </UDExTab>
+            <UDExTab text="Tab 2" bodyText="Description 2">
+              <div>Content 2</div>
+            </UDExTab>
+            <UDExTab text="Tab 3" bodyText="Description 3">
+              <div>Content 3</div>
+            </UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // All tabs should be visible
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .should("have.length", 3)
+          .each($tab => {
+            cy.wrap($tab).should("be.visible");
+          });
+      });
+    });
+
+    describe("Vertical tabs with bodyText and link slot", () => {
+      it("shows body text in header for selected vertical tab", () => {
+        cy.mount(
+          <UDExTabNavigation orientation="Vertical">
+            <UDExTab text="Settings" bodyText="Configure your preferences" selected>
+              <div>Settings content</div>
+            </UDExTab>
+            <UDExTab text="Account" bodyText="Manage your account">
+              <div>Account content</div>
+            </UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Wrapper should be used for vertical tabs with body text
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__tab-wrapper")
+          .should("have.length", 2);
+
+        // Body text element should exist
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__button-body-text")
+          .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">
+            <UDExTab 
+              text="Settings" 
+              bodyText="Configure your preferences" 
+              selected
+            >
+              <div>Settings content</div>
+            </UDExTab>
+            <UDExTab 
+              text="Account" 
+              bodyText="Manage your account"
+            >
+              <div>Account content</div>
+            </UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Body text elements should exist and contain correct text
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__button-body-text")
+          .should("have.length", 2);
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__button-body-text")
+          .eq(0)
+          .should("contain.text", "Configure your preferences");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__button-body-text")
+          .eq(1)
+          .should("contain.text", "Manage your account");
+      });
+
+      it("does NOT use wrapper for vertical tabs without bodyText or link", () => {
+        cy.mount(
+          <UDExTabNavigation orientation="Vertical">
+            <UDExTab text="Settings" selected>
+              <div>Settings content</div>
+            </UDExTab>
+            <UDExTab text="Account">
+              <div>Account content</div>
+            </UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Wrapper should NOT be used when there's no body text or link
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find(".udex-tab-navigation__tab-wrapper")
+          .should("not.exist");
+
+        // Tabs should be rendered directly as buttons
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .should("have.length", 2);
+      });
+    });
+  });
+
+  describe("TabNavigation - Additional Features", () => {
+    it("applies tabWidth property to vertical tabs", () => {
+      cy.mount(
+        <UDExTabNavigation orientation="Vertical" tabWidth="300px">
+          <UDExTab text="Settings" selected>
+            <div>Settings content</div>
+          </UDExTab>
+          <UDExTab text="Account">
+            <div>Account content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .should("have.css", "--udex-tab-header-width", "300px");
+    });
+
+    it("applies tabWidth property with different units to vertical tabs", () => {
+      cy.mount(
+        <UDExTabNavigation orientation="Vertical" tabWidth="20rem">
+          <UDExTab text="Settings" selected>
+            <div>Settings content</div>
+          </UDExTab>
+          <UDExTab text="Account">
+            <div>Account content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .should("have.css", "--udex-tab-header-width", "20rem");
+    });
+
+    it("uses default width when tabWidth is auto for vertical tabs", () => {
+      cy.mount(
+        <UDExTabNavigation orientation="Vertical" tabWidth="auto">
+          <UDExTab text="Settings" selected>
+            <div>Settings content</div>
+          </UDExTab>
+          <UDExTab text="Account">
+            <div>Account content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      // When tabWidth is "auto", the CSS variable should not be set
+      // The style attribute may be undefined or not contain the CSS variable
+      cy.get("[udex-tab-navigation]")
+        .then($el => {
+          const style = $el.attr("style") || "";
+          expect(style).to.not.contain("--udex-tab-header-width");
+        });
+    });
+
+    it("renders tabs with body text in vertical mode", () => {
+      cy.mount(
+        <UDExTabNavigation orientation="Vertical">
+          <UDExTab text="Settings" bodyText="Configure your preferences" selected>
+            <div>Settings content</div>
+          </UDExTab>
+          <UDExTab text="Account" bodyText="Manage your account">
+            <div>Account content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab']")
+        .first()
+        .should("be.visible");
+    });
+
+    it("renders tabs with number badges in vertical mode", () => {
+      cy.mount(
+        <UDExTabNavigation orientation="Vertical">
+          <UDExTab text="Messages" numberBadge="5" selected>
+            <div>Messages content</div>
+          </UDExTab>
+          <UDExTab text="Notifications" numberBadge="12">
+            <div>Notifications content</div>
+          </UDExTab>
+        </UDExTabNavigation>
+      );
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab']")
+        .should("have.length", 2);
+    });
+
+    it("handles tab selection in vertical mode with many tabs", () => {
+      const manyTabs = Array.from({ length: 10 }, (_, i) => (
+        <UDExTab text={`Tab ${i + 1}`} selected={i === 0}>
+          <div>Content {i + 1}</div>
+        </UDExTab>
+      ));
+
+      cy.mount(
+        <UDExTabNavigation orientation="Vertical">
+          {manyTabs}
+        </UDExTabNavigation>
+      );
+
+      // All tabs should be visible (no overflow)
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab']")
+        .should("have.length", 10);
+
+      // Click on last tab
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab']")
+        .eq(9)
+        .click();
+
+      cy.get("[udex-tab-navigation]")
+        .shadow()
+        .find("button[role='tab'][aria-selected='true']")
+        .should("contain.text", "Tab 10");
+    });
+  });
+});