@etus/ui 0.1.1 → 0.1.3

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

@@ -1,1181 +0,0 @@
-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()
-    })
-  })
-})