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

describe('UiSelectSeparator', () => {
  test('renders separator between items', async () => {
    const user = userEvent.setup();
    const { getByRole } = render({
      components: {
        UiSelect,
        UiSelectTrigger,
        UiSelectContent,
        UiSelectItem,
        UiSelectValue,
        UiSelectSeparator,
      },
      template: `
        <UiSelect>
          <UiSelectTrigger>
            <UiSelectValue placeholder="Select" />
          </UiSelectTrigger>
          <UiSelectContent>
            <UiSelectItem value="a">Option A</UiSelectItem>
            <UiSelectSeparator />
            <UiSelectItem value="b">Option B</UiSelectItem>
          </UiSelectContent>
        </UiSelect>
      `,
    });

    await user.click(getByRole('combobox'));

    await waitFor(() => {
      // Separator is aria-hidden and rendered in a portal, query from document
      const separator = document.querySelector(
        '[data-slot="select-separator"]',
      );
      expect(separator).toBeInTheDocument();
    });
  });

  test('applies custom class', async () => {
    const user = userEvent.setup();
    const { getByRole } = render({
      components: {
        UiSelect,
        UiSelectTrigger,
        UiSelectContent,
        UiSelectItem,
        UiSelectValue,
        UiSelectSeparator,
      },
      template: `
        <UiSelect>
          <UiSelectTrigger>
            <UiSelectValue placeholder="Select" />
          </UiSelectTrigger>
          <UiSelectContent>
            <UiSelectItem value="a">Option A</UiSelectItem>
            <UiSelectSeparator class="bg-red-500" />
            <UiSelectItem value="b">Option B</UiSelectItem>
          </UiSelectContent>
        </UiSelect>
      `,
    });

    await user.click(getByRole('combobox'));

    await waitFor(() => {
      // Separator is aria-hidden and rendered in a portal, query from document
      const separator = document.querySelector(
        '[data-slot="select-separator"]',
      );
      expect(separator).toHaveClass('bg-red-500');
    });
  });
});
