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

describe('TrackListSkeleton', () => {
  it('should render skeleton loader', () => {
    render(<TrackListSkeleton />);
    expect(
      screen.getByRole('status', { name: 'Chargement des pistes' }),
    ).toBeInTheDocument();
  });

  it('should render correct number of skeleton items', () => {
    const { container } = render(<TrackListSkeleton count={3} />);
    const items = container.querySelectorAll('[role="status"] > div');
    expect(items).toHaveLength(3);
  });

  it('should render default count of 5 items', () => {
    const { container } = render(<TrackListSkeleton />);
    const items = container.querySelectorAll('[role="status"] > div');
    expect(items).toHaveLength(5);
  });

  it('should display cover skeleton when showCover is true', () => {
    const { container } = render(<TrackListSkeleton showCover={true} />);
    const coverSkeletons = container.querySelectorAll('.w-12.h-12');
    expect(coverSkeletons.length).toBeGreaterThan(0);
  });

  it('should not display cover skeleton when showCover is false', () => {
    const { container } = render(<TrackListSkeleton showCover={false} />);
    const coverSkeletons = container.querySelectorAll('.w-12.h-12');
    expect(coverSkeletons.length).toBe(0);
  });

  it('should display metadata skeleton when showMetadata is true', () => {
    const { container } = render(<TrackListSkeleton showMetadata={true} />);
    const metadataSkeletons = container.querySelectorAll('.space-y-2 > div');
    expect(metadataSkeletons.length).toBeGreaterThan(0);
  });

  it('should display duration skeleton when showDuration is true', () => {
    const { container } = render(<TrackListSkeleton showDuration={true} />);
    const durationSkeletons = container.querySelectorAll('.w-12');
    expect(durationSkeletons.length).toBeGreaterThan(0);
  });

  it('should apply custom className', () => {
    const { container } = render(
      <TrackListSkeleton className="custom-class" />,
    );
    const skeleton = container.querySelector('[role="status"]');
    expect(skeleton).toHaveClass('custom-class');
  });

  it('should have accessible attributes', () => {
    render(<TrackListSkeleton />);
    const status = screen.getByRole('status', {
      name: 'Chargement des pistes',
    });
    expect(status).toHaveAttribute('aria-label', 'Chargement des pistes');
    expect(
      screen.getByText('Chargement des pistes en cours...'),
    ).toBeInTheDocument();
  });
});
