@etus/ui 0.1.0

package/src/components/navigation/DropdownMenu/DropdownMenu.test.tsx

@@ -0,0 +1,881 @@
+// DropdownMenu/DropdownMenu.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it, vi } from "vitest"
+
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./DropdownMenu"
+
+expect.extend(toHaveNoViolations)
+
+// Helper to open dropdown menu
+async function openDropdownMenu(trigger: HTMLElement) {
+  const user = userEvent.setup()
+  await user.click(trigger)
+}
+
+// ============================================
+// DROPDOWN MENU ROOT TESTS
+// ============================================
+describe("DropdownMenu", () => {
+  it("renders trigger element", () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">
+          Open Menu
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Action</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+    expect(screen.getByTestId("trigger")).toBeInTheDocument()
+    expect(screen.getByText("Open Menu")).toBeInTheDocument()
+  })
+
+  it("trigger has data-slot attribute", () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Action</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+    expect(screen.getByTestId("trigger")).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-trigger"
+    )
+  })
+
+  it("opens menu on click", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Action</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    const trigger = screen.getByTestId("trigger")
+    await openDropdownMenu(trigger)
+
+    expect(screen.getByText("Action")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// DROPDOWN MENU CONTENT TESTS
+// ============================================
+describe("DropdownMenuContent", () => {
+  it("has data-slot attribute when open", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent data-testid="content">
+          <DropdownMenuItem>Action</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("content")).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-content"
+    )
+  })
+
+  it("applies custom className", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent className="custom-class" data-testid="content">
+          <DropdownMenuItem>Action</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("content")).toHaveClass("custom-class")
+  })
+
+  it("applies base styles", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent data-testid="content">
+          <DropdownMenuItem>Action</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    const content = screen.getByTestId("content")
+    expect(content).toHaveClass("bg-popover")
+    expect(content).toHaveClass("text-popover-foreground")
+    expect(content).toHaveClass("rounded-[var(--dropdown-menu-content-radius)]")
+    expect(content).toHaveClass("border-[var(--dropdown-menu-content-border-width)]")
+  })
+})
+
+// ============================================
+// DROPDOWN MENU ITEM TESTS
+// ============================================
+describe("DropdownMenuItem", () => {
+  it("renders with text content", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("Edit")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem data-testid="item">Edit</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("item")).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-item"
+    )
+  })
+
+  it("applies inset data attribute", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem inset data-testid="item">
+            Inset Item
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("item")).toHaveAttribute("data-inset", "true")
+  })
+
+  it("applies inset styles when inset prop is true", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem inset data-testid="item">
+            Inset Item
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("item")).toHaveClass("pl-[var(--dropdown-menu-item-inset-padding-left)]")
+  })
+
+  it("applies default variant", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem data-testid="item">Edit</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("item")).toHaveAttribute("data-variant", "default")
+  })
+
+  it("applies destructive variant", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem data-testid="item" variant="destructive">
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    const item = screen.getByTestId("item")
+    expect(item).toHaveAttribute("data-variant", "destructive")
+    expect(item).toHaveClass("text-destructive")
+  })
+
+  it("applies custom className", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem className="custom-class" data-testid="item">
+            Edit
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("item")).toHaveClass("custom-class")
+  })
+
+  it("calls onSelect when clicked", async () => {
+    const handleSelect = vi.fn()
+    const user = userEvent.setup()
+
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem onSelect={handleSelect}>Edit</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+    await user.click(screen.getByText("Edit"))
+
+    expect(handleSelect).toHaveBeenCalled()
+  })
+})
+
+// ============================================
+// DROPDOWN MENU CHECKBOX ITEM TESTS
+// ============================================
+describe("DropdownMenuCheckboxItem", () => {
+  it("renders with text content", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuCheckboxItem>Show Hidden</DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("Show Hidden")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuCheckboxItem data-testid="checkbox">
+            Option
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("checkbox")).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-checkbox-item"
+    )
+  })
+
+  it("renders with checked state", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuCheckboxItem checked data-testid="checkbox">
+            Checked Option
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("checkbox")).toHaveAttribute("data-state", "checked")
+  })
+
+  it("applies custom className", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuCheckboxItem className="custom-class" data-testid="checkbox">
+            Option
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("checkbox")).toHaveClass("custom-class")
+  })
+})
+
+// ============================================
+// DROPDOWN MENU RADIO GROUP TESTS
+// ============================================
+describe("DropdownMenuRadioGroup and DropdownMenuRadioItem", () => {
+  it("renders radio items", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuRadioGroup value="option1">
+            <DropdownMenuRadioItem value="option1">Option 1</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="option2">Option 2</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("Option 1")).toBeInTheDocument()
+    expect(screen.getByText("Option 2")).toBeInTheDocument()
+  })
+
+  it("radio item has data-slot attribute", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuRadioGroup value="option1">
+            <DropdownMenuRadioItem data-testid="radio" value="option1">
+              Option
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("radio")).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-radio-item"
+    )
+  })
+
+  it("marks selected item as checked", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuRadioGroup value="option1">
+            <DropdownMenuRadioItem data-testid="radio1" value="option1">
+              Option 1
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem data-testid="radio2" value="option2">
+              Option 2
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("radio1")).toHaveAttribute("data-state", "checked")
+    expect(screen.getByTestId("radio2")).toHaveAttribute("data-state", "unchecked")
+  })
+})
+
+// ============================================
+// DROPDOWN MENU LABEL TESTS
+// ============================================
+describe("DropdownMenuLabel", () => {
+  it("renders label text", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("My Account")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel data-testid="label">Label</DropdownMenuLabel>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("label")).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-label"
+    )
+  })
+
+  it("applies inset styles when inset prop is true", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel inset data-testid="label">
+            Inset Label
+          </DropdownMenuLabel>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("label")).toHaveClass("pl-[var(--dropdown-menu-item-inset-padding-left)]")
+  })
+
+  it("applies font-medium style", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel data-testid="label">Label</DropdownMenuLabel>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("label")).toHaveClass("font-medium")
+  })
+})
+
+// ============================================
+// DROPDOWN MENU SEPARATOR TESTS
+// ============================================
+describe("DropdownMenuSeparator", () => {
+  it("renders separator", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+          <DropdownMenuSeparator data-testid="separator" />
+          <DropdownMenuItem>Item 2</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("separator")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSeparator data-testid="separator" />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("separator")).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-separator"
+    )
+  })
+
+  it("applies separator styles", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSeparator data-testid="separator" />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    const separator = screen.getByTestId("separator")
+    expect(separator).toHaveClass("bg-border")
+    expect(separator).toHaveClass("h-[var(--dropdown-menu-separator-height)]")
+  })
+})
+
+// ============================================
+// DROPDOWN MENU SHORTCUT TESTS
+// ============================================
+describe("DropdownMenuShortcut", () => {
+  it("renders shortcut text", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>
+            Copy
+            <DropdownMenuShortcut>Cmd+C</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("Cmd+C")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>
+            Copy
+            <DropdownMenuShortcut data-testid="shortcut">Cmd+C</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("shortcut")).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-shortcut"
+    )
+  })
+
+  it("applies shortcut styles", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>
+            Copy
+            <DropdownMenuShortcut data-testid="shortcut">Cmd+C</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    const shortcut = screen.getByTestId("shortcut")
+    expect(shortcut).toHaveClass("text-muted-foreground")
+    expect(shortcut).toHaveClass("ml-auto")
+    expect(shortcut).toHaveClass("text-[length:var(--dropdown-menu-shortcut-text-size)]")
+    expect(shortcut).toHaveClass("tracking-widest")
+  })
+})
+
+// ============================================
+// DROPDOWN MENU GROUP TESTS
+// ============================================
+describe("DropdownMenuGroup", () => {
+  it("groups items together", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuGroup data-testid="group">
+            <DropdownMenuItem>Item 1</DropdownMenuItem>
+            <DropdownMenuItem>Item 2</DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    const group = screen.getByTestId("group")
+    expect(group).toBeInTheDocument()
+    expect(group).toHaveAttribute("data-slot", "dropdown-menu-group")
+  })
+})
+
+// ============================================
+// DROPDOWN MENU SUB TESTS
+// ============================================
+describe("DropdownMenuSub", () => {
+  it("renders sub trigger", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger data-testid="sub-trigger">
+              More Options
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>Sub Item</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("sub-trigger")).toBeInTheDocument()
+  })
+
+  it("sub trigger has data-slot attribute", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger data-testid="sub-trigger">
+              More
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>Sub Item</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("sub-trigger")).toHaveAttribute(
+      "data-slot",
+      "dropdown-menu-sub-trigger"
+    )
+  })
+
+  it("sub trigger applies inset styles", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger inset data-testid="sub-trigger">
+              More
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>Sub Item</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("sub-trigger")).toHaveClass("pl-[var(--dropdown-menu-item-inset-padding-left)]")
+  })
+
+  it("sub trigger contains chevron icon", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger data-testid="sub-trigger">
+              More
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>Sub Item</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    const subTrigger = screen.getByTestId("sub-trigger")
+    expect(subTrigger.querySelector("svg")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// COMPLETE DROPDOWN MENU TESTS
+// ============================================
+describe("Complete DropdownMenu", () => {
+  it("renders a complete dropdown menu structure", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">
+          Open Menu
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>My Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              Profile
+              <DropdownMenuShortcut>Cmd+P</DropdownMenuShortcut>
+            </DropdownMenuItem>
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem checked>Show Toolbar</DropdownMenuCheckboxItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>Submenu Item</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("My Account")).toBeInTheDocument()
+    expect(screen.getByText("Profile")).toBeInTheDocument()
+    expect(screen.getByText("Settings")).toBeInTheDocument()
+    expect(screen.getByText("Cmd+P")).toBeInTheDocument()
+    expect(screen.getByText("Show Toolbar")).toBeInTheDocument()
+    expect(screen.getByText("More Options")).toBeInTheDocument()
+    expect(screen.getByText("Delete")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// ACCESSIBILITY TESTS
+// ============================================
+describe("Accessibility", () => {
+  it("has no accessibility violations when closed", async () => {
+    const { container } = render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no accessibility violations when open", async () => {
+    const { container } = render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">
+          Open Menu
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Account</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with checkbox items", async () => {
+    const { container } = render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuCheckboxItem checked>Option 1</DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem>Option 2</DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with radio items", async () => {
+    const { container } = render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuRadioGroup value="option1">
+            <DropdownMenuRadioItem value="option1">Option 1</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="option2">Option 2</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with destructive items", async () => {
+    const { container } = render(
+      <DropdownMenu>
+        <DropdownMenuTrigger data-testid="trigger">Trigger</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+
+    await openDropdownMenu(screen.getByTestId("trigger"))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})