clinicpro/assets/admin/components/ui/SearchableSelect.test.tsx

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

vi.mock('../../stores/uiStore', () => ({ useUiStore: () => false }));

const insuranceOpts = [
  { value: '176', label: 'تامین اجتماعی' },
  { value: '178', label: 'بیمه ارتش' },
];

describe('SearchableSelect — تطبیق مقدار', () => {
  it('مقدار number با گزینهٔ string تطبیق می‌خورد (id بیمه)', () => {
    render(<SearchableSelect options={insuranceOpts} value={176} onChange={() => {}} />);
    expect(screen.getByText('تامین اجتماعی')).toBeInTheDocument();
  });

  it('مقدار string با گزینهٔ string تطبیق می‌خورد', () => {
    render(<SearchableSelect options={insuranceOpts} value={'178'} onChange={() => {}} />);
    expect(screen.getByText('بیمه ارتش')).toBeInTheDocument();
  });

  it('مقدار number با گزینهٔ number تطبیق می‌خورد', () => {
    render(<SearchableSelect options={[{ value: 9, label: 'یزد' }]} value={9} onChange={() => {}} />);
    expect(screen.getByText('یزد')).toBeInTheDocument();
  });

  it('null/خالی → هیچ گزینه‌ای انتخاب نمی‌شود (placeholder)', () => {
    render(<SearchableSelect options={insuranceOpts} value={null} onChange={() => {}} placeholder="انتخاب کنید..." />);
    expect(screen.getByText('انتخاب کنید...')).toBeInTheDocument();
    expect(screen.queryByText('تامین اجتماعی')).not.toBeInTheDocument();
  });
});

describe('SearchableSelect — نام دسترس‌پذیر', () => {
  it('در نبود ariaLabel، از placeholder به‌عنوان نام استفاده می‌کند', () => {
    render(<SearchableSelect options={insuranceOpts} onChange={() => {}} placeholder="نوع بیمه" />);
    expect(screen.getByRole('combobox', { name: 'نوع بیمه' })).toBeInTheDocument();
  });

  it('ariaLabel بر placeholder اولویت دارد', () => {
    render(<SearchableSelect options={insuranceOpts} onChange={() => {}} placeholder="انتخاب کنید..." ariaLabel="بیمه پایه" />);
    expect(screen.getByRole('combobox', { name: 'بیمه پایه' })).toBeInTheDocument();
  });

  it('ariaLabelledBy به label قابل‌مشاهده وصل می‌شود', () => {
    render(
      <>
        <span id="lbl-city">شهر</span>
        <SearchableSelect options={[{ value: 9, label: 'یزد' }]} onChange={() => {}} ariaLabelledBy="lbl-city" />
      </>,
    );
    expect(screen.getByRole('combobox', { name: 'شهر' })).toBeInTheDocument();
  });
});

describe('SearchableSelect — جستجوی سمت سرور', () => {
  it('با تایپ، onInputChange صدا زده می‌شود', () => {
    const onInputChange = vi.fn();
    render(<SearchableSelect options={[]} onChange={() => {}} inputId="srv" onInputChange={onInputChange} />);

    fireEvent.change(document.getElementById('srv') as HTMLInputElement, { target: { value: 'رضا' } });

    expect(onInputChange).toHaveBeenCalledWith('رضا');
  });

  /** نتیجهٔ سرور نباید دوباره روی متنِ تایپ‌شده فیلتر شود. */
  it('در حالت سرور، گزینه‌ای که با متن تایپ‌شده نمی‌خواند هم می‌ماند', () => {
    render(
      <SearchableSelect
        options={[{ value: 'd1', label: 'دکتر رضایی' }]}
        onChange={() => {}}
        inputId="srv2"
        onInputChange={() => {}}
      />,
    );

    const input = document.getElementById('srv2') as HTMLInputElement;
    fireEvent.focus(input);
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    fireEvent.change(input, { target: { value: '0912' } });

    expect(screen.getByText('دکتر رضایی')).toBeInTheDocument();
  });

  it('بدون onInputChange، فیلتر داخلی سر جایش می‌ماند', () => {
    render(<SearchableSelect options={[{ value: 'd1', label: 'دکتر رضایی' }]} onChange={() => {}} inputId="srv3" />);

    const input = document.getElementById('srv3') as HTMLInputElement;
    fireEvent.focus(input);
    fireEvent.keyDown(input, { key: 'ArrowDown' });
    fireEvent.change(input, { target: { value: '0912' } });

    expect(screen.queryByText('دکتر رضایی')).not.toBeInTheDocument();
  });
});