test: data router, one render helper, fetchRoutes in every test

src/components/AppHeader.test.jsx

@@ -1,12 +1,11 @@
 // @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 {cleanup, fireEvent, screen} from '@testing-library/react';
 import {toast} from 'sonner';
 import {useTranslation} from 'react-i18next';
 import AppHeader from './AppHeader.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'));
 vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
@@ -17,26 +16,18 @@ afterEach(() => {
     useTranslation().i18n.language = 'de';
 });
 
-const loggedInAs = (me) => {
+const loggedInAs = (me, routes = {}) => {
     localStorage.setItem('tbp_session', '1');
-    globalThis.fetch = vi.fn(async (url) => ({
-        ok: true, status: 200, json: async () => (url.includes('/api/users/me') ? me : {}),
-    }));
-    render(
-        <MemoryRouter>
-            <PreferencesProvider><CurrentUserProvider><AppHeader isAuthenticated onLogout={() => {}}/></CurrentUserProvider></PreferencesProvider>
-        </MemoryRouter>,
-    );
+    fetchRoutes({'GET /api/users/me': json(200, me), 'GET /api/library/steam-profile': json(200, {}), ...routes});
+    renderWithProviders(<AppHeader isAuthenticated onLogout={() => {}}/>);
 };
 
 const openMenu = () => fireEvent.keyDown(screen.getByRole('button', {name: 'NAV.MENU'}), {key: 'Enter'});
 
 describe('AppHeader', () => {
     it('says so when Auth refuses the language switch', async () => {
-        loggedInAs({role: 'USER', activeRole: 'USER', settings: {language: 'de'}});
-        fetch.mockImplementation(async (url, init) => (init?.method === 'PUT'
-            ? {ok: false, status: 500, json: async () => ({})}
-            : {ok: true, status: 200, json: async () => ({role: 'USER', activeRole: 'USER', settings: {language: 'de'}})}));
+        loggedInAs({role: 'USER', activeRole: 'USER', settings: {language: 'de'}},
+            {'PUT /api/users/settings': json(500, {})});
 
         await screen.findByRole('button', {name: 'NAV.MENU'});
         openMenu();
@@ -47,11 +38,8 @@ describe('AppHeader', () => {
 
     // jsdom applies no media queries, so the test hides the name the way the 380px breakpoint does.
     it('keeps a name on the home link when a narrow phone hides the app name', () => {
-        render(
-            <MemoryRouter>
-                <PreferencesProvider><CurrentUserProvider><AppHeader isAuthenticated={false} onLogout={() => {}}/></CurrentUserProvider></PreferencesProvider>
-            </MemoryRouter>,
-        );
+        fetchRoutes({});
+        renderWithProviders(<AppHeader isAuthenticated={false} onLogout={() => {}}/>);
         screen.getByText('ToBePlayed').style.display = 'none';
 
         expect(screen.getByRole('link', {name: 'ToBePlayed'})).toBeTruthy();