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

// jsdom has no canvas drawing.
beforeEach(() => {
    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
});

afterEach(() => {
    cleanup();
    vi.unstubAllGlobals();
    vi.restoreAllMocks();
});

const reducedMotion = (reduce) => vi.stubGlobal('matchMedia', (query) => ({
    matches: reduce && query.includes('prefers-reduced-motion'),
}));

describe('Confetti', () => {
    it('draws on a canvas hidden from screen readers', () => {
        reducedMotion(false);
        const {container} = render(<Confetti size="big"/>);

        const canvas = container.querySelector('canvas');
        expect(canvas.getAttribute('aria-hidden')).toBe('true');
        expect(canvas.dataset.size).toBe('big');
    });

    it('draws nothing when the user asked for reduced motion', () => {
        reducedMotion(true);
        const {container} = render(<Confetti size="small"/>);

        expect(container.querySelector('canvas')).toBeNull();
    });

    it('draws nothing when the reduce animations setting is on', () => {
        reducedMotion(false);
        document.documentElement.setAttribute('data-reduce-motion', '');
        const {container} = render(<Confetti size="small"/>);
        document.documentElement.removeAttribute('data-reduce-motion');

        expect(container.querySelector('canvas')).toBeNull();
    });
});