@etus/ui 0.1.0

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

@@ -0,0 +1,721 @@
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+// Drawer/Drawer.test.tsx
+import * as React from "react"
+import { describe, expect, it } from "vitest"
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./Drawer"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// DRAWER ROOT TESTS
+// ============================================
+describe("Drawer", () => {
+  it("renders trigger element", () => {
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open Drawer</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+    expect(screen.getByTestId("trigger")).toBeInTheDocument()
+    expect(screen.getByText("Open Drawer")).toBeInTheDocument()
+  })
+
+  it("trigger has data-slot attribute", () => {
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Trigger</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+    expect(screen.getByTestId("trigger")).toHaveAttribute(
+      "data-slot",
+      "drawer-trigger"
+    )
+  })
+
+  it("opens drawer on trigger click", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Drawer Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("Drawer Title")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// DRAWER CONTENT TESTS
+// ============================================
+describe("DrawerContent", () => {
+  it("has data-slot attribute when open", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent data-testid="content">
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("content")).toHaveAttribute(
+      "data-slot",
+      "drawer-content"
+    )
+  })
+
+  it("applies custom className", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent className="custom-class" data-testid="content">
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("content")).toHaveClass("custom-class")
+  })
+
+  it("applies base styles", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent data-testid="content">
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    const content = screen.getByTestId("content")
+    expect(content).toHaveClass("bg-[color:var(--drawer-content-bg)]")
+    expect(content).toHaveClass("fixed")
+    expect(content).toHaveClass("z-50")
+    expect(content).toHaveClass("flex")
+    expect(content).toHaveClass("flex-col")
+  })
+
+  it("renders children content", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+          <div data-testid="custom-content">Custom Content Here</div>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("custom-content")).toBeInTheDocument()
+    expect(screen.getByText("Custom Content Here")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// DRAWER CLOSE TESTS
+// ============================================
+describe("DrawerClose", () => {
+  it("has data-slot attribute", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+          <DrawerClose data-testid="close">Close</DrawerClose>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("close")).toHaveAttribute(
+      "data-slot",
+      "drawer-close"
+    )
+  })
+
+  it("renders close button", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+          <DrawerClose data-testid="close">Close</DrawerClose>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("close")).toBeInTheDocument()
+    expect(screen.getByText("Close")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// DRAWER HEADER TESTS
+// ============================================
+describe("DrawerHeader", () => {
+  it("renders header content", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader data-testid="header">
+            <DrawerTitle>Header Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("header")).toBeInTheDocument()
+    expect(screen.getByText("Header Title")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader data-testid="header">
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("header")).toHaveAttribute(
+      "data-slot",
+      "drawer-header"
+    )
+  })
+
+  it("applies flex column layout", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader data-testid="header">
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    const header = screen.getByTestId("header")
+    expect(header).toHaveClass("flex")
+    expect(header).toHaveClass("flex-col")
+    expect(header).toHaveClass("p-[var(--drawer-header-padding)]")
+  })
+
+  it("applies custom className", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader className="custom-header" data-testid="header">
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("header")).toHaveClass("custom-header")
+  })
+})
+
+// ============================================
+// DRAWER FOOTER TESTS
+// ============================================
+describe("DrawerFooter", () => {
+  it("renders footer content", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+          <DrawerFooter data-testid="footer">
+            <button>Action</button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("footer")).toBeInTheDocument()
+    expect(screen.getByText("Action")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+          <DrawerFooter data-testid="footer">Footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("footer")).toHaveAttribute(
+      "data-slot",
+      "drawer-footer"
+    )
+  })
+
+  it("applies mt-auto for bottom positioning", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+          <DrawerFooter data-testid="footer">Footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    const footer = screen.getByTestId("footer")
+    expect(footer).toHaveClass("mt-auto")
+    expect(footer).toHaveClass("flex")
+    expect(footer).toHaveClass("flex-col")
+    expect(footer).toHaveClass("gap-[var(--drawer-footer-gap)]")
+    expect(footer).toHaveClass("p-[var(--drawer-footer-padding)]")
+  })
+
+  it("applies custom className", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+          <DrawerFooter className="custom-footer" data-testid="footer">
+            Footer
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("footer")).toHaveClass("custom-footer")
+  })
+})
+
+// ============================================
+// DRAWER TITLE TESTS
+// ============================================
+describe("DrawerTitle", () => {
+  it("renders title text", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>My Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("My Title")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle data-testid="title">Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("title")).toHaveAttribute(
+      "data-slot",
+      "drawer-title"
+    )
+  })
+
+  it("applies font-semibold style", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle data-testid="title">Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("title")).toHaveClass("font-semibold")
+    expect(screen.getByTestId("title")).toHaveClass("text-foreground")
+  })
+
+  it("applies custom className", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle className="custom-title" data-testid="title">
+              Title
+            </DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("title")).toHaveClass("custom-title")
+  })
+})
+
+// ============================================
+// DRAWER DESCRIPTION TESTS
+// ============================================
+describe("DrawerDescription", () => {
+  it("renders description text", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>This is a description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByText("This is a description")).toBeInTheDocument()
+  })
+
+  it("has data-slot attribute", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription data-testid="description">
+              Description
+            </DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("description")).toHaveAttribute(
+      "data-slot",
+      "drawer-description"
+    )
+  })
+
+  it("applies muted text style", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription data-testid="description">
+              Description
+            </DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    const description = screen.getByTestId("description")
+    expect(description).toHaveClass("text-muted-foreground")
+    expect(description).toHaveClass("text-sm")
+  })
+
+  it("applies custom className", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription className="custom-desc" data-testid="description">
+              Description
+            </DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    expect(screen.getByTestId("description")).toHaveClass("custom-desc")
+  })
+})
+
+// ============================================
+// COMPLETE DRAWER TESTS
+// ============================================
+describe("Complete Drawer", () => {
+  it("renders a complete drawer structure", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open Drawer</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Settings</DrawerTitle>
+            <DrawerDescription>
+              Make changes to your preferences
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4">Main content goes here</div>
+          <DrawerFooter>
+            <button>Save changes</button>
+            <DrawerClose>Cancel</DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    // Open drawer
+    await user.click(screen.getByTestId("trigger"))
+
+    // Verify all parts are rendered
+    expect(screen.getByText("Settings")).toBeInTheDocument()
+    expect(screen.getByText("Make changes to your preferences")).toBeInTheDocument()
+    expect(screen.getByText("Main content goes here")).toBeInTheDocument()
+    expect(screen.getByText("Save changes")).toBeInTheDocument()
+    expect(screen.getByText("Cancel")).toBeInTheDocument()
+  })
+})
+
+// ============================================
+// ACCESSIBILITY TESTS
+// ============================================
+describe("Accessibility", () => {
+  it("has no accessibility violations when closed", async () => {
+    const { container } = render(
+      <Drawer>
+        <DrawerTrigger>Open Drawer</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no accessibility violations when open", async () => {
+    const user = userEvent.setup()
+
+    const { container } = render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open Drawer</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4">Content</div>
+          <DrawerFooter>
+            <DrawerClose>Close</DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with complete drawer structure", async () => {
+    const user = userEvent.setup()
+
+    const { container } = render(
+      <Drawer>
+        <DrawerTrigger data-testid="trigger">Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Account Settings</DrawerTitle>
+            <DrawerDescription>
+              Update your account preferences here.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4">
+            <label htmlFor="name">Name</label>
+            <input id="name" type="text" />
+          </div>
+          <DrawerFooter>
+            <button type="submit">Save</button>
+            <DrawerClose>Cancel</DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    )
+
+    await user.click(screen.getByTestId("trigger"))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})