@etus/ui 0.1.0

package/src/components/forms/DatePicker/DatePicker.test.tsx

@@ -0,0 +1,1181 @@
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+// DatePicker/DatePicker.test.tsx
+import * as React from "react"
+import { beforeAll, describe, expect, it, vi } from "vitest"
+
+import { DatePicker } from "./DatePicker"
+
+expect.extend(toHaveNoViolations)
+
+// Mock pointer capture methods for JSDOM (Radix Popover uses them)
+beforeAll(() => {
+  Element.prototype.hasPointerCapture = vi.fn(() => false)
+  Element.prototype.setPointerCapture = vi.fn()
+  Element.prototype.releasePointerCapture = vi.fn()
+})
+
+// Helper to open the date picker using keyboard
+async function openDatePicker(user: ReturnType<typeof userEvent.setup>) {
+  const trigger = screen.getByRole("combobox")
+  await user.click(trigger)
+}
+
+// Helper to find a day button in the calendar
+function findDayButton(container: HTMLElement, day: number): HTMLElement | null {
+  const buttons = container.querySelectorAll('button[data-day]')
+  for (const button of buttons) {
+    const dateStr = button.getAttribute('data-day')
+    if (dateStr && new Date(dateStr).getDate() === day) {
+      return button as HTMLElement
+    }
+  }
+  return null
+}
+
+// Test dates
+const testDate = new Date(2024, 0, 15) // January 15, 2024
+const minDate = new Date(2024, 0, 10) // January 10, 2024
+const maxDate = new Date(2024, 0, 20) // January 20, 2024
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("DatePicker", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<DatePicker aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(<DatePicker aria-label="Select date" className="custom-class" />)
+      const wrapper = screen.getByRole("combobox").closest('[data-slot="date-picker"]')
+      expect(wrapper).toHaveClass("custom-class")
+    })
+
+    it("renders with placeholder", () => {
+      render(<DatePicker aria-label="Select date" placeholder="Pick a date" />)
+      expect(screen.getByText("Pick a date")).toBeInTheDocument()
+    })
+
+    it("renders with default value", () => {
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("January 15")
+    })
+
+    it("renders with controlled value", () => {
+      render(<DatePicker aria-label="Select date" value={testDate} onChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("January 15")
+    })
+
+    it("has data-slot attribute on wrapper", () => {
+      render(<DatePicker aria-label="Select date" />)
+      const wrapper = screen.getByRole("combobox").closest('[data-slot="date-picker"]')
+      expect(wrapper).toHaveAttribute("data-slot", "date-picker")
+    })
+
+    it("has data-slot attribute on trigger", () => {
+      render(<DatePicker aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "date-picker-trigger")
+    })
+
+    it("renders calendar icon", () => {
+      render(<DatePicker aria-label="Select date" />)
+      const trigger = screen.getByRole("combobox")
+      expect(trigger.querySelector("svg")).toBeInTheDocument()
+    })
+
+    it("renders with custom format", () => {
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} format="MM/dd/yyyy" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("01/15/2024")
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state", () => {
+      render(<DatePicker disabled aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toBeDisabled()
+    })
+
+    it("applies disabled styling", () => {
+      render(<DatePicker disabled aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveClass("disabled:opacity-50")
+    })
+
+    it("handles aria-invalid state", () => {
+      render(<DatePicker invalid aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-invalid", "true")
+    })
+
+    it("handles required state", () => {
+      render(<DatePicker required aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-required", "true")
+    })
+
+    it("shows placeholder when no value selected", () => {
+      render(<DatePicker aria-label="Select date" placeholder="Choose date" />)
+      expect(screen.getByText("Choose date")).toBeInTheDocument()
+    })
+
+    it("shows selected date instead of placeholder", () => {
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} placeholder="Choose date" />)
+      expect(screen.queryByText("Choose date")).not.toBeInTheDocument()
+      expect(screen.getByRole("combobox")).toHaveTextContent("January 15")
+    })
+
+    it("applies muted color when no date selected", () => {
+      render(<DatePicker aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveClass("text-muted-foreground")
+    })
+
+    it("removes muted color when date is selected", () => {
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} />)
+      expect(screen.getByRole("combobox")).not.toHaveClass("text-muted-foreground")
+    })
+  })
+
+  // ============================================
+  // SELECTION TESTS
+  // ============================================
+  describe("Selection", () => {
+    it("opens calendar when trigger is clicked", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("shows calendar when opened", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        const dialog = screen.getByRole("dialog")
+        expect(dialog.querySelector('[data-slot="calendar"]')).toBeInTheDocument()
+      })
+    })
+
+    it("closes calendar after date selection", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      // Find and click day 20
+      const dialog = screen.getByRole("dialog")
+      const day20Button = findDayButton(dialog, 20)
+      expect(day20Button).toBeInTheDocument()
+      await user.click(day20Button as Element)
+
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================
+  // EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onChange when date is selected", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} onChange={handleChange} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const day20Button = findDayButton(dialog, 20)
+      expect(day20Button).not.toBeNull()
+      await user.click(day20Button as Element)
+
+      expect(handleChange).toHaveBeenCalled()
+      expect(handleChange.mock.calls[0]?.[0]).toBeInstanceOf(Date)
+    })
+
+    it("calls onOpenChange when calendar opens", async () => {
+      const user = userEvent.setup()
+      const handleOpenChange = vi.fn()
+      render(<DatePicker aria-label="Select date" onOpenChange={handleOpenChange} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(handleOpenChange).toHaveBeenCalledWith(true)
+      })
+    })
+
+    it("calls onOpenChange when calendar closes", async () => {
+      const user = userEvent.setup()
+      const handleOpenChange = vi.fn()
+      render(<DatePicker aria-label="Select date" onOpenChange={handleOpenChange} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.keyboard("{Escape}")
+
+      await waitFor(() => {
+        expect(handleOpenChange).toHaveBeenCalledWith(false)
+      })
+    })
+
+    it("does not open when disabled", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker disabled aria-label="Select date" />)
+
+      const trigger = screen.getByRole("combobox")
+      await user.click(trigger)
+
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(<DatePicker aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--date-picker-trigger-height-md)]")
+    })
+
+    it("applies sm size", () => {
+      render(<DatePicker aria-label="Select date" size="sm" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--date-picker-trigger-height-sm)]")
+    })
+
+    it("applies md size", () => {
+      render(<DatePicker aria-label="Select date" size="md" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--date-picker-trigger-height-md)]")
+    })
+
+    it("applies lg size", () => {
+      render(<DatePicker aria-label="Select date" size="lg" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-[var(--date-picker-trigger-height-lg)]")
+    })
+
+    it("has data-size attribute for sm", () => {
+      render(<DatePicker aria-label="Select date" size="sm" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "sm")
+    })
+
+    it("has data-size attribute for md", () => {
+      render(<DatePicker aria-label="Select date" size="md" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "md")
+    })
+
+    it("has data-size attribute for lg", () => {
+      render(<DatePicker aria-label="Select date" size="lg" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "lg")
+    })
+  })
+
+  // ============================================
+  // VISUAL VARIANT TESTS
+  // ============================================
+  describe("Visual Variants", () => {
+    it("applies default variant", () => {
+      render(<DatePicker aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveClass("border-input")
+    })
+
+    it("applies filled variant", () => {
+      render(<DatePicker aria-label="Select date" variant="filled" />)
+      expect(screen.getByRole("combobox")).toHaveClass("bg-muted")
+    })
+
+    it("applies flushed variant", () => {
+      render(<DatePicker aria-label="Select date" variant="flushed" />)
+      expect(screen.getByRole("combobox")).toHaveClass("rounded-none")
+      expect(screen.getByRole("combobox")).toHaveClass("border-x-0")
+    })
+
+    it("has data-variant attribute for default", () => {
+      render(<DatePicker aria-label="Select date" variant="default" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "default")
+    })
+
+    it("has data-variant attribute for filled", () => {
+      render(<DatePicker aria-label="Select date" variant="filled" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "filled")
+    })
+
+    it("has data-variant attribute for flushed", () => {
+      render(<DatePicker aria-label="Select date" variant="flushed" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "flushed")
+    })
+  })
+
+  // ============================================
+  // MIN/MAX DATE TESTS
+  // ============================================
+  describe("Min/Max Date Constraints", () => {
+    it("disables dates before minDate", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} minDate={minDate} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      // Day 5 should be disabled (before minDate Jan 10)
+      const dialog = screen.getByRole("dialog")
+      const day5Button = findDayButton(dialog, 5)
+      expect(day5Button).toBeDisabled()
+    })
+
+    it("disables dates after maxDate", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} maxDate={maxDate} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      // Day 25 should be disabled (after maxDate Jan 20)
+      const dialog = screen.getByRole("dialog")
+      const day25Button = findDayButton(dialog, 25)
+      expect(day25Button).toBeDisabled()
+    })
+
+    it("allows dates within range", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} maxDate={maxDate} minDate={minDate} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      // Day 15 should be enabled (within range)
+      const dialog = screen.getByRole("dialog")
+      const day15Button = findDayButton(dialog, 15)
+      expect(day15Button).not.toBeDisabled()
+    })
+  })
+
+  // ============================================
+  // KEYBOARD NAVIGATION TESTS
+  // ============================================
+  describe("Keyboard Navigation", () => {
+    it("opens calendar with Enter key", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("opens calendar with Space key", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard(" ")
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("closes calendar with Escape key", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.keyboard("{Escape}")
+
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  // ============================================
+  // CONTROLLED STATE TESTS
+  // ============================================
+  describe("Controlled State", () => {
+    it("respects controlled value", () => {
+      const { rerender } = render(
+        <DatePicker aria-label="Select date" value={testDate} onChange={() => {}} />
+      )
+
+      expect(screen.getByRole("combobox")).toHaveTextContent("January 15")
+
+      const newDate = new Date(2024, 1, 20) // February 20, 2024
+      rerender(<DatePicker aria-label="Select date" value={newDate} onChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("February 20")
+    })
+
+    it("reports new value via onChange", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DatePicker aria-label="Select date" value={testDate} onChange={handleChange} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const day20Button = findDayButton(dialog, 20)
+      expect(day20Button).not.toBeNull()
+      await user.click(day20Button as Element)
+
+      expect(handleChange).toHaveBeenCalled()
+      const selectedDate = handleChange.mock.calls[0]?.[0] as Date
+      expect(selectedDate.getDate()).toBe(20)
+    })
+
+    it("maintains controlled state across renders", () => {
+      const { rerender } = render(
+        <DatePicker aria-label="Select date" value={testDate} onChange={() => {}} />
+      )
+      expect(screen.getByRole("combobox")).toHaveTextContent("January 15")
+
+      rerender(<DatePicker aria-label="Select date" value={testDate} onChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("January 15")
+    })
+  })
+
+  // ============================================
+  // FOCUS TESTS
+  // ============================================
+  describe("Focus", () => {
+    it("trigger is focusable", () => {
+      render(<DatePicker aria-label="Select date" />)
+      const trigger = screen.getByRole("combobox")
+      trigger.focus()
+      expect(trigger).toHaveFocus()
+    })
+
+    it("trigger is not focusable when disabled", () => {
+      render(<DatePicker disabled aria-label="Select date" />)
+      const trigger = screen.getByRole("combobox")
+      trigger.focus()
+      expect(trigger).not.toHaveFocus()
+    })
+
+    it("can be focused via Tab", async () => {
+      const user = userEvent.setup()
+      render(
+        <div>
+          <button>Before</button>
+          <DatePicker aria-label="Select date" />
+        </div>
+      )
+
+      await user.tab()
+      await user.tab()
+      expect(screen.getByRole("combobox")).toHaveFocus()
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations with aria-label", async () => {
+      const { container } = render(
+        <label>
+          Date of birth
+          <DatePicker id="dob" />
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("trigger has combobox role", () => {
+      render(<DatePicker aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("trigger has aria-haspopup", () => {
+      render(<DatePicker aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-haspopup", "dialog")
+    })
+
+    it("trigger has aria-expanded", () => {
+      render(<DatePicker aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "false")
+    })
+
+    it("trigger has aria-expanded=true when open", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "true")
+      })
+    })
+
+    it("supports aria-label prop", () => {
+      render(<DatePicker aria-label="Select your birthday" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-label")
+    })
+
+    it("supports aria-labelledby", () => {
+      render(
+        <>
+          <span id="my-label">Pick a date</span>
+          <DatePicker aria-labelledby="my-label" />
+        </>
+      )
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-labelledby", "my-label")
+    })
+  })
+
+  // ============================================
+  // DATA ATTRIBUTE TESTS
+  // ============================================
+  describe("Data Attributes", () => {
+    it("has data-slot on wrapper", () => {
+      render(<DatePicker aria-label="Select date" />)
+      const wrapper = screen.getByRole("combobox").closest('[data-slot="date-picker"]')
+      expect(wrapper).toBeInTheDocument()
+    })
+
+    it("has data-slot on trigger", () => {
+      render(<DatePicker aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "date-picker-trigger")
+    })
+
+    it("has data-slot on calendar content when opened", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        const popoverContent = document.querySelector('[data-slot="date-picker-calendar"]')
+        expect(popoverContent).toBeInTheDocument()
+      })
+    })
+
+    it("has data-state on trigger", () => {
+      render(<DatePicker aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-state", "closed")
+    })
+
+    it("has data-state=open when opened", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("combobox")).toHaveAttribute("data-state", "open")
+      })
+    })
+  })
+
+  // ============================================
+  // FORM INTEGRATION TESTS
+  // ============================================
+  describe("Form Integration", () => {
+    it("renders hidden input with name", () => {
+      const { container } = render(<DatePicker aria-label="Select date" name="birthdate" />)
+      const hiddenInput = container.querySelector('input[type="hidden"][name="birthdate"]')
+      expect(hiddenInput).toBeInTheDocument()
+    })
+
+    it("hidden input has ISO date value", () => {
+      const { container } = render(<DatePicker aria-label="Select date" defaultValue={testDate} name="birthdate" />)
+      const hiddenInput = container.querySelector('input[type="hidden"]')
+      expect(hiddenInput).toBeDefined()
+      expect((hiddenInput as HTMLInputElement).value).toBe(testDate.toISOString())
+    })
+
+    it("hidden input is empty when no date selected", () => {
+      const { container } = render(<DatePicker aria-label="Select date" name="birthdate" />)
+      const hiddenInput = container.querySelector('input[type="hidden"]')
+      expect(hiddenInput).toBeDefined()
+      expect((hiddenInput as HTMLInputElement).value).toBe("")
+    })
+
+    it("supports id for label association", () => {
+      render(<DatePicker aria-label="Select date" id="birthdate-input" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("id", "birthdate-input")
+    })
+  })
+
+  // ============================================
+  // EDGE CASES TESTS
+  // ============================================
+  describe("Edge Cases", () => {
+    it("handles empty className", () => {
+      render(<DatePicker aria-label="Select date" className="" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("handles whitespace-only className", () => {
+      render(<DatePicker aria-label="Select date" className="   " />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("handles rapid open/close correctly", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" />)
+
+      const trigger = screen.getByRole("combobox")
+      await user.click(trigger)
+      await user.keyboard("{Escape}")
+      await user.click(trigger)
+      await user.keyboard("{Escape}")
+      await user.click(trigger)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("maintains state through re-renders", () => {
+      const { rerender } = render(<DatePicker aria-label="Select date" defaultValue={testDate} />)
+
+      expect(screen.getByRole("combobox")).toHaveTextContent("January 15")
+
+      rerender(<DatePicker aria-label="Select date" defaultValue={testDate} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("January 15")
+    })
+  })
+
+  // ============================================
+  // TYPE SAFETY TESTS
+  // ============================================
+  describe("Type Safety", () => {
+    it("accepts valid size prop values", () => {
+      const sizes = ["sm", "md", "lg"] as const
+      sizes.forEach((size) => {
+        const { unmount } = render(<DatePicker aria-label="Select date" size={size} />)
+        expect(screen.getByRole("combobox")).toBeInTheDocument()
+        unmount()
+      })
+    })
+
+    it("accepts valid variant prop values", () => {
+      const variants = ["default", "filled", "flushed"] as const
+      variants.forEach((variant) => {
+        const { unmount } = render(<DatePicker aria-label="Select date" variant={variant} />)
+        expect(screen.getByRole("combobox")).toBeInTheDocument()
+        unmount()
+      })
+    })
+  })
+
+  // ============================================
+  // REF FORWARDING TESTS
+  // ============================================
+  describe("Ref Forwarding", () => {
+    it("forwards ref to trigger button", () => {
+      const ref = React.createRef<HTMLButtonElement>()
+      render(<DatePicker ref={ref} aria-label="Select date" />)
+
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+      expect(ref.current).toBe(screen.getByRole("combobox"))
+    })
+
+    it("allows programmatic focus via ref", () => {
+      const ref = React.createRef<HTMLButtonElement>()
+      render(<DatePicker ref={ref} aria-label="Select date" />)
+
+      ref.current?.focus()
+      expect(screen.getByRole("combobox")).toHaveFocus()
+    })
+  })
+
+  // ============================================
+  // CLEARABLE TESTS
+  // ============================================
+  describe("Clearable", () => {
+    it("does not show clear button by default", () => {
+      render(<DatePicker aria-label="Select date" defaultValue={testDate} />)
+      expect(screen.queryByLabelText("Clear date")).not.toBeInTheDocument()
+    })
+
+    it("shows clear button when clearable and has value", () => {
+      render(<DatePicker clearable aria-label="Select date" defaultValue={testDate} />)
+      expect(screen.getByLabelText("Clear date")).toBeInTheDocument()
+    })
+
+    it("does not show clear button when clearable but no value", () => {
+      render(<DatePicker clearable aria-label="Select date" />)
+      expect(screen.queryByLabelText("Clear date")).not.toBeInTheDocument()
+    })
+
+    it("does not show clear button when disabled", () => {
+      render(<DatePicker clearable disabled aria-label="Select date" defaultValue={testDate} />)
+      expect(screen.queryByLabelText("Clear date")).not.toBeInTheDocument()
+    })
+
+    it("does not show clear button when readOnly", () => {
+      render(<DatePicker clearable readOnly aria-label="Select date" defaultValue={testDate} />)
+      expect(screen.queryByLabelText("Clear date")).not.toBeInTheDocument()
+    })
+
+    it("clears date when clear button is clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DatePicker clearable aria-label="Select date" defaultValue={testDate} onChange={handleChange} />)
+
+      await user.click(screen.getByLabelText("Clear date"))
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("calls onClear callback when cleared", async () => {
+      const user = userEvent.setup()
+      const handleClear = vi.fn()
+      render(<DatePicker clearable aria-label="Select date" defaultValue={testDate} onClear={handleClear} />)
+
+      await user.click(screen.getByLabelText("Clear date"))
+
+      expect(handleClear).toHaveBeenCalled()
+    })
+
+    it("clears date with keyboard (Enter)", async () => {
+      const handleChange = vi.fn()
+      const user = userEvent.setup()
+      render(<DatePicker clearable value={new Date()} onChange={handleChange} />)
+
+      screen.getByLabelText("Clear date").focus()
+      await user.keyboard("{Enter}")
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("clears date with keyboard (Space)", async () => {
+      const handleChange = vi.fn()
+      const user = userEvent.setup()
+      render(<DatePicker clearable value={new Date()} onChange={handleChange} />)
+
+      screen.getByLabelText("Clear date").focus()
+      await user.keyboard(" ")
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("has data-slot on clear button", () => {
+      render(<DatePicker clearable aria-label="Select date" defaultValue={testDate} />)
+      expect(screen.getByLabelText("Clear date")).toHaveAttribute("data-slot", "date-picker-clear")
+    })
+  })
+
+  // ============================================
+  // READ-ONLY TESTS
+  // ============================================
+  describe("ReadOnly", () => {
+    it("applies aria-readonly when readOnly", () => {
+      render(<DatePicker readOnly aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-readonly", "true")
+    })
+
+    it("applies data-readonly when readOnly", () => {
+      render(<DatePicker readOnly aria-label="Select date" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-readonly")
+    })
+
+    it("does not open calendar when readOnly", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker readOnly aria-label="Select date" />)
+
+      await user.click(screen.getByRole("combobox"))
+
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    })
+
+    it("is still focusable when readOnly", () => {
+      render(<DatePicker readOnly aria-label="Select date" />)
+      const trigger = screen.getByRole("combobox")
+      trigger.focus()
+      expect(trigger).toHaveFocus()
+    })
+
+    it("displays value when readOnly", () => {
+      render(<DatePicker readOnly aria-label="Select date" defaultValue={testDate} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("January 15")
+    })
+
+    it("does not call onOpenChange when readOnly and clicked", async () => {
+      const user = userEvent.setup()
+      const handleOpenChange = vi.fn()
+      render(<DatePicker readOnly aria-label="Select date" onOpenChange={handleOpenChange} />)
+
+      await user.click(screen.getByRole("combobox"))
+
+      expect(handleOpenChange).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // LOCALE TESTS
+  // ============================================
+  describe("Locale", () => {
+    it("accepts locale prop without error", () => {
+      // Just verify it renders without error - actual locale testing would need date-fns locales
+      render(<DatePicker aria-label="Select date" locale={undefined} />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // CALENDAR PROPS PASSTHROUGH TESTS
+  // ============================================
+  describe("Calendar Props Passthrough", () => {
+    it("passes calendarProps to Calendar", async () => {
+      const user = userEvent.setup()
+      render(
+        <DatePicker
+          calendarProps={{
+            className: "custom-calendar-class"
+          }}
+          aria-label="Select date"
+        />
+      )
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        const calendar = document.querySelector('[data-slot="calendar"]')
+        expect(calendar).toHaveClass("custom-calendar-class")
+      })
+    })
+
+    it("passes numberOfMonths to Calendar", async () => {
+      const user = userEvent.setup()
+      render(
+        <DatePicker
+          calendarProps={{
+            numberOfMonths: 2
+          }}
+          aria-label="Select date"
+        />
+      )
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        // With 2 months, the calendar should have data-multiple-months="true"
+        const calendar = document.querySelector('[data-slot="calendar"]')
+        expect(calendar).toHaveAttribute("data-multiple-months", "true")
+      })
+    })
+  })
+
+  // ============================================
+  // DISABLED DATES FUNCTION TESTS
+  // ============================================
+  describe("Disabled Dates Function", () => {
+    it("accepts disabledDates function prop", () => {
+      render(
+        <DatePicker
+          aria-label="Select date"
+          disabledDates={(date) => date.getDay() === 0 || date.getDay() === 6}
+        />
+      )
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("disables dates based on disabledDates function", async () => {
+      const user = userEvent.setup()
+      // January 2024: Jan 13 (Sat) and Jan 14 (Sun) are weekend days
+      const jan15 = new Date(2024, 0, 15)
+
+      render(
+        <DatePicker
+          aria-label="Select date"
+          defaultValue={jan15}
+          disabledDates={(date) => date.getDay() === 0 || date.getDay() === 6}
+        />
+      )
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      // Jan 13, 2024 is Saturday
+      const saturdayButton = findDayButton(dialog, 13)
+      expect(saturdayButton).toBeDisabled()
+
+      // Jan 14, 2024 is Sunday
+      const sundayButton = findDayButton(dialog, 14)
+      expect(sundayButton).toBeDisabled()
+    })
+
+    it("allows dates not matching disabledDates function", async () => {
+      const user = userEvent.setup()
+      const jan15 = new Date(2024, 0, 15)
+
+      render(
+        <DatePicker
+          aria-label="Select date"
+          defaultValue={jan15}
+          disabledDates={(date) => date.getDay() === 0 || date.getDay() === 6}
+        />
+      )
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      // Jan 15, 2024 is Monday - should be enabled
+      const mondayButton = findDayButton(dialog, 15)
+      expect(mondayButton).not.toBeDisabled()
+    })
+
+    it("combines disabledDates with minDate/maxDate", async () => {
+      const user = userEvent.setup()
+      const jan15 = new Date(2024, 0, 15)
+      const minDate = new Date(2024, 0, 10)
+      const maxDate = new Date(2024, 0, 20)
+
+      render(
+        <DatePicker
+          aria-label="Select date"
+          defaultValue={jan15}
+          disabledDates={(date) => date.getDate() === 16}
+          maxDate={maxDate}
+          minDate={minDate}
+        />
+      )
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+
+      // Jan 5 should be disabled (before minDate)
+      const day5Button = findDayButton(dialog, 5)
+      expect(day5Button).toBeDisabled()
+
+      // Jan 16 should be disabled (by disabledDates)
+      const day16Button = findDayButton(dialog, 16)
+      expect(day16Button).toBeDisabled()
+
+      // Jan 25 should be disabled (after maxDate)
+      const day25Button = findDayButton(dialog, 25)
+      expect(day25Button).toBeDisabled()
+
+      // Jan 15 should be enabled
+      const day15Button = findDayButton(dialog, 15)
+      expect(day15Button).not.toBeDisabled()
+    })
+  })
+
+  // ============================================
+  // SHOW TODAY BUTTON TESTS
+  // ============================================
+  describe("Show Today Button", () => {
+    it("does not show Today button by default", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker aria-label="Select date" />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      expect(screen.queryByRole("button", { name: "Today" })).not.toBeInTheDocument()
+    })
+
+    it("shows Today button when showToday is true", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker showToday aria-label="Select date" />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      expect(screen.getByRole("button", { name: "Today" })).toBeInTheDocument()
+    })
+
+    it("uses custom todayLabel", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker showToday aria-label="Select date" todayLabel="Hoje" />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      expect(screen.getByRole("button", { name: "Hoje" })).toBeInTheDocument()
+    })
+
+    it("selects today when Today button is clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<DatePicker showToday aria-label="Select date" onChange={handleChange} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByRole("button", { name: "Today" }))
+
+      expect(handleChange).toHaveBeenCalled()
+      const selectedDate = handleChange.mock.calls[0]?.[0] as Date
+      const today = new Date()
+      expect(selectedDate.getDate()).toBe(today.getDate())
+      expect(selectedDate.getMonth()).toBe(today.getMonth())
+      expect(selectedDate.getFullYear()).toBe(today.getFullYear())
+    })
+
+    it("closes calendar after clicking Today", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker showToday aria-label="Select date" />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      await user.click(screen.getByRole("button", { name: "Today" }))
+
+      await waitFor(() => {
+        expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+      })
+    })
+
+    it("disables Today button when today is before minDate", async () => {
+      const user = userEvent.setup()
+      const tomorrow = new Date()
+      tomorrow.setDate(tomorrow.getDate() + 1)
+
+      render(<DatePicker showToday aria-label="Select date" minDate={tomorrow} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      expect(screen.getByRole("button", { name: "Today" })).toBeDisabled()
+    })
+
+    it("disables Today button when today is after maxDate", async () => {
+      const user = userEvent.setup()
+      const yesterday = new Date()
+      yesterday.setDate(yesterday.getDate() - 1)
+
+      render(<DatePicker showToday aria-label="Select date" maxDate={yesterday} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      expect(screen.getByRole("button", { name: "Today" })).toBeDisabled()
+    })
+
+    it("disables Today button when today is disabled by disabledDates", async () => {
+      const user = userEvent.setup()
+      const today = new Date()
+
+      render(
+        <DatePicker
+          showToday
+          aria-label="Select date"
+          disabledDates={(date) => date.getDate() === today.getDate()}
+        />
+      )
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      expect(screen.getByRole("button", { name: "Today" })).toBeDisabled()
+    })
+
+    it("has data-slot on footer", async () => {
+      const user = userEvent.setup()
+      render(<DatePicker showToday aria-label="Select date" />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const footer = document.querySelector('[data-slot="date-picker-footer"]')
+      expect(footer).toBeInTheDocument()
+    })
+
+    it("does not call onChange when Today is disabled", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      const yesterday = new Date()
+      yesterday.setDate(yesterday.getDate() - 1)
+
+      render(<DatePicker showToday aria-label="Select date" maxDate={yesterday} onChange={handleChange} />)
+
+      await openDatePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const todayButton = screen.getByRole("button", { name: "Today" })
+      // Disabled buttons can't be clicked
+      expect(todayButton).toBeDisabled()
+    })
+  })
+})