feat(admin): add the admin users page and view as

src/components/AppHeader.test.jsx

@@ -1,13 +1,30 @@
 // @vitest-environment jsdom
 import {afterEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, render, screen} from '@testing-library/react';
+import {cleanup, fireEvent, render, screen} from '@testing-library/react';
 import {MemoryRouter} from 'react-router-dom';
 import AppHeader from './AppHeader.jsx';
 import {PreferencesProvider} from '../context/PreferencesContext.jsx';
 
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 
-afterEach(cleanup);
+afterEach(() => {
+    cleanup();
+    localStorage.clear();
+});
+
+const loggedInAs = (me) => {
+    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><AppHeader isAuthenticated onLogout={() => {}}/></PreferencesProvider>
+        </MemoryRouter>,
+    );
+};
+
+const openMenu = () => fireEvent.keyDown(screen.getByRole('button', {name: 'NAV.MENU'}), {key: 'Enter'});
 
 describe('AppHeader', () => {
     // jsdom applies no media queries, so the test hides the name the way the 380px breakpoint does.
@@ -21,4 +38,36 @@ describe('AppHeader', () => {
 
         expect(screen.getByRole('link', {name: 'ToBePlayed'})).toBeTruthy();
     });
+
+    it('offers the admin page and "view as" to an admin', async () => {
+        loggedInAs({role: 'PLATFORM_ADMIN', activeRole: 'PLATFORM_ADMIN'});
+        await screen.findByRole('button', {name: 'NAV.MENU'});
+        await vi.waitFor(() => expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/api/users/me'), expect.anything()));
+
+        openMenu();
+
+        expect(await screen.findByText('NAV.ADMIN')).toBeTruthy();
+        expect(screen.getByText('NAV.VIEW_AS.MENU')).toBeTruthy();
+        expect(screen.queryByText('NAV.VIEW_AS.BADGE')).toBeNull();
+    });
+
+    it('shows the badge and hides the admin page while an admin views as a user', async () => {
+        loggedInAs({role: 'PLATFORM_ADMIN', activeRole: 'USER'});
+
+        expect(await screen.findByText('NAV.VIEW_AS.BADGE')).toBeTruthy();
+        openMenu();
+        expect(await screen.findByText('NAV.VIEW_AS.MENU')).toBeTruthy();
+        expect(screen.queryByText('NAV.ADMIN')).toBeNull();
+    });
+
+    it('offers nothing of that to a user', async () => {
+        loggedInAs({role: 'USER', activeRole: 'USER'});
+        await vi.waitFor(() => expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/api/users/me'), expect.anything()));
+
+        openMenu();
+
+        expect(await screen.findByText('NAV.SETTINGS')).toBeTruthy();
+        expect(screen.queryByText('NAV.ADMIN')).toBeNull();
+        expect(screen.queryByText('NAV.VIEW_AS.MENU')).toBeNull();
+    });
 });