import { describe, it, expect, afterEach } from 'vitest';
import { render, screen, cleanup } from '@testing-library/svelte';
import ListRowSkeleton from './ListRowSkeleton.svelte';

afterEach(() => cleanup());

describe('ListRowSkeleton', () => {
    it('renders the requested number of rows', () => {
        render(ListRowSkeleton, { props: { count: 5, testid: 'sk' } });
        expect(screen.getByTestId('sk').querySelectorAll('.row').length).toBe(5);
    });

    it('defaults to 6 rows and is decorative', () => {
        render(ListRowSkeleton, { props: { testid: 'sk' } });
        const el = screen.getByTestId('sk');
        expect(el.querySelectorAll('.row').length).toBe(6);
        expect(el.getAttribute('aria-hidden')).toBe('true');
    });

    it('applies the cover width to the row template', () => {
        render(ListRowSkeleton, { props: { coverWidth: '80px', testid: 'sk' } });
        const row = screen.getByTestId('sk').querySelector('.row') as HTMLElement;
        expect(row.style.gridTemplateColumns).toBe('80px 1fr');
    });
});
