@etus/ui 0.1.0

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

@@ -0,0 +1,780 @@
+// TimePicker/TimePicker.test.tsx
+import { render, screen, waitFor, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { beforeAll, describe, expect, it, vi } from "vitest"
+
+import { TimePicker } from "./TimePicker"
+
+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 time picker
+async function openTimePicker(user: ReturnType<typeof userEvent.setup>) {
+  const trigger = screen.getByRole("combobox")
+  await user.click(trigger)
+}
+
+// Helper to find an option button by text content
+function findOptionByText(container: HTMLElement, text: string): HTMLElement | null {
+  const buttons = container.querySelectorAll('button[role="option"]')
+  for (const button of buttons) {
+    if (button.textContent === text) {
+      return button as HTMLElement
+    }
+  }
+  return null
+}
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("TimePicker", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<TimePicker aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(<TimePicker aria-label="Select time" className="custom-class" />)
+      const wrapper = screen.getByRole("combobox").closest('[data-slot="time-picker"]')
+      expect(wrapper).toHaveClass("custom-class")
+    })
+
+    it("renders with placeholder", () => {
+      render(<TimePicker aria-label="Select time" placeholder="Pick a time" />)
+      expect(screen.getByText("Pick a time")).toBeInTheDocument()
+    })
+
+    it("renders with default value", () => {
+      render(<TimePicker aria-label="Select time" defaultValue="14:30" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("14:30")
+    })
+
+    it("renders with controlled value", () => {
+      render(<TimePicker aria-label="Select time" value="09:15" onChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("09:15")
+    })
+
+    it("has data-slot attribute on wrapper", () => {
+      render(<TimePicker aria-label="Select time" />)
+      const wrapper = screen.getByRole("combobox").closest('[data-slot="time-picker"]')
+      expect(wrapper).toHaveAttribute("data-slot", "time-picker")
+    })
+
+    it("has data-slot attribute on trigger", () => {
+      render(<TimePicker aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "time-picker-trigger")
+    })
+
+    it("renders clock icon", () => {
+      render(<TimePicker aria-label="Select time" />)
+      const trigger = screen.getByRole("combobox")
+      expect(trigger.querySelector("svg")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state", () => {
+      render(<TimePicker disabled aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toBeDisabled()
+    })
+
+    it("applies disabled styling", () => {
+      render(<TimePicker disabled aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveClass("disabled:opacity-50")
+    })
+
+    it("handles aria-invalid state", () => {
+      render(<TimePicker invalid aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-invalid", "true")
+    })
+
+    it("handles required state", () => {
+      render(<TimePicker required aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-required", "true")
+    })
+
+    it("shows placeholder when no value selected", () => {
+      render(<TimePicker aria-label="Select time" placeholder="Choose time" />)
+      expect(screen.getByText("Choose time")).toBeInTheDocument()
+    })
+
+    it("shows selected time instead of placeholder", () => {
+      render(<TimePicker aria-label="Select time" defaultValue="10:00" placeholder="Choose time" />)
+      expect(screen.queryByText("Choose time")).not.toBeInTheDocument()
+      expect(screen.getByRole("combobox")).toHaveTextContent("10:00")
+    })
+
+    it("applies muted color when no time selected", () => {
+      render(<TimePicker aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveClass("text-muted-foreground")
+    })
+
+    it("removes muted color when time is selected", () => {
+      render(<TimePicker aria-label="Select time" defaultValue="12:00" />)
+      expect(screen.getByRole("combobox")).not.toHaveClass("text-muted-foreground")
+    })
+  })
+
+  // ============================================
+  // TIME SELECTION TESTS
+  // ============================================
+  describe("Time Selection", () => {
+    it("opens dropdown when trigger is clicked", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("shows hour and minute columns when opened", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        const dialog = screen.getByRole("dialog")
+        expect(within(dialog).getByText("Hours")).toBeInTheDocument()
+        expect(within(dialog).getByText("Min")).toBeInTheDocument()
+      })
+    })
+
+    it("selects hour when clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TimePicker aria-label="Select time" onChange={handleChange} />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const hour10 = findOptionByText(dialog, "10")
+      expect(hour10).not.toBeNull()
+      await user.click(hour10 as Element)
+
+      expect(handleChange).toHaveBeenCalledWith("10:00")
+    })
+
+    it("selects minute when clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TimePicker aria-label="Select time" defaultValue="10:00" onChange={handleChange} />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const minute30 = findOptionByText(dialog, "30")
+      expect(minute30).not.toBeNull()
+      await user.click(minute30 as Element)
+
+      expect(handleChange).toHaveBeenCalledWith("10:30")
+    })
+  })
+
+  // ============================================
+  // 12-HOUR FORMAT TESTS
+  // ============================================
+  describe("12-Hour Format", () => {
+    it("shows 12-hour format when use12Hour is true", () => {
+      render(<TimePicker use12Hour aria-label="Select time" defaultValue="14:30" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("2:30 PM")
+    })
+
+    it("shows AM/PM column in dropdown", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker use12Hour aria-label="Select time" />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        const dialog = screen.getByRole("dialog")
+        expect(findOptionByText(dialog, "AM")).toBeInTheDocument()
+        expect(findOptionByText(dialog, "PM")).toBeInTheDocument()
+      })
+    })
+
+    it("shows 12-hour hours (1-12)", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker use12Hour aria-label="Select time" />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        const dialog = screen.getByRole("dialog")
+        expect(findOptionByText(dialog, "12")).toBeInTheDocument()
+        expect(findOptionByText(dialog, "1")).toBeInTheDocument()
+        expect(findOptionByText(dialog, "11")).toBeInTheDocument()
+      })
+    })
+
+    it("correctly converts AM times", () => {
+      render(<TimePicker use12Hour aria-label="Select time" defaultValue="09:00" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("9:00 AM")
+    })
+
+    it("correctly converts noon", () => {
+      render(<TimePicker use12Hour aria-label="Select time" defaultValue="12:00" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("12:00 PM")
+    })
+
+    it("correctly converts midnight", () => {
+      render(<TimePicker use12Hour aria-label="Select time" defaultValue="00:00" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("12:00 AM")
+    })
+
+    it("switches period when AM/PM is clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TimePicker use12Hour aria-label="Select time" defaultValue="10:30" onChange={handleChange} />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const pmButton = findOptionByText(dialog, "PM")
+      expect(pmButton).not.toBeNull()
+      await user.click(pmButton as Element)
+
+      expect(handleChange).toHaveBeenCalledWith("22:30")
+    })
+  })
+
+  // ============================================
+  // MINUTE STEP TESTS
+  // ============================================
+  describe("Minute Step", () => {
+    it("shows all minutes by default (step=1)", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        const dialog = screen.getByRole("dialog")
+        expect(findOptionByText(dialog, "00")).toBeInTheDocument()
+        expect(findOptionByText(dialog, "01")).toBeInTheDocument()
+        expect(findOptionByText(dialog, "59")).toBeInTheDocument()
+      })
+    })
+
+    it("shows 15-minute intervals with minuteStep=15", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" minuteStep={15} />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        const dialog = screen.getByRole("dialog")
+        // Find the minutes group specifically
+        const minutesGroup = within(dialog).getByRole("group", { name: "Minutes" })
+        expect(findOptionByText(minutesGroup, "00")).toBeInTheDocument()
+        expect(findOptionByText(minutesGroup, "15")).toBeInTheDocument()
+        expect(findOptionByText(minutesGroup, "30")).toBeInTheDocument()
+        expect(findOptionByText(minutesGroup, "45")).toBeInTheDocument()
+        // 01 should not exist with step=15
+        expect(findOptionByText(minutesGroup, "01")).toBeNull()
+      })
+    })
+
+    it("shows 30-minute intervals with minuteStep=30", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" minuteStep={30} />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        const dialog = screen.getByRole("dialog")
+        // Find the minutes group specifically
+        const minutesGroup = within(dialog).getByRole("group", { name: "Minutes" })
+        expect(findOptionByText(minutesGroup, "00")).toBeInTheDocument()
+        expect(findOptionByText(minutesGroup, "30")).toBeInTheDocument()
+        expect(findOptionByText(minutesGroup, "15")).toBeNull()
+      })
+    })
+  })
+
+  // ============================================
+  // EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onChange when time is selected", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TimePicker aria-label="Select time" onChange={handleChange} />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const hour09 = findOptionByText(dialog, "09")
+      expect(hour09).not.toBeNull()
+      await user.click(hour09 as Element)
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    it("calls onOpenChange when dropdown opens", async () => {
+      const user = userEvent.setup()
+      const handleOpenChange = vi.fn()
+      render(<TimePicker aria-label="Select time" onOpenChange={handleOpenChange} />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        expect(handleOpenChange).toHaveBeenCalledWith(true)
+      })
+    })
+
+    it("calls onOpenChange when dropdown closes", async () => {
+      const user = userEvent.setup()
+      const handleOpenChange = vi.fn()
+      render(<TimePicker aria-label="Select time" onOpenChange={handleOpenChange} />)
+
+      await openTimePicker(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(<TimePicker disabled aria-label="Select time" />)
+
+      const trigger = screen.getByRole("combobox")
+      await user.click(trigger)
+
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(<TimePicker aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-9")
+    })
+
+    it("applies sm size", () => {
+      render(<TimePicker aria-label="Select time" size="sm" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-8")
+    })
+
+    it("applies md size", () => {
+      render(<TimePicker aria-label="Select time" size="md" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-9")
+    })
+
+    it("applies lg size", () => {
+      render(<TimePicker aria-label="Select time" size="lg" />)
+      expect(screen.getByRole("combobox")).toHaveClass("h-10")
+    })
+
+    it("has data-size attribute for sm", () => {
+      render(<TimePicker aria-label="Select time" size="sm" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "sm")
+    })
+
+    it("has data-size attribute for md", () => {
+      render(<TimePicker aria-label="Select time" size="md" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "md")
+    })
+
+    it("has data-size attribute for lg", () => {
+      render(<TimePicker aria-label="Select time" size="lg" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-size", "lg")
+    })
+  })
+
+  // ============================================
+  // VISUAL VARIANT TESTS
+  // ============================================
+  describe("Visual Variants", () => {
+    it("applies default variant", () => {
+      render(<TimePicker aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveClass("border-input")
+    })
+
+    it("applies filled variant", () => {
+      render(<TimePicker aria-label="Select time" variant="filled" />)
+      expect(screen.getByRole("combobox")).toHaveClass("bg-muted")
+    })
+
+    it("applies flushed variant", () => {
+      render(<TimePicker aria-label="Select time" 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(<TimePicker aria-label="Select time" variant="default" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "default")
+    })
+
+    it("has data-variant attribute for filled", () => {
+      render(<TimePicker aria-label="Select time" variant="filled" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "filled")
+    })
+
+    it("has data-variant attribute for flushed", () => {
+      render(<TimePicker aria-label="Select time" variant="flushed" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-variant", "flushed")
+    })
+  })
+
+  // ============================================
+  // KEYBOARD NAVIGATION TESTS
+  // ============================================
+  describe("Keyboard Navigation", () => {
+    it("opens dropdown with Enter key", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard("{Enter}")
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("opens dropdown with Space key", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" />)
+
+      screen.getByRole("combobox").focus()
+      await user.keyboard(" ")
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+    })
+
+    it("closes dropdown with Escape key", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" />)
+
+      await openTimePicker(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(
+        <TimePicker aria-label="Select time" value="09:00" onChange={() => {}} />
+      )
+
+      expect(screen.getByRole("combobox")).toHaveTextContent("09:00")
+
+      rerender(<TimePicker aria-label="Select time" value="15:30" onChange={() => {}} />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("15:30")
+    })
+
+    it("reports new value via onChange", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<TimePicker aria-label="Select time" value="10:00" onChange={handleChange} />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("dialog")).toBeInTheDocument()
+      })
+
+      const dialog = screen.getByRole("dialog")
+      const minute45 = findOptionByText(dialog, "45")
+      expect(minute45).not.toBeNull()
+      await user.click(minute45 as Element)
+
+      expect(handleChange).toHaveBeenCalledWith("10:45")
+    })
+  })
+
+  // ============================================
+  // FOCUS TESTS
+  // ============================================
+  describe("Focus", () => {
+    it("trigger is focusable", () => {
+      render(<TimePicker aria-label="Select time" />)
+      const trigger = screen.getByRole("combobox")
+      trigger.focus()
+      expect(trigger).toHaveFocus()
+    })
+
+    it("trigger is not focusable when disabled", () => {
+      render(<TimePicker disabled aria-label="Select time" />)
+      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>
+          <TimePicker aria-label="Select time" />
+        </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>
+          Select time
+          <TimePicker id="time-input" />
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("trigger has combobox role", () => {
+      render(<TimePicker aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("trigger has aria-haspopup", () => {
+      render(<TimePicker aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-haspopup", "dialog")
+    })
+
+    it("trigger has aria-expanded", () => {
+      render(<TimePicker aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "false")
+    })
+
+    it("trigger has aria-expanded=true when open", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "true")
+      })
+    })
+
+    it("supports aria-label prop", () => {
+      render(<TimePicker aria-label="Select meeting time" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("aria-label")
+    })
+
+    it("supports aria-labelledby", () => {
+      render(
+        <>
+          <span id="my-label">Pick a time</span>
+          <TimePicker 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(<TimePicker aria-label="Select time" />)
+      const wrapper = screen.getByRole("combobox").closest('[data-slot="time-picker"]')
+      expect(wrapper).toBeInTheDocument()
+    })
+
+    it("has data-slot on trigger", () => {
+      render(<TimePicker aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-slot", "time-picker-trigger")
+    })
+
+    it("has data-slot on content when opened", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" />)
+
+      await openTimePicker(user)
+
+      await waitFor(() => {
+        const popoverContent = document.querySelector('[data-slot="time-picker-content"]')
+        expect(popoverContent).toBeInTheDocument()
+      })
+    })
+
+    it("has data-state on trigger", () => {
+      render(<TimePicker aria-label="Select time" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("data-state", "closed")
+    })
+
+    it("has data-state=open when opened", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" />)
+
+      await openTimePicker(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(<TimePicker aria-label="Select time" name="meeting-time" />)
+      const hiddenInput = container.querySelector('input[type="hidden"][name="meeting-time"]')
+      expect(hiddenInput).toBeInTheDocument()
+    })
+
+    it("hidden input has time value", () => {
+      const { container } = render(<TimePicker aria-label="Select time" defaultValue="14:30" name="meeting-time" />)
+      const hiddenInput = container.querySelector('input[type="hidden"]')
+      expect(hiddenInput).toBeDefined()
+      expect((hiddenInput as HTMLInputElement).value).toBe("14:30")
+    })
+
+    it("hidden input is empty when no time selected", () => {
+      const { container } = render(<TimePicker aria-label="Select time" name="meeting-time" />)
+      const hiddenInput = container.querySelector('input[type="hidden"]')
+      expect(hiddenInput).toBeDefined()
+      expect((hiddenInput as HTMLInputElement).value).toBe("")
+    })
+
+    it("supports id for label association", () => {
+      render(<TimePicker aria-label="Select time" id="time-input" />)
+      expect(screen.getByRole("combobox")).toHaveAttribute("id", "time-input")
+    })
+  })
+
+  // ============================================
+  // EDGE CASES TESTS
+  // ============================================
+  describe("Edge Cases", () => {
+    it("handles empty className", () => {
+      render(<TimePicker aria-label="Select time" className="" />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("handles whitespace-only className", () => {
+      render(<TimePicker aria-label="Select time" className="   " />)
+      expect(screen.getByRole("combobox")).toBeInTheDocument()
+    })
+
+    it("handles rapid open/close correctly", async () => {
+      const user = userEvent.setup()
+      render(<TimePicker aria-label="Select time" />)
+
+      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("handles invalid time string gracefully", () => {
+      render(<TimePicker aria-label="Select time" defaultValue="invalid" />)
+      // Should show placeholder since value is invalid
+      expect(screen.getByRole("combobox")).toHaveTextContent("Select time")
+    })
+
+    it("handles time string with single digit hour", () => {
+      render(<TimePicker aria-label="Select time" defaultValue="9:30" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("09:30")
+    })
+
+    it("maintains state through re-renders", () => {
+      const { rerender } = render(<TimePicker aria-label="Select time" defaultValue="10:00" />)
+
+      expect(screen.getByRole("combobox")).toHaveTextContent("10:00")
+
+      rerender(<TimePicker aria-label="Select time" defaultValue="10:00" />)
+      expect(screen.getByRole("combobox")).toHaveTextContent("10:00")
+    })
+  })
+
+  // ============================================
+  // 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(<TimePicker aria-label="Select time" 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(<TimePicker aria-label="Select time" variant={variant} />)
+        expect(screen.getByRole("combobox")).toBeInTheDocument()
+        unmount()
+      })
+    })
+  })
+})