import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import UiSeparator from '../UiSeparator.vue';

describe('UiSeparator', () => {
  test('renders with default horizontal orientation', () => {
    const { container } = render(UiSeparator);
    const separator = container.querySelector('[data-slot="separator"]');
    expect(separator).toBeInTheDocument();
    expect(separator).toHaveAttribute('data-orientation', 'horizontal');
  });

  test('renders with vertical orientation', () => {
    const { container } = render(UiSeparator, {
      props: { orientation: 'vertical' },
    });
    const separator = container.querySelector('[data-slot="separator"]');
    expect(separator).toHaveAttribute('data-orientation', 'vertical');
  });

  test('is decorative by default (role=none)', () => {
    const { container } = render(UiSeparator);
    const separator = container.querySelector('[data-slot="separator"]');
    expect(separator).toHaveAttribute('role', 'none');
  });

  test('has separator role when not decorative', () => {
    const { container } = render(UiSeparator, {
      props: { decorative: false },
    });
    const separator = container.querySelector('[data-slot="separator"]');
    expect(separator).toHaveAttribute('role', 'separator');
  });
});
