import { describe, it, expect, afterEach } from 'vitest';
import { render, screen, cleanup } from '@testing-library/svelte';
import RecommendationShelf from './RecommendationShelf.svelte';
import type { MangaCard } from '$lib/api/mangas';

afterEach(() => cleanup());

function manga(id: string, title: string): MangaCard {
    return {
        id,
        title,
        status: 'ongoing',
        alt_titles: [],
        description: null,
        cover_image_path: null,
        created_at: '2026-01-01T00:00:00Z',
        updated_at: '2026-01-01T00:00:00Z',
        authors: [],
        genres: []
    };
}

describe('RecommendationShelf', () => {
    it('renders a card per recommendation under a heading', () => {
        render(RecommendationShelf, {
            props: { mangas: [manga('m1', 'Berserk'), manga('m2', 'Vinland')] }
        });
        expect(screen.getByRole('heading', { name: /recommended for you/i })).toBeTruthy();
        expect(screen.getByTestId('rec-card-m1')).toBeTruthy();
        expect(screen.getByTestId('rec-card-m2')).toBeTruthy();
        expect(screen.getByText('Berserk')).toBeTruthy();
        expect(screen.getByText('Vinland')).toBeTruthy();
    });
});
