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

afterEach(() => cleanup());

describe('MangaDetailSkeleton', () => {
    it('renders the overview + a default of 6 chapter-row placeholders', () => {
        render(MangaDetailSkeleton);
        const root = screen.getByTestId('manga-detail-skeleton');
        expect(root.querySelector('.overview')).not.toBeNull();
        expect(root.querySelectorAll('.chapter-list li').length).toBe(6);
    });

    it('honours the chapters prop', () => {
        render(MangaDetailSkeleton, { props: { chapters: 3 } });
        expect(
            screen.getByTestId('manga-detail-skeleton').querySelectorAll('.chapter-list li').length
        ).toBe(3);
    });

    it('is decorative (aria-hidden)', () => {
        render(MangaDetailSkeleton);
        expect(screen.getByTestId('manga-detail-skeleton').getAttribute('aria-hidden')).toBe('true');
    });
});
