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

describe('Select', () => {
  it('renders with options', () => {
    render(
      <Select aria-label="Property type">
        <option value="">Chọn loại</option>
        <option value="APARTMENT">Căn hộ</option>
        <option value="HOUSE">Nhà phố</option>
      </Select>,
    );
    expect(screen.getByRole('combobox', { name: 'Property type' })).toBeInTheDocument();
    expect(screen.getAllByRole('option')).toHaveLength(3);
  });

  it('handles value change', async () => {
    const onChange = vi.fn();
    render(
      <Select aria-label="Type" onChange={onChange}>
        <option value="">Chọn</option>
        <option value="SALE">Bán</option>
        <option value="RENT">Cho thuê</option>
      </Select>,
    );
    await userEvent.selectOptions(screen.getByRole('combobox'), 'SALE');
    expect(onChange).toHaveBeenCalled();
  });

  it('is disabled when disabled prop is set', () => {
    render(
      <Select disabled aria-label="Disabled select">
        <option>Option</option>
      </Select>,
    );
    expect(screen.getByRole('combobox')).toBeDisabled();
  });
});