goodgo-platform/apps/web/components/design-system/__tests__/skeleton.test.tsx

import { render } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Skeleton } from '../skeleton';

describe('Skeleton', () => {
  it('renders base skeleton with aria-hidden', () => {
    const { container } = render(<Skeleton />);
    expect((container.firstChild as HTMLElement)).toHaveAttribute('aria-hidden', 'true');
  });

  it('base skeleton has animate-pulse class', () => {
    const { container } = render(<Skeleton />);
    expect((container.firstChild as HTMLElement)).toHaveClass('animate-pulse');
  });

  it('Skeleton.Row renders with aria-hidden', () => {
    const { container } = render(<Skeleton.Row />);
    expect(container.querySelector('[aria-hidden]')).toBeInTheDocument();
  });

  it('Skeleton.Card renders with aria-hidden', () => {
    const { container } = render(<Skeleton.Card />);
    expect(container.querySelector('[aria-hidden]')).toBeInTheDocument();
  });

  it('Skeleton.Table renders default 5 rows + header', () => {
    const { container } = render(<Skeleton.Table />);
    // 1 header div + 5 SkeletonRow divs = 6 children
    const wrapper = container.firstChild as HTMLElement;
    expect(wrapper.children.length).toBe(6);
  });

  it('Skeleton.Table renders custom rows count', () => {
    const { container } = render(<Skeleton.Table rows={3} />);
    const wrapper = container.firstChild as HTMLElement;
    expect(wrapper.children.length).toBe(4); // 1 header + 3 rows
  });

  it('merges custom className', () => {
    const { container } = render(<Skeleton className="custom-class" />);
    expect((container.firstChild as HTMLElement)).toHaveClass('custom-class');
  });
});