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

describe('LibrarySkeleton', () => {
  test('variant="list" renders count placeholder rows', () => {
    render(LibrarySkeleton, { props: { variant: 'list', count: 5 } });
    const container = screen.getByTestId('skeleton-list');
    expect(container.querySelectorAll('[data-skeleton-row]').length).toBe(5);
  });

  test('variant="grid" renders count placeholder cards', () => {
    render(LibrarySkeleton, { props: { variant: 'grid', count: 6 } });
    const container = screen.getByTestId('skeleton-grid');
    expect(container.querySelectorAll('[data-skeleton-card]').length).toBe(6);
  });

  test('variant="album" renders a hero placeholder with cover block + bars', () => {
    render(LibrarySkeleton, { props: { variant: 'album' } });
    expect(screen.getByTestId('skeleton-album')).toBeInTheDocument();
    expect(screen.getByTestId('skeleton-album-cover')).toBeInTheDocument();
  });
});