import { describe, it, expect, vi } from 'vitest'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { Collapsible } from './Collapsible'

describe('Collapsible', () => {
  it('renders title', () => {
    render(<Collapsible title="Details">Content</Collapsible>)
    expect(screen.getByText('Details')).toBeInTheDocument()
  })

  it('hides content by default', () => {
    render(<Collapsible title="Details">Hidden content</Collapsible>)
    expect(screen.queryByText('Hidden content')).not.toBeVisible()
  })

  it('shows content when defaultOpen', () => {
    render(<Collapsible title="Details" defaultOpen>Visible content</Collapsible>)
    expect(screen.getByText('Visible content')).toBeVisible()
  })

  it('toggles content on click', async () => {
    const user = userEvent.setup()
    render(<Collapsible title="Details">Content</Collapsible>)
    await user.click(screen.getByText('Details'))
    expect(screen.getByText('Content')).toBeVisible()
  })

  it('calls onToggle when toggled', async () => {
    const onToggle = vi.fn()
    const user = userEvent.setup()
    render(<Collapsible title="Details" onToggle={onToggle}>Content</Collapsible>)
    await user.click(screen.getByText('Details'))
    expect(onToggle).toHaveBeenCalled()
  })
})
