feat(play-next): page that picks the next backlog game

src/pages/PlayNextPage.language.test.jsx

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen, waitFor} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import PlayNextPage from './PlayNextPage.jsx';
+import {PreferencesProvider} from '../context/PreferencesContext.jsx';
+
+// react-i18next hands out a new `t` on every language change; this mock does the same on demand.
+const i18n = {language: 'de', t: (key) => key};
+vi.mock('react-i18next', () => ({useTranslation: () => ({t: i18n.t, i18n})}));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+const game = (appid) => ({appid, name: `Game ${appid}`, playtimeMinutes: 0, status: 'BACKLOG', rating: null,
+    priority: null, timeToBeatMinutes: 600});
+
+const pickerCalls = () => globalThis.fetch.mock.calls.filter(([url]) => url.includes('/api/library/picker')).length;
+
+describe('PlayNextPage on a language change', () => {
+    beforeEach(() => {
+        localStorage.setItem('tbp_jwt', 'token');
+        i18n.t = (key) => key;
+        globalThis.fetch = vi.fn(async () => ({ok: true, status: 200, json: async () => ({games: [game(1)]})}));
+    });
+
+    afterEach(() => {
+        cleanup();
+        localStorage.clear();
+    });
+
+    it('keeps the picks when the language changes', async () => {
+        const {rerender} = render(<MemoryRouter><PreferencesProvider><PlayNextPage/></PreferencesProvider></MemoryRouter>);
+        await screen.findByText('Game 1');
+        expect(pickerCalls()).toBe(1);
+
+        i18n.language = 'en';
+        i18n.t = (key) => key;
+        rerender(<MemoryRouter><PreferencesProvider><PlayNextPage/></PreferencesProvider></MemoryRouter>);
+
+        await waitFor(() => expect(screen.getByText('Game 1')).toBeTruthy());
+        expect(pickerCalls()).toBe(1);
+    });
+});