ToBePlayed-Frontend/src/components/AppearanceCard.test.jsx

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

const preferences = vi.hoisted(() => ({value: null}));
vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
vi.mock('../context/PreferencesContext.jsx', () => ({usePreferences: () => preferences.value}));
vi.mock('../hooks/useSaveAppearance.js', () => ({default: () => vi.fn()}));

const show = (equipped, reduceMotion = false) => {
    preferences.value = {
        appearance: {accent: 'violet', corners: 'default', wideLayout: false, reduceMotion, showBanner: true},
        equipped,
    };
    render(<AppearanceCard/>);
};

afterEach(() => {
    cleanup();
    localStorage.clear();
    delete window.DeviceOrientationEvent;
});

describe('AppearanceCard', () => {
    it('tells that the skin sets colors and corners only while a skin is worn', () => {
        show({SKIN: 'SKIN_STEAM'});
        expect(screen.getByText('SETTINGS.SKIN_OVERRIDES')).toBeTruthy();
    });

    it('shows no skin hint without a skin', () => {
        show({});
        expect(screen.queryByText('SETTINGS.SKIN_OVERRIDES')).toBeNull();
    });

    describe('tilt effects', () => {
        const stubPermission = (answer) => {
            window.DeviceOrientationEvent = {requestPermission: vi.fn().mockResolvedValue(answer)};
            return window.DeviceOrientationEvent.requestPermission;
        };

        it('has no tilt switch where the browser needs no permission', () => {
            show({});
            expect(document.querySelector('#tilt')).toBeNull();
        });

        it('asks for permission on the tap, then shows the switch on and stores it', async () => {
            const request = stubPermission('granted');
            show({});

            fireEvent.click(document.querySelector('#tilt'));

            expect(request).toHaveBeenCalledTimes(1);
            await waitFor(() => expect(document.querySelector('#tilt').getAttribute('aria-checked')).toBe('true'));
            expect(localStorage.getItem('tbp_tilt')).toBe('true');
        });

        it('stays off and tells why when the permission is refused', async () => {
            stubPermission('denied');
            show({});

            fireEvent.click(document.querySelector('#tilt'));

            await waitFor(() => expect(screen.getByText('SETTINGS.TILT_DENIED')).toBeTruthy());
            expect(document.querySelector('#tilt').getAttribute('aria-checked')).toBe('false');
        });

        it('is disabled while animations are reduced', () => {
            stubPermission('granted');
            show({}, true);

            expect(document.querySelector('#tilt').disabled).toBe(true);
        });
    });
});