test: component tests with jsdom and Testing Library

First tests cover the library search debounce (fails on the old looping
version), the Pile of Shame states and the backlog save body. jsdom is
enabled per test file, so the plain util tests stay in the node environment.

src/components/BacklogCard.test.jsx

@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import BacklogCard from './BacklogCard.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+const game = {appid: 220, status: 'PLAYING', rating: 4, notes: 'old', priority: null};
+const saveButton = () => screen.getByRole('button', {name: 'BACKLOG.SAVE'});
+
+describe('BacklogCard', () => {
+    beforeEach(() => {
+        localStorage.setItem('tbp_jwt', 'token');
+        globalThis.fetch = vi.fn(async (url, init) => ({ok: true, status: 200, json: async () => JSON.parse(init.body)}));
+    });
+
+    afterEach(() => {
+        cleanup();
+        localStorage.clear();
+    });
+
+    it('enables saving only after a change', () => {
+        render(<MemoryRouter><BacklogCard game={game}/></MemoryRouter>);
+        expect(saveButton().disabled).toBe(true);
+
+        fireEvent.click(screen.getByRole('button', {name: 'BACKLOG.RATING_STARS:5'}));
+
+        expect(saveButton().disabled).toBe(false);
+    });
+
+    it('clears the rating on a click on the current star and sends blank notes as null', async () => {
+        const onSaved = vi.fn();
+        render(<MemoryRouter><BacklogCard game={game} onSaved={onSaved}/></MemoryRouter>);
+
+        fireEvent.click(screen.getByRole('button', {name: 'BACKLOG.RATING_STARS:4'}));
+        fireEvent.change(screen.getByRole('textbox'), {target: {value: '   '}});
+        fireEvent.click(saveButton());
+
+        await waitFor(() => expect(onSaved).toHaveBeenCalled());
+        const [url, init] = fetch.mock.calls[0];
+        expect(url).toMatch(/\/api\/library\/games\/220\/backlog$/);
+        expect(init.method).toBe('PUT');
+        expect(JSON.parse(init.body)).toEqual({status: 'PLAYING', rating: null, notes: null, priority: null});
+        expect(saveButton().disabled).toBe(true);
+    });
+});

src/components/PileOfShameCard.test.jsx

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import PileOfShameCard from './PileOfShameCard.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+const summary = (backlog, extra = {}) => ({
+    total: backlog + 3,
+    neverPlayed: 1,
+    byStatus: {BACKLOG: backlog, PLAYING: 3, FINISHED: 0, COMPLETED: 0, DROPPED: 0},
+    suggestion: backlog > 0 ? {appid: 220, name: 'Half-Life 2'} : null,
+    ...extra,
+});
+
+const renderCard = (props) => render(<MemoryRouter><PileOfShameCard onShuffle={() => {}} {...props}/></MemoryRouter>);
+
+describe('PileOfShameCard', () => {
+    afterEach(cleanup);
+
+    it('shows the first-sync text instead of empty numbers while the first sync runs', () => {
+        renderCard({summary: {...summary(0), total: 0, byStatus: {BACKLOG: 0}}, syncing: true});
+
+        expect(screen.getByText('LIBRARY.SYNCING_FIRST_TIME')).toBeTruthy();
+        expect(screen.queryByText('DASHBOARD.BACKLOG_EMPTY')).toBeNull();
+    });
+
+    it('hides the shuffle button when there is nothing else to pick', () => {
+        renderCard({summary: summary(1)});
+
+        expect(screen.getByText('Half-Life 2')).toBeTruthy();
+        expect(screen.queryByRole('button', {name: /DASHBOARD.OTHER_SUGGESTION/})).toBeNull();
+    });
+
+    it('shuffles when the backlog has more than one game', () => {
+        const onShuffle = vi.fn();
+        renderCard({summary: summary(2), onShuffle});
+
+        fireEvent.click(screen.getByRole('button', {name: /DASHBOARD.OTHER_SUGGESTION/}));
+
+        expect(onShuffle).toHaveBeenCalledOnce();
+    });
+
+    it('says the backlog is empty when there is no suggestion', () => {
+        renderCard({summary: summary(0)});
+
+        expect(screen.getByText('DASHBOARD.BACKLOG_EMPTY')).toBeTruthy();
+    });
+});