import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import UiTagsInput from '../UiTagsInput.vue';
import UiTagsInputInput from '../UiTagsInputInput.vue';
import UiTagsInputItem from '../UiTagsInputItem.vue';
import UiTagsInputItemText from '../UiTagsInputItemText.vue';
import UiTagsInputItemDelete from '../UiTagsInputItemDelete.vue';

describe('UiTagsInput', () => {
  test('renders tags input with items', () => {
    render(UiTagsInput, {
      props: {
        modelValue: ['Apple', 'Banana'],
      },
      slots: {
        default: `
          <span>Apple</span>
          <span>Banana</span>
        `,
      },
      global: {
        components: {
          UiTagsInputInput,
          UiTagsInputItem,
          UiTagsInputItemText,
          UiTagsInputItemDelete,
        },
      },
    });

    expect(
      document.querySelector('[data-slot="tags-input"]'),
    ).toBeInTheDocument();
  });

  test('renders disabled state', () => {
    const { container } = render(UiTagsInput, {
      props: {
        modelValue: ['Test'],
        disabled: true,
      },
    });

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