test: add data-active and theme inheritance assertions

Author: fyalavuz

packages/react/__tests__/Footer.test.tsx

@@ -36,6 +36,7 @@ describe("Footer", () => {
       renderFooter({ variant: "tab-bar" });
       const homeButton = screen.getByText("Home").closest("button");
       expect(homeButton?.className).toContain("text-primary");
+      expect(homeButton).toHaveAttribute("data-active", "true");
     });
   });
 

packages/react/__tests__/Header.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
 import { Header } from "../src/Header";
+import { HeaderNav, HeaderNavItem } from "../src/HeaderNav";
 import { AppShellProvider } from "../src/context";
 
 function renderHeader(props: Record<string, any> = {}) {
@@ -81,4 +82,34 @@ describe("Header", () => {
       expect(header?.className).toContain("sticky");
     });
   });
+
+  describe("theme inheritance", () => {
+    it("passes primary theme to HeaderNavItem", () => {
+      renderHeader({
+        theme: "primary",
+        nav: (
+          <HeaderNav>
+            <HeaderNavItem label="Home" active />
+          </HeaderNav>
+        ),
+      });
+      const navItem = screen.getByRole("button", { name: "Home" });
+      // Primary theme active item should have bg-white/20
+      expect(navItem.className).toContain("bg-white/20");
+    });
+
+    it("passes dark theme to HeaderNavItem", () => {
+      renderHeader({
+        theme: "dark",
+        nav: (
+          <HeaderNav>
+            <HeaderNavItem label="Home" active />
+          </HeaderNav>
+        ),
+      });
+      const navItem = screen.getByRole("button", { name: "Home" });
+      // Dark theme active item should have bg-white/10
+      expect(navItem.className).toContain("bg-white/10");
+    });
+  });
 });

packages/react/__tests__/ScrollNav.test.tsx

@@ -53,6 +53,7 @@ describe("ScrollNavItem", () => {
     const button = screen.getByRole("button", { name: "Active Tab" });
     expect(button.className).toContain("bg-foreground");
     expect(button.className).toContain("text-background");
+    expect(button).toHaveAttribute("data-active", "true");
   });
 
   it("applies inactive styles", () => {