// @vitest-environment jsdom
import {afterEach, describe, expect, it} from 'vitest';
import {cleanup, fireEvent, render} from '@testing-library/react';
import HeroArt from './HeroArt.jsx';
import PageBackground from './PageBackground.jsx';

afterEach(cleanup);

describe('HeroArt', () => {
    it('shows the library art, then the store header, then nothing', () => {
        const {container} = render(<HeroArt appid={620}/>);
        const img = () => container.querySelector('img');
        expect(img().getAttribute('src')).toContain('/620/library_hero.jpg');

        fireEvent.error(img());
        expect(img().getAttribute('src')).toContain('/620/header.jpg');

        fireEvent.error(img());
        expect(img()).toBeNull();
    });
});

describe('PageBackground', () => {
    it('shows nothing without a game', () => {
        const {container} = render(<PageBackground appid={null}/>);

        expect(container.innerHTML).toBe('');
    });

    it('shows a worn animated background instead of the art', () => {
        const {container} = render(<PageBackground appid={620} effect="aurora"/>);

        expect(container.querySelector('[data-effect="aurora"]')).not.toBeNull();
        expect(container.querySelector('img')).toBeNull();
    });

    it('starts with the library art again for another game', () => {
        const {container, rerender} = render(<PageBackground appid={620}/>);
        fireEvent.error(container.querySelector('img'));

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

        expect(container.querySelector('img').getAttribute('src')).toContain('/220/library_hero.jpg');
    });
});