import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import UiListbox from '../UiListbox.vue';
import UiListboxContent from '../UiListboxContent.vue';
import UiListboxItem from '../UiListboxItem.vue';
import UiListboxItemIndicator from '../UiListboxItemIndicator.vue';

describe('UiListbox', () => {
  test('renders listbox with items', () => {
    const { container } = render(UiListbox, {
      props: {
        modelValue: 'apple',
      },
      slots: {
        default: `
          <span>Apple</span>
          <span>Banana</span>
        `,
      },
      global: {
        components: {
          UiListboxContent,
          UiListboxItem,
          UiListboxItemIndicator,
        },
      },
    });

    expect(
      container.querySelector('[data-slot="listbox"]'),
    ).toBeInTheDocument();
  });

  test('renders disabled state', () => {
    const { container } = render(UiListbox, {
      props: {
        modelValue: 'apple',
        disabled: true,
      },
    });

    expect(
      container.querySelector('[data-slot="listbox"]'),
    ).toBeInTheDocument();
  });
});
