// @vitest-environment jsdom
import {afterEach, describe, expect, it, vi} from 'vitest';
import {cleanup, fireEvent, render} from '@testing-library/react';
import GameCover from './GameCover.jsx';
import {reportBrokenImage} from '../utils/brokenImages.js';

vi.mock('../utils/brokenImages.js', () => ({COVER: 'COVER', reportBrokenImage: vi.fn()}));

afterEach(() => {
    cleanup();
    vi.clearAllMocks();
});

describe('GameCover', () => {
    it('prefers the stored picture over the Steam header', () => {
        const {container} = render(<GameCover appid={620} imageUrl="https://shared.akamai.steamstatic.com/x/header.jpg"/>);

        expect(container.querySelector('img').getAttribute('src')).toBe('https://shared.akamai.steamstatic.com/x/header.jpg');
    });

    it('reports a picture that does not load and shows the placeholder', () => {
        const {container} = render(<GameCover appid={620}/>);

        fireEvent.error(container.querySelector('img'));

        expect(reportBrokenImage).toHaveBeenCalledWith(620, 'COVER');
        expect(container.querySelector('img')).toBeNull();
        expect(container.querySelector('svg')).toBeTruthy();
    });

    it('loads the picture of the next game after a failed one', () => {
        const {container, rerender} = render(<GameCover appid={620}/>);
        fireEvent.error(container.querySelector('img'));

        rerender(<GameCover appid={220}/>);

        expect(container.querySelector('img').getAttribute('src')).toContain('/220/header.jpg');
        fireEvent.error(container.querySelector('img'));
        expect(reportBrokenImage).toHaveBeenCalledWith(220, 'COVER');
    });
});