ToBePlayed-Frontend/src/components/AppHeader.points.test.jsx

// @vitest-environment jsdom
import {afterEach, describe, expect, it, vi} from 'vitest';
import {cleanup, fireEvent, screen} from '@testing-library/react';
import AppHeader from './AppHeader.jsx';
import {usePreferences} from '../context/PreferencesContext.jsx';
import {fetchRoutes, json} from '../test/fetchRoutes.js';
import {renderWithProviders} from '../test/renderWithProviders.jsx';

vi.mock('react-i18next', () => import('../test/i18n-mock.js'));

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

function Load() {
    const {reloadWallet} = usePreferences();
    return <button onClick={reloadWallet}>load</button>;
}

async function loadChip(count) {
    localStorage.setItem('tbp_session', '1');
    fetchRoutes({
        'GET /api/users/me': json(200, {role: 'USER', activeRole: 'USER'}),
        'GET /api/library/steam-profile': json(200, {}),
        'GET /api/inbox': json(200, {results: [], unread: 0}),
        'GET /api/library/questions/count': json(200, {count}),
        'GET /api/rewards/wallet': json(200, {balance: 135, catalog: [], owned: [], equipped: {}, history: []}),
    });
    renderWithProviders(<><Load/><AppHeader isAuthenticated onLogout={() => {}}/></>);
    fireEvent.click(screen.getByText('load'));
    return screen.findByTitle('POINTS.TITLE: 135');
}

describe('AppHeader points chip', () => {
    it('hides the number below sm while the questions icon shows, and keeps the balance as label', async () => {
        const chip = await loadChip(2);
        await screen.findByRole('link', {name: 'NAV.QUESTIONS_OPEN:2'});

        expect(chip.getAttribute('aria-label')).toBe('POINTS.TITLE: 135');
        expect(screen.getByText('135').className).toContain('max-sm:hidden');
    });

    it('shows the number at every width while the questions icon is hidden', async () => {
        const chip = await loadChip(0);
        await screen.findByTitle('NAV.QUESTIONS');

        expect(chip.getAttribute('aria-label')).toBe('POINTS.TITLE: 135');
        expect(screen.getByText('135').className).not.toContain('max-sm:hidden');
    });

    it('shows the balance as a link to the points page once the wallet is loaded', async () => {
        localStorage.setItem('tbp_session', '1');
        fetchRoutes({
            'GET /api/users/me': json(200, {role: 'USER', activeRole: 'USER'}),
            'GET /api/library/steam-profile': json(200, {}),
            'GET /api/inbox': json(200, {results: [], unread: 0}),
            'GET /api/library/questions/count': json(200, {count: 0}),
            'GET /api/rewards/wallet': json(200, {balance: 135, catalog: [], owned: [], equipped: {}, history: []}),
        });
        renderWithProviders(<><Load/><AppHeader isAuthenticated onLogout={() => {}}/></>);
        expect(screen.queryByTitle('POINTS.TITLE')).toBeNull();

        fireEvent.click(screen.getByText('load'));

        const chip = await screen.findByTitle('POINTS.TITLE: 135');
        expect(chip.textContent).toBe('135');
        expect(chip.getAttribute('href')).toBe('/points');
    });
});