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

describe('UiSkeleton', () => {
  test('renders skeleton element', () => {
    const { container } = render(UiSkeleton);
    const skeleton = container.querySelector('[data-slot="skeleton"]');
    expect(skeleton).toBeInTheDocument();
  });

  test('applies animate-pulse class for loading animation', () => {
    const { container } = render(UiSkeleton);
    const skeleton = container.querySelector('[data-slot="skeleton"]');
    expect(skeleton).toHaveClass('animate-pulse');
  });

  test('applies rounded-full class when rounded prop is true', () => {
    const { container } = render(UiSkeleton, {
      props: { rounded: true },
    });
    const skeleton = container.querySelector('[data-slot="skeleton"]');
    expect(skeleton).toHaveClass('rounded-full');
  });

  test('does not apply rounded-full class by default', () => {
    const { container } = render(UiSkeleton);
    const skeleton = container.querySelector('[data-slot="skeleton"]');
    expect(skeleton).not.toHaveClass('rounded-full');
  });

  test('applies custom width style', () => {
    const { container } = render(UiSkeleton, {
      props: { width: '200px' },
    });
    const skeleton = container.querySelector('[data-slot="skeleton"]');
    expect(skeleton).toHaveStyle({ width: '200px' });
  });

  test('applies custom height style', () => {
    const { container } = render(UiSkeleton, {
      props: { height: '50px' },
    });
    const skeleton = container.querySelector('[data-slot="skeleton"]');
    expect(skeleton).toHaveStyle({ height: '50px' });
  });
});
