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

afterEach(() => cleanup());

describe('MangaGridSkeleton', () => {
    it('renders 12 card skeletons by default', () => {
        render(MangaGridSkeleton);
        const root = screen.getByTestId('manga-grid-skeleton');
        expect(root.querySelectorAll('.manga-card').length).toBe(12);
    });

    it('honours the count prop', () => {
        render(MangaGridSkeleton, { props: { count: 4 } });
        const root = screen.getByTestId('manga-grid-skeleton');
        expect(root.querySelectorAll('.manga-card').length).toBe(4);
    });

    it('reuses the shared .manga-grid layout class', () => {
        render(MangaGridSkeleton);
        expect(screen.getByTestId('manga-grid-skeleton').classList.contains('manga-grid')).toBe(
            true
        );
    });

    it('is decorative so the container announces loading', () => {
        render(MangaGridSkeleton);
        expect(screen.getByTestId('manga-grid-skeleton').getAttribute('aria-hidden')).toBe('true');
    });

    it('reserves each cover as a 2/3 aspect box, not a collapsed zero-height one', () => {
        render(MangaGridSkeleton, { props: { count: 1 } });
        const card = screen
            .getByTestId('manga-grid-skeleton')
            .querySelector('.manga-card') as HTMLElement;
        const cover = card.firstElementChild as HTMLElement;
        expect(cover.style.aspectRatio).toBe('2 / 3');
        // A definite height:0 would make aspect-ratio a no-op and collapse
        // the cover — the exact layout-shift regression this guards.
        expect(cover.style.height).toBe('');
    });
});
