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

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

vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));

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

const follows = {following: [{id: 5, displayName: 'Lobo'}], followers: [{id: 6, displayName: 'Wolf'}, {id: 7, displayName: null}]};

describe('FollowsCard', () => {
    it('listsBothSidesWithLinksAndPrivateFollowersWithoutAName', async () => {
        fetchRoutes({'GET /api/follows': json(200, follows)});
        renderWithProviders(<FollowsCard/>);

        expect((await screen.findByRole('link', {name: 'Lobo'})).getAttribute('href')).toBe('/u/Lobo');
        expect(screen.getByRole('link', {name: 'Wolf'}).getAttribute('href')).toBe('/u/Wolf');
        expect(screen.getByText('FOLLOW.PRIVATE_USER')).toBeTruthy();
    });

    it('unfollowsByRowIdAndLoadsTheListAgain', async () => {
        let answered = follows;
        fetchRoutes({'GET /api/follows': () => json(200, answered),
            'DELETE /api/follows/5': () => {
                answered = {...follows, following: []};
                return json(204);
            }});
        renderWithProviders(<FollowsCard/>);

        fireEvent.click(await screen.findByRole('button', {name: 'FOLLOW.UNFOLLOW'}));

        await waitFor(() => expect(screen.queryByRole('link', {name: 'Lobo'})).toBeNull());
        expect(screen.getByText('FOLLOW.NO_FOLLOWING')).toBeTruthy();
    });

    it('removesAFollowerByRowId', async () => {
        fetchRoutes({'GET /api/follows': json(200, follows), 'DELETE /api/follows/7': json(204)});
        renderWithProviders(<FollowsCard/>);

        fireEvent.click((await screen.findAllByRole('button', {name: 'FOLLOW.REMOVE'}))[1]);

        await waitFor(() => expect(fetch.mock.calls.filter(([, init]) => init?.method === 'DELETE')).toHaveLength(1));
    });

    it('saysSoWhenTheListDoesNotLoad', async () => {
        fetchRoutes({'GET /api/follows': json(500, {})});
        renderWithProviders(<FollowsCard/>);

        expect(await screen.findByText('FOLLOW.LOAD_ERROR')).toBeTruthy();
    });
});