admin/components/ui/SegmentedControl.test.tsx

import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'

import SegmentedControl from '@/components/ui/SegmentedControl'

afterEach(cleanup)

const options = [
  { value: 'female', label: 'زن' },
  { value: 'male', label: 'مرد' },
] as const

describe('SegmentedControl', () => {
  it('exposes the selected option and calls onChange', () => {
    const onChange = vi.fn()

    render(
      <SegmentedControl
        ariaLabel="جنسیت"
        layoutId="test-gender-pill"
        options={options}
        value="female"
        onChange={onChange}
      />
    )

    expect(screen.getByRole('group', { name: 'جنسیت' })).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'زن' })).toHaveAttribute('aria-pressed', 'true')
    expect(screen.getByRole('button', { name: 'مرد' })).toHaveAttribute('aria-pressed', 'false')

    fireEvent.click(screen.getByRole('button', { name: 'مرد' }))
    expect(onChange).toHaveBeenCalledWith('male')
  })

  it('keeps all options unpressed when value matches none', () => {
    render(
      <SegmentedControl
        ariaLabel="وضعیت"
        layoutId="test-status-pill"
        options={[
          { value: 'upcoming', label: 'پیش رو' },
          { value: 'held', label: 'برگزار شده' },
        ]}
        value={null}
        onChange={vi.fn()}
      />
    )

    expect(screen.getByRole('button', { name: 'پیش رو' })).toHaveAttribute('aria-pressed', 'false')
    expect(screen.getByRole('button', { name: 'برگزار شده' })).toHaveAttribute('aria-pressed', 'false')
  })

  it('does not render an empty control', () => {
    const { container } = render(
      <SegmentedControl
        ariaLabel="خالی"
        layoutId="test-empty-pill"
        options={[]}
        value={null}
        onChange={vi.fn()}
      />
    )

    expect(container).toBeEmptyDOMElement()
  })
})