);
return {
navigations: () => lib.navigations,
params: () => new URLSearchParams(lib.location.search),
@@ -42,7 +48,7 @@ const typeInto = (value) => fireEvent.change(screen.getByRole('searchbox'), {tar
beforeEach(() => {
localStorage.setItem('tbp_session', '1');
- globalThis.fetch = vi.fn(async () => ({ok: true, status: 200, json: async () => page}));
+ answer();
});
afterEach(() => {
@@ -52,10 +58,10 @@ afterEach(() => {
describe('GameLibrary search', () => {
it('shows the achievement progress of a game when it is known', async () => {
- globalThis.fetch = vi.fn(async () => ({ok: true, status: 200, json: async () => ({...page, content: [
+ answer([
{...page.content[0], achievementsUnlocked: 3, achievementsTotal: 4},
{appid: 620, name: 'Portal 2', playtimeMinutes: 0, status: 'BACKLOG', achievementsUnlocked: null, achievementsTotal: 5},
- ]})}));
+ ]);
renderLibrary();
expect(await screen.findByText('3/4')).toBeTruthy();
@@ -100,7 +106,7 @@ describe('GameLibrary search', () => {
typeInto('half');
await waitFor(() => expect(lib.params().get('q')).toBe('half'));
- act(() => lib.back());
+ await act(async () => lib.back());
await waitFor(() => expect(screen.getByRole('searchbox').value).toBe(''));
});
@@ -161,7 +167,7 @@ describe('GameLibrary short games', () => {
});
it('says so when no game is hidden', async () => {
- globalThis.fetch = vi.fn(async () => ({ok: true, status: 200, json: async () => ({...page, content: [], totalElements: 0, totalPages: 0})}));
+ answer([]);
renderLibrary('/library?hidden=true');
expect(await screen.findByText('LIBRARY.NO_HIDDEN')).toBeTruthy();
@@ -169,15 +175,11 @@ describe('GameLibrary short games', () => {
});
describe('GameLibrary with games added by hand', () => {
- const answer = (games, hasSteamId) => vi.fn(async (url) => ({
- ok: true, status: 200,
- json: async () => (String(url).includes('/games-count') ? {count: games.length, hasSteamId} : {...page, content: games}),
- }));
const zelda = {appid: -1025, name: 'Zelda', playtimeMinutes: 90, status: 'BACKLOG', source: 'MANUAL',
platform: 'Nintendo Switch', imageUrl: 'https://images.igdb.com/z.jpg'};
it('shows the platform and the IGDB picture of a manual game', async () => {
- globalThis.fetch = answer([zelda], true);
+ answer([zelda], true);
renderLibrary();
expect(await screen.findByText('Nintendo Switch')).toBeTruthy();
@@ -185,7 +187,7 @@ describe('GameLibrary with games added by hand', () => {
});
it('shows Steam as the platform of a Steam game, and links the import', async () => {
- globalThis.fetch = answer([{appid: 220, name: 'Half-Life 2', playtimeMinutes: 0, status: 'BACKLOG', source: 'STEAM',
+ answer([{appid: 220, name: 'Half-Life 2', playtimeMinutes: 0, status: 'BACKLOG', source: 'STEAM',
platform: null}], true);
renderLibrary();
@@ -194,7 +196,7 @@ describe('GameLibrary with games added by hand', () => {
});
it('hides the Steam sync for a user without a Steam ID but still offers adding a game', async () => {
- globalThis.fetch = answer([zelda], false);
+ answer([zelda], false);
renderLibrary();
await screen.findByText('Zelda');
@@ -203,7 +205,7 @@ describe('GameLibrary with games added by hand', () => {
});
it('opens the add panel', async () => {
- globalThis.fetch = answer([zelda], true);
+ answer([zelda], true);
renderLibrary();
fireEvent.click(await screen.findByRole('button', {name: 'MANUAL_GAME.ADD_BUTTON'}));
diff --git a/src/pages/LoginPage.test.jsx b/src/pages/LoginPage.test.jsx
index 74cb5bd..915cd82 100644
--- a/src/pages/LoginPage.test.jsx
+++ b/src/pages/LoginPage.test.jsx
@@ -3,6 +3,7 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
import {MemoryRouter, Route, Routes, useLocation} from 'react-router-dom';
import LoginPage from './LoginPage.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
@@ -22,6 +23,9 @@ function renderLogin(state) {
);
}
+// The page reads Retry-After from a refusal.
+const refused = (status, code) => ({...json(status, {code}), headers: new Headers()});
+
function submit() {
fireEvent.change(screen.getByLabelText('LOGIN.EMAIL'), {target: {value: 'a@b.de'}});
fireEvent.change(screen.getByLabelText('LOGIN.PASSWORD'), {target: {value: 'secret'}});
@@ -30,7 +34,7 @@ function submit() {
describe('LoginPage', () => {
beforeEach(() => {
- globalThis.fetch = vi.fn(async () => ({ok: true, status: 200, json: async () => ({message: 'Login successful'})}));
+ fetchRoutes({'POST /api/auth/login': json(200, {message: 'Login successful'})});
});
afterEach(() => {
@@ -72,7 +76,7 @@ describe('LoginPage', () => {
});
it('hides the expired message once a login attempt fails', async () => {
- fetch.mockResolvedValueOnce({ok: false, status: 401, headers: new Headers(), json: async () => ({code: 'INVALID_CREDENTIALS'})});
+ fetchRoutes({'POST /api/auth/login': refused(401, 'INVALID_CREDENTIALS')});
renderLogin({sessionExpired: true, from: '/library'});
submit();
@@ -82,7 +86,7 @@ describe('LoginPage', () => {
});
it('says that a blocked account is blocked', async () => {
- fetch.mockResolvedValueOnce({ok: false, status: 403, headers: new Headers(), json: async () => ({code: 'ACCOUNT_BLOCKED'})});
+ fetchRoutes({'POST /api/auth/login': refused(403, 'ACCOUNT_BLOCKED')});
renderLogin();
submit();
diff --git a/src/pages/PlayNextPage.language.test.jsx b/src/pages/PlayNextPage.language.test.jsx
index 461c369..50ac28f 100644
--- a/src/pages/PlayNextPage.language.test.jsx
+++ b/src/pages/PlayNextPage.language.test.jsx
@@ -3,6 +3,7 @@ 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 {fetchRoutes, json} from '../test/fetchRoutes.js';
import {PreferencesProvider} from '../context/PreferencesContext.jsx';
// react-i18next hands out a new `t` on every language change; this mock does the same on demand.
@@ -19,7 +20,7 @@ describe('PlayNextPage on a language change', () => {
beforeEach(() => {
localStorage.setItem('tbp_session', '1');
i18n.t = (key) => key;
- globalThis.fetch = vi.fn(async () => ({ok: true, status: 200, json: async () => ({games: [game(1)]})}));
+ fetchRoutes({'GET /api/library/picker': json(200, {games: [game(1)]})});
});
afterEach(() => {
diff --git a/src/pages/PlayNextPage.test.jsx b/src/pages/PlayNextPage.test.jsx
index e64111e..154a4b4 100644
--- a/src/pages/PlayNextPage.test.jsx
+++ b/src/pages/PlayNextPage.test.jsx
@@ -4,6 +4,7 @@ import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/reac
import {MemoryRouter} from 'react-router-dom';
import PlayNextPage from './PlayNextPage.jsx';
import {PreferencesProvider} from '../context/PreferencesContext.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
@@ -13,15 +14,13 @@ const game = (appid, extra = {}) => ({
timeToBeatMinutes: 600, ...extra,
});
-const json = (body, status = 200) => ({ok: status < 400, status, json: async () => body});
-
-// Answers each picker call with the next list and records every request.
-function mockBackend(pickerAnswers, detail = null) {
+// Answers each picker call with the next list.
+function mockBackend(pickerAnswers, routes = {}) {
const answers = [...pickerAnswers];
- globalThis.fetch = vi.fn(async (url, options = {}) => {
- if (url.includes('/api/library/picker')) return json({games: answers.shift() ?? []});
- if (options.method === 'PUT') return json(JSON.parse(options.body));
- return json(detail);
+ fetchRoutes({
+ 'GET /api/library/picker': () => json(200, {games: answers.shift() ?? []}),
+ 'PUT /api/library/games/7/status': (url, init) => json(200, JSON.parse(init.body)),
+ ...routes,
});
}
@@ -135,10 +134,8 @@ describe('PlayNextPage', () => {
});
it('drops the old picks when a new budget fails to load', async () => {
- mockBackend([[game(1)]]);
- const pickerFetch = globalThis.fetch;
- globalThis.fetch = vi.fn(async (url, options) =>
- (url.includes('maxMinutes=300') ? json({}, 500) : pickerFetch(url, options)));
+ mockBackend([], {'GET /api/library/picker': (url) =>
+ (url.includes('maxMinutes=300') ? json(500, {}) : json(200, {games: [game(1)]}))});
renderPage();
await screen.findByText('Game 1');
@@ -195,10 +192,7 @@ describe('PlayNextPage', () => {
});
it('lets the user try again when saving fails', async () => {
- mockBackend([[game(7)]]);
- const pickerFetch = globalThis.fetch;
- globalThis.fetch = vi.fn(async (url, options) =>
- (options?.method === 'PUT' ? json({}, 500) : pickerFetch(url, options)));
+ mockBackend([[game(7)]], {'PUT /api/library/games/7/status': json(500, {})});
renderPage();
await screen.findByText('Game 7');
@@ -224,7 +218,7 @@ describe('PlayNextPage', () => {
});
it('offers a retry when the first load fails', async () => {
- globalThis.fetch = vi.fn(async () => { throw new TypeError('Failed to fetch'); });
+ mockBackend([], {'GET /api/library/picker': () => { throw new TypeError('Failed to fetch'); }});
renderPage();
await screen.findByText('INFO.ERROR.NETWORK_FAILURE');
diff --git a/src/pages/PublicProfilePage.test.jsx b/src/pages/PublicProfilePage.test.jsx
index 660c679..8881130 100644
--- a/src/pages/PublicProfilePage.test.jsx
+++ b/src/pages/PublicProfilePage.test.jsx
@@ -1,10 +1,9 @@
// @vitest-environment jsdom
import {afterEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
-import {MemoryRouter, Route, Routes} from 'react-router-dom';
+import {cleanup, fireEvent, screen, waitFor} from '@testing-library/react';
import PublicProfilePage from './PublicProfilePage.jsx';
-import {PreferencesProvider} from '../context/PreferencesContext.jsx';
-import {CurrentUserProvider} from '../context/CurrentUserContext.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
@@ -15,29 +14,26 @@ const library = {
finished: [{appid: 620, name: 'Portal 2', playtimeMinutes: 900, status: 'COMPLETED', rating: 5}],
};
-function mockBackends({profileStatus = 200, libraryStatus = 200, style, answer = library, me} = {}) {
- globalThis.fetch = vi.fn(async (url, init) => {
- if (init?.method === 'PUT') return {ok: true, status: 204, json: async () => ({})};
- if (url.includes('/api/users/me')) return {ok: !!me, status: me ? 200 : 401, json: async () => me};
- if (url.includes('/api/public/profiles/library')) {
- return {ok: libraryStatus === 200, status: libraryStatus, json: async () => answer};
- }
- return {ok: profileStatus === 200, status: profileStatus,
- json: async () => ({displayName: 'Lobo', memberSince: '2026-03-02', ticket: 'the-ticket', style})};
+// `me` only for a test with a session: without one the page asks nothing about the viewer.
+function mockBackends({name = 'Lobo', profileStatus = 200, libraryStatus = 200, style, answer = library, me} = {}) {
+ fetchRoutes({
+ [`GET /api/public/profiles/${encodeURIComponent(name)}`]:
+ json(profileStatus, {displayName: 'Lobo', memberSince: '2026-03-02', ticket: 'the-ticket', style}),
+ 'GET /api/public/profiles/library': json(libraryStatus, answer),
+ ...(me && {
+ 'GET /api/users/me': json(200, me),
+ 'PUT /api/users/settings/profile-tiles': json(204, {}),
+ }),
});
}
-const renderPage = (name = 'Lobo') => render(
-
- }/>
- ,
-);
+const renderPage = (name = 'Lobo') => renderWithProviders(, {path: '/u/:name', entries: [`/u/${name}`]});
describe('PublicProfilePage', () => {
afterEach(cleanup);
it('asks Auth for the ticket, then Core for the library with it', async () => {
- mockBackends();
+ mockBackends({name: 'Lo bo'});
renderPage('Lo bo');
expect(await screen.findByText('Portal 2')).toBeTruthy();
diff --git a/src/pages/RegistrationPage.test.jsx b/src/pages/RegistrationPage.test.jsx
index eca6d32..fd73e88 100644
--- a/src/pages/RegistrationPage.test.jsx
+++ b/src/pages/RegistrationPage.test.jsx
@@ -3,6 +3,7 @@ import {afterEach, describe, expect, it, vi} from 'vitest';
import {cleanup, fireEvent, render, screen} from '@testing-library/react';
import {MemoryRouter} from 'react-router-dom';
import RegistrationPage from './RegistrationPage.jsx';
+import {fetchRoutes} from '../test/fetchRoutes.js';
// Own mock: the shared one drops the {{minutes}} value this test checks.
vi.mock('react-i18next', () => ({
@@ -12,14 +13,10 @@ vi.mock('react-i18next', () => ({
}),
}));
-function errorResponse(status, code, headers = {}, message = undefined) {
- return {
- ok: false,
- status,
- headers: new Headers(headers),
- json: async () => ({code, message}),
- };
-}
+// Not `json` from fetchRoutes: the page reads Retry-After from the headers.
+const answerRegistration = (status, code, headers = {}, message = undefined) => fetchRoutes({
+ 'POST /api/registration/new': {ok: false, status, headers: new Headers(headers), json: async () => ({code, message})},
+});
function submitValidForm() {
render();
@@ -36,7 +33,7 @@ describe('RegistrationPage', () => {
});
it('shows the wait time when the IP is blocked', async () => {
- globalThis.fetch = vi.fn(async () => errorResponse(429, 'TOO_MANY_ATTEMPTS', {'Retry-After': '900'}));
+ answerRegistration(429, 'TOO_MANY_ATTEMPTS', {'Retry-After': '900'});
submitValidForm();
@@ -44,7 +41,7 @@ describe('RegistrationPage', () => {
});
it('asks for no Steam ID and sends none', async () => {
- globalThis.fetch = vi.fn(async () => errorResponse(400, 'INVALID_INVITATION_CODE'));
+ answerRegistration(400, 'INVALID_INVITATION_CODE');
submitValidForm();
@@ -54,7 +51,7 @@ describe('RegistrationPage', () => {
});
it('maps a known backend error to its message', async () => {
- globalThis.fetch = vi.fn(async () => errorResponse(400, 'INVALID_INVITATION_CODE'));
+ answerRegistration(400, 'INVALID_INVITATION_CODE');
submitValidForm();
@@ -62,7 +59,7 @@ describe('RegistrationPage', () => {
});
it('shows its own text, not the English one of the server, for a refused input', async () => {
- globalThis.fetch = vi.fn(async () => errorResponse(400, 'VALIDATION_FAILED', {}, 'The request is not valid'));
+ answerRegistration(400, 'VALIDATION_FAILED', {}, 'The request is not valid');
submitValidForm();
diff --git a/src/pages/SettingsPage.steam.test.jsx b/src/pages/SettingsPage.steam.test.jsx
index bdbe572..3844d92 100644
--- a/src/pages/SettingsPage.steam.test.jsx
+++ b/src/pages/SettingsPage.steam.test.jsx
@@ -1,11 +1,10 @@
// @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 {cleanup, fireEvent, screen, waitFor} from '@testing-library/react';
import {toast} from 'sonner';
import SettingsPage from './SettingsPage.jsx';
-import {PreferencesProvider} from '../context/PreferencesContext.jsx';
-import {CurrentUserProvider} from '../context/CurrentUserContext.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
vi.mock('react-i18next', async () => {
const mock = await import('../test/i18n-mock.js');
@@ -23,17 +22,18 @@ const profile = (overrides = {}) => ({
const calls = (method) => fetch.mock.calls.filter(([, init]) => init?.method === method);
+const noBody = {ok: true, status: 204, json: async () => { throw new SyntaxError('no body'); }};
+
function renderPage(me, {redirectUrl = STEAM_URL, entry = '/settings'} = {}) {
- globalThis.fetch = vi.fn(async (url, init) => {
- if (init?.method === 'POST' && url.endsWith('/api/users/steam-link')) {
- return {ok: true, status: 200, json: async () => ({redirectUrl})};
- }
- if (init?.method && init.method !== 'GET') {
- return {ok: true, status: 204, json: async () => { throw new SyntaxError('no body'); }};
- }
- return {ok: true, status: 200, json: async () => me};
+ fetchRoutes({
+ 'GET /api/users/me': json(200, me),
+ 'POST /api/users/steam-link': json(200, {redirectUrl}),
+ 'DELETE /api/users/steam-link': noBody,
+ 'PUT /api/users/settings': noBody,
+ 'POST /api/auth/refresh': noBody,
+ 'GET /api/version': json(404, {}),
});
- render();
+ renderWithProviders(, {path: '/settings', entries: [entry]});
}
describe('SettingsPage Steam account', () => {
diff --git a/src/pages/SettingsPage.steamToast.test.jsx b/src/pages/SettingsPage.steamToast.test.jsx
index 77e2801..c38bf90 100644
--- a/src/pages/SettingsPage.steamToast.test.jsx
+++ b/src/pages/SettingsPage.steamToast.test.jsx
@@ -1,11 +1,10 @@
// @vitest-environment jsdom
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {act, cleanup, render, screen} from '@testing-library/react';
-import {MemoryRouter} from 'react-router-dom';
+import {act, cleanup, screen} from '@testing-library/react';
import {toast} from 'sonner';
import SettingsPage from './SettingsPage.jsx';
-import {PreferencesProvider} from '../context/PreferencesContext.jsx';
-import {CurrentUserProvider} from '../context/CurrentUserContext.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
// Like react-i18next: a language change re-renders every subscriber with a fresh `t`.
vi.mock('react-i18next', async () => {
@@ -33,9 +32,11 @@ const profile = {
describe('SettingsPage Steam toast', () => {
beforeEach(() => {
localStorage.setItem('tbp_session', '1');
- globalThis.fetch = vi.fn(async (url, init) => (init?.method && init.method !== 'GET'
- ? {ok: true, status: 204, json: async () => { throw new SyntaxError('no body'); }}
- : {ok: true, status: 200, json: async () => profile}));
+ fetchRoutes({
+ 'GET /api/users/me': json(200, profile),
+ 'POST /api/auth/refresh': {ok: true, status: 204, json: async () => { throw new SyntaxError('no body'); }},
+ 'GET /api/version': json(404, {}),
+ });
});
afterEach(() => {
@@ -45,7 +46,7 @@ describe('SettingsPage Steam toast', () => {
});
it('shows the linked toast once, also after a language change', async () => {
- render();
+ renderWithProviders(, {path: '/settings', entries: ['/settings?steam=linked']});
await screen.findByText('SETTINGS.STEAM_LINK.VERIFIED');
expect(toast.success).toHaveBeenCalledTimes(1);
diff --git a/src/pages/SettingsPage.test.jsx b/src/pages/SettingsPage.test.jsx
index 1f8ae9b..74a65d9 100644
--- a/src/pages/SettingsPage.test.jsx
+++ b/src/pages/SettingsPage.test.jsx
@@ -1,10 +1,9 @@
// @vitest-environment jsdom
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {act, cleanup, fireEvent, render, screen, waitFor, within} from '@testing-library/react';
-import {MemoryRouter} from 'react-router-dom';
+import {act, cleanup, fireEvent, screen, waitFor, within} from '@testing-library/react';
import SettingsPage from './SettingsPage.jsx';
-import {PreferencesProvider} from '../context/PreferencesContext.jsx';
-import {CurrentUserProvider} from '../context/CurrentUserContext.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
vi.mock('react-i18next', async () => {
const mock = await import('../test/i18n-mock.js');
@@ -22,12 +21,21 @@ const appearanceCard = () => within(screen.getByText('SETTINGS.APPEARANCE').clos
const puts = () => fetch.mock.calls.filter(([, init]) => init?.method === 'PUT').map(([, init]) => JSON.parse(init.body));
+// Every PUT answers 204 without a body, like Auth does.
+const noBody = {ok: true, status: 204, json: async () => { throw new SyntaxError('no body'); }};
+
+const authRoutes = (me) => ({
+ 'GET /api/users/me': () => json(200, me()),
+ 'PUT /api/users/settings': noBody,
+ 'PUT /api/users/settings/appearance': noBody,
+ 'PUT /api/users/settings/profile-style': noBody,
+ 'PUT /api/users/settings/favorite-platform': noBody,
+ 'GET /api/version': json(404, {}),
+});
+
function renderPage(me) {
- globalThis.fetch = vi.fn(async (url, init) => (init?.method === 'PUT'
- // Both PUTs answer 204 without a body, like Auth does.
- ? {ok: true, status: 204, json: async () => { throw new SyntaxError('no body'); }}
- : {ok: true, status: 200, json: async () => me}));
- render();
+ fetchRoutes(authRoutes(() => me));
+ renderWithProviders();
}
/**
@@ -36,14 +44,14 @@ function renderPage(me) {
function fakeAuth(me) {
const saved = structuredClone(me);
const open = [];
- globalThis.fetch = vi.fn((url, init) => {
- if (init?.method !== 'PUT') return Promise.resolve({ok: true, status: 200, json: async () => structuredClone(saved)});
- return new Promise((resolve) => open.push(() => {
+ fetchRoutes({
+ ...authRoutes(() => structuredClone(saved)),
+ 'PUT /api/users/settings': (url, init) => new Promise((resolve) => open.push(() => {
const body = JSON.parse(init.body);
saved.displayName = body.displayName;
Object.assign(saved.settings, {useDarkTheme: body.useDarkTheme, language: body.language, publicProfile: body.publicProfile});
- resolve({ok: true, status: 204, json: async () => { throw new SyntaxError('no body'); }});
- }));
+ resolve(noBody);
+ })),
});
return {answer: () => open.shift()()};
}
@@ -67,7 +75,7 @@ describe('SettingsPage public profile', () => {
it('builds a save on the one before it, also while that one is still open', async () => {
const auth = fakeAuth(profile());
- render();
+ renderWithProviders();
fireEvent.click(await screen.findByRole('switch', {name: 'SETTINGS.PUBLIC_PROFILE'}));
await waitFor(() => expect(puts()).toHaveLength(1));
diff --git a/src/pages/StatsPage.test.jsx b/src/pages/StatsPage.test.jsx
index 5477925..aaff1b6 100644
--- a/src/pages/StatsPage.test.jsx
+++ b/src/pages/StatsPage.test.jsx
@@ -4,10 +4,11 @@ import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/reac
import {MemoryRouter} from 'react-router-dom';
import StatsPage from './StatsPage.jsx';
import {PreferencesProvider} from '../context/PreferencesContext.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
-const json = (body, status = 200) => ({ok: status < 400, status, json: async () => body});
+const answerStats = (answer) => fetchRoutes({'GET /api/library/stats': answer});
const stats = (extra = {}) => ({
overview: {totalGames: 12, totalPlaytimeMinutes: 6000, playedGames: 8, neverStarted: 4,
@@ -38,7 +39,7 @@ describe('StatsPage', () => {
});
it('asks for every group once and shows each of them', async () => {
- globalThis.fetch = vi.fn(async () => json(stats()));
+ answerStats(json(200, stats()));
renderPage();
expect(await screen.findByText('STATS.OVERVIEW.TITLE')).toBeTruthy();
@@ -56,7 +57,7 @@ describe('StatsPage', () => {
it('shows the empty texts of a new library', async () => {
const empty = stats();
- globalThis.fetch = vi.fn(async () => json({
+ answerStats(json(200, {
...empty,
pile: {...empty.pile, paceWeeks: null, oldestUnplayed: null},
topGames: {mostPlayed: [], mostLoyal: null},
@@ -77,7 +78,7 @@ describe('StatsPage', () => {
});
it('offers a retry when the stats could not be loaded', async () => {
- globalThis.fetch = vi.fn(async () => json({}, 500));
+ answerStats(json(500, {}));
renderPage();
fireEvent.click(await screen.findByRole('button', {name: /DASHBOARD.RETRY/}));
diff --git a/src/pages/WishlistPage.test.jsx b/src/pages/WishlistPage.test.jsx
index 7943484..ed2a7a4 100644
--- a/src/pages/WishlistPage.test.jsx
+++ b/src/pages/WishlistPage.test.jsx
@@ -1,10 +1,9 @@
// @vitest-environment jsdom
import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
-import {MemoryRouter, Route, Routes, useLocation} from 'react-router-dom';
-import RequireSession from '../components/RequireSession.jsx';
+import {cleanup, fireEvent, screen, waitFor} from '@testing-library/react';
import WishlistPage from './WishlistPage.jsx';
-import {PreferencesProvider} 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'));
@@ -13,23 +12,15 @@ const wishlist = {games: [
{appid: 3012600, name: 'Coming Soon', addedAt: '2025-06-01T00:00:00Z', price: null, originalPrice: null, discountPct: 0},
]};
-function LoginState() {
- return {JSON.stringify(useLocation().state)}
;
-}
+// The providers load the user and the preferences; this page does not use them.
+const withAuth = (routes) => fetchRoutes({'GET /api/users/me': json(200, {settings: {}}), ...routes});
-const renderPage = () => render(
-
-
- }>}/>
- }/>
-
- ,
-);
+const renderPage = () => renderWithProviders(,
+ {path: '/wishlist', entries: ['/wishlist'], guarded: true, routes: {'/login': login
}});
describe('WishlistPage', () => {
beforeEach(() => {
localStorage.setItem('tbp_session', '1');
- globalThis.fetch = vi.fn(async () => ({ok: true, status: 200, json: async () => wishlist}));
});
afterEach(() => {
@@ -38,6 +29,7 @@ describe('WishlistPage', () => {
});
it('shows each game with its price, and the discount for games on sale', async () => {
+ withAuth({'GET /api/library/wishlist': json(200, wishlist)});
renderPage();
expect(await screen.findByText('Prison Architect 2')).toBeTruthy();
@@ -49,6 +41,7 @@ describe('WishlistPage', () => {
});
it('can show only the games on sale', async () => {
+ withAuth({'GET /api/library/wishlist': json(200, wishlist)});
renderPage();
await screen.findByText('Coming Soon');
@@ -59,16 +52,17 @@ describe('WishlistPage', () => {
});
it('explains an empty or private wishlist', async () => {
- fetch.mockResolvedValueOnce({ok: true, status: 200, json: async () => ({games: []})});
+ withAuth({'GET /api/library/wishlist': json(200, {games: []})});
renderPage();
expect(await screen.findByText('WISHLIST.EMPTY')).toBeTruthy();
});
it('opens the login page on a 401 that the refresh cannot fix', async () => {
- fetch.mockResolvedValue({ok: false, status: 401, json: async () => ({})});
- renderPage();
+ withAuth({'GET /api/library/wishlist': json(401, {}), 'POST /api/auth/refresh': json(401, {})});
+ const {router} = renderPage();
- await waitFor(() => expect(JSON.parse(screen.getByTestId('login').textContent).sessionExpired).toBe(true));
+ await waitFor(() => expect(router.state.location.pathname).toBe('/login'));
+ expect(router.state.location.state.sessionExpired).toBe(true);
});
});
diff --git a/src/pages/languageSwitch.test.jsx b/src/pages/languageSwitch.test.jsx
index bcda55d..fd51627 100644
--- a/src/pages/languageSwitch.test.jsx
+++ b/src/pages/languageSwitch.test.jsx
@@ -3,6 +3,7 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
import {cleanup, render, screen} from '@testing-library/react';
import {MemoryRouter, Route, Routes} from 'react-router-dom';
import {switchLanguage} from '../test/i18n-mock.js';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
import {PreferencesProvider} from '../context/PreferencesContext.jsx';
import {CurrentUserProvider} from '../context/CurrentUserContext.jsx';
import Dashboard from './Dashboard.jsx';
@@ -14,19 +15,20 @@ import WishlistPage from './WishlistPage.jsx';
vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+// The last column: what the page loads besides GET /api/users/me of the provider.
const pages = [
- ['Dashboard', '/', '/', Dashboard, 'INFO.ERROR.LOAD_PROFILE'],
- ['GameDetail', '/games/:appid', '/games/220', GameDetail, 'GAME_DETAIL.ERROR_LOAD'],
- ['GameLibrary', '/library', '/library', GameLibrary, 'LIBRARY.ERROR_LOAD'],
- ['PublicProfilePage', '/u/:name', '/u/Lobo', PublicProfilePage, 'PROFILE.ERROR_LOAD'],
- ['SettingsPage', '/settings', '/settings', SettingsPage, 'INFO.ERROR.LOAD_PROFILE'],
- ['WishlistPage', '/wishlist', '/wishlist', WishlistPage, 'WISHLIST.ERROR_LOAD'],
+ ['Dashboard', '/', '/', Dashboard, 'INFO.ERROR.LOAD_PROFILE', []],
+ ['GameDetail', '/games/:appid', '/games/220', GameDetail, 'GAME_DETAIL.ERROR_LOAD', ['/api/library/games/220']],
+ ['GameLibrary', '/library', '/library', GameLibrary, 'LIBRARY.ERROR_LOAD',
+ ['/api/library/games', '/api/library/games-count', '/api/library/sync-status']],
+ ['PublicProfilePage', '/u/:name', '/u/Lobo', PublicProfilePage, 'PROFILE.ERROR_LOAD', ['/api/public/profiles/Lobo']],
+ ['SettingsPage', '/settings', '/settings', SettingsPage, 'INFO.ERROR.LOAD_PROFILE', []],
+ ['WishlistPage', '/wishlist', '/wishlist', WishlistPage, 'WISHLIST.ERROR_LOAD', ['/api/library/wishlist']],
];
beforeEach(() => {
localStorage.setItem('tbp_session', '1');
switchLanguage('de');
- globalThis.fetch = vi.fn(async () => ({ok: false, status: 500, json: async () => ({})}));
});
afterEach(() => {
@@ -35,7 +37,8 @@ afterEach(() => {
});
describe('a language change', () => {
- it.each(pages)('%s: loads nothing again and shows the error in the new language', async (name, path, url, Page, errorKey) => {
+ it.each(pages)('%s: loads nothing again and shows the error in the new language', async (name, path, url, Page, errorKey, loads) => {
+ fetchRoutes(Object.fromEntries(['/api/users/me', ...loads].map((load) => [`GET ${load}`, json(500, {})])));
const tree = () => (
}/>
diff --git a/src/test/fetchRoutes.js b/src/test/fetchRoutes.js
index dc622a6..0bb5bf6 100644
--- a/src/test/fetchRoutes.js
+++ b/src/test/fetchRoutes.js
@@ -1,20 +1,27 @@
-import {vi} from 'vitest';
+import {onTestFinished, vi} from 'vitest';
export const json = (status, body) => ({ok: status >= 200 && status < 300, status, json: async () => body});
/**
* A fetch mock that answers by method and path, e.g. `'GET /api/users/me'`. The path starts at `/api/` (the base URL
* is not set in tests) and leaves out the query. A value is an answer or `(url, init) => answer`. Any other request
- * throws, so a test cannot pass on a request it did not expect.
+ * rejects, and the test fails at its end even when the page catches the error.
* Sets `globalThis.fetch` and returns the mock.
*/
export function fetchRoutes(routes) {
+ const unknown = [];
const mock = vi.fn(async (url, init) => {
const key = `${init?.method ?? 'GET'} ${new URL(url, 'http://x').pathname.replace(/^.*?(?=\/api\/)/, '')}`;
- if (!(key in routes)) throw new Error(`no route ${key}`);
+ if (!(key in routes)) {
+ unknown.push(key);
+ throw new Error(`no route ${key}`);
+ }
const answer = routes[key];
return typeof answer === 'function' ? answer(url, init) : answer;
});
globalThis.fetch = mock;
+ onTestFinished(() => {
+ if (unknown.length) throw new Error(`requests without a route: ${[...new Set(unknown)].join(', ')}`);
+ });
return mock;
}
diff --git a/src/test/renderWithProviders.jsx b/src/test/renderWithProviders.jsx
new file mode 100644
index 0000000..4c54cb1
--- /dev/null
+++ b/src/test/renderWithProviders.jsx
@@ -0,0 +1,28 @@
+import {render} from '@testing-library/react';
+import {createMemoryRouter, Route, RouterProvider, Routes} from 'react-router-dom';
+import {PreferencesProvider} from '../context/PreferencesContext.jsx';
+import {CurrentUserProvider} from '../context/CurrentUserContext.jsx';
+import RequireSession from '../components/RequireSession.jsx';
+
+/**
+ * Renders `ui` at `path` like main.jsx does: in a data router with both providers. `guarded` puts it under
+ * RequireSession, as in App. `routes` adds other pages, e.g. `{'/login': login
}`. The result has `router`,
+ * so a test reads `router.state.location`.
+ */
+export function renderWithProviders(ui, {path = '*', entries = ['/'], routes = {}, guarded = false} = {}) {
+ const page = ;
+ const router = createMemoryRouter([{
+ path: '*',
+ element: (
+
+
+
+ {guarded ? }>{page} : page}
+ {Object.entries(routes).map(([at, element]) => )}
+
+
+
+ ),
+ }], {initialEntries: entries});
+ return {...render(), router};
+}
diff --git a/src/utils/admin.test.js b/src/utils/admin.test.js
index db38343..60a5004 100644
--- a/src/utils/admin.test.js
+++ b/src/utils/admin.test.js
@@ -1,16 +1,18 @@
// @vitest-environment jsdom
-import {describe, expect, it, vi} from 'vitest';
+import {describe, expect, it} from 'vitest';
import {refreshSession} from './api.js';
import {viewAs} from './admin.js';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
describe('viewAs', () => {
it('waits for a running refresh before it sends the refresh cookie', async () => {
let finishRefresh;
- globalThis.fetch = vi.fn((url) => (url.endsWith('/api/auth/refresh')
- ? new Promise((resolve) => {
- finishRefresh = () => resolve({ok: true, status: 204});
- })
- : Promise.resolve({ok: true, status: 204})));
+ fetchRoutes({
+ 'POST /api/auth/refresh': () => new Promise((resolve) => {
+ finishRefresh = () => resolve(json(204));
+ }),
+ 'POST /api/auth/view-as': json(204),
+ });
const refreshing = refreshSession();
const switching = viewAs('USER');
diff --git a/src/utils/brokenImages.test.js b/src/utils/brokenImages.test.js
index b839304..e5afb7c 100644
--- a/src/utils/brokenImages.test.js
+++ b/src/utils/brokenImages.test.js
@@ -1,10 +1,11 @@
// @vitest-environment jsdom
-import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
import {ACHIEVEMENT_ICONS, COVER, reportBrokenImage, resetBrokenImageReports} from './brokenImages.js';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
beforeEach(() => {
localStorage.setItem('tbp_session', '1');
- globalThis.fetch = vi.fn(async () => ({ok: true, status: 204}));
+ fetchRoutes({'POST /api/library/broken-images': json(204, {})});
});
afterEach(() => {
@@ -40,9 +41,7 @@ describe('reportBrokenImage', () => {
});
it('ignores a failed request', async () => {
- globalThis.fetch = vi.fn(async () => {
- throw new TypeError('network');
- });
+ fetchRoutes({'POST /api/library/broken-images': () => { throw new TypeError('network'); }});
expect(() => reportBrokenImage(620, COVER)).not.toThrow();
await Promise.resolve();