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

describe('UiTooltip', () => {
  test('renders with content when open is true', async () => {
    render(UiTooltip, {
      props: {
        content: 'Tooltip text',
        open: true,
        delayDuration: 0,
      },
      slots: {
        default: '<button>Hover me</button>',
      },
    });
    const tooltip = await screen.findByRole('tooltip', { hidden: true });
    expect(tooltip).toBeInTheDocument();
    expect(tooltip).toHaveTextContent('Tooltip text');
  });

  test('applies custom classes to content', async () => {
    const customClass = 'bg-red-500';
    render(UiTooltip, {
      props: {
        content: 'Tooltip text',
        open: true,
        class: customClass,
        delayDuration: 0,
      },
      slots: {
        default: '<button>Hover me</button>',
      },
    });

    const tooltipSpan = await screen.findByRole('tooltip', { hidden: true });
    expect(tooltipSpan).toHaveTextContent('Tooltip text');
    // Custom classes are applied to the visible wrapper div, not the hidden role span
    // The span is a direct child of the wrapper div
    expect(tooltipSpan.parentElement).toHaveClass(customClass);
  });

  test('renders with specific side configuration', async () => {
    render(UiTooltip, {
      props: {
        content: 'Tooltip text',
        open: true,
        side: 'right',
        delayDuration: 0,
      },
      slots: {
        default: '<button>Hover me</button>',
      },
    });

    const tooltipSpan = await screen.findByRole('tooltip', { hidden: true });
    // Data attributes are on the visible wrapper div
    expect(tooltipSpan.parentElement).toHaveAttribute('data-side', 'right');
  });

  test('renders with specific align configuration', async () => {
    render(UiTooltip, {
      props: {
        content: 'Tooltip text',
        open: true,
        align: 'start',
        delayDuration: 0,
      },
      slots: {
        default: '<button>Hover me</button>',
      },
    });

    const tooltipSpan = await screen.findByRole('tooltip', { hidden: true });
    // Data attributes are on the visible wrapper div
    expect(tooltipSpan.parentElement).toHaveAttribute('data-align', 'start');
  });
});
