/**
 * Tests pour PlaylistListSkeleton
 * T0505: Create Playlist Loading States
 */

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

describe('PlaylistListSkeleton', () => {
  it('should render skeleton list with default count', () => {
    render(<PlaylistListSkeleton />);

    const container = screen.getByRole('status');
    expect(container).toBeInTheDocument();
    expect(container).toHaveAttribute('aria-label', 'Chargement des playlists');

    // Should render 8 skeletons by default
    const skeletons = container.querySelectorAll('[role="status"]');
    expect(skeletons.length).toBeGreaterThan(0);
  });

  it('should render skeleton list with custom count', () => {
    render(<PlaylistListSkeleton count={5} />);

    const container = screen.getByRole('status');
    expect(container).toBeInTheDocument();
  });

  it('should render grid layout by default', () => {
    const { container } = render(<PlaylistListSkeleton />);

    const grid = container.querySelector('.grid');
    expect(grid).toBeInTheDocument();
  });

  it('should render list layout when view is list', () => {
    const { container } = render(<PlaylistListSkeleton view="list" />);

    const list = container.querySelector('.flex.flex-col');
    expect(list).toBeInTheDocument();
  });

  it('should have accessible loading message', () => {
    render(<PlaylistListSkeleton />);

    const message = screen.getByText('Chargement des playlists en cours...');
    expect(message).toHaveClass('sr-only');
  });
});
