import '@testing-library/jest-dom/vitest';
import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import {
  UiSelect,
  UiSelectTrigger,
  UiSelectContent,
  UiSelectValue,
} from '../index';

describe('UiSelectValue', () => {
  test('displays placeholder when no value is selected', () => {
    const { getByRole } = render({
      components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectValue },
      template: `
        <UiSelect>
          <UiSelectTrigger>
            <UiSelectValue placeholder="Select an option" />
          </UiSelectTrigger>
          <UiSelectContent />
        </UiSelect>
      `,
    });

    expect(getByRole('combobox')).toHaveTextContent('Select an option');
  });

  test('applies custom class', () => {
    const { container } = render({
      components: { UiSelect, UiSelectTrigger, UiSelectContent, UiSelectValue },
      template: `
        <UiSelect>
          <UiSelectTrigger>
            <UiSelectValue placeholder="Select" class="text-muted" />
          </UiSelectTrigger>
          <UiSelectContent />
        </UiSelect>
      `,
    });

    const valueElement = container.querySelector('[data-slot="select-value"]');
    expect(valueElement).toHaveClass('text-muted');
  });
});
