|
| 1 | +/* UserMenu.test.tsx — coverage for the topbar avatar dropdown that lets |
| 2 | + * users log out of the dashboard. Bug context: there used to be no UI |
| 3 | + * surface that called api.logout() — the avatar was a static <div>. This |
| 4 | + * suite locks the new behaviour: |
| 5 | + * |
| 6 | + * 1. Trigger renders the avatar with the email's first letter. |
| 7 | + * 2. Clicking the trigger opens a dropdown (role="menu" visible). |
| 8 | + * 3. Clicking outside the dropdown closes it. |
| 9 | + * 4. Escape key closes the dropdown. |
| 10 | + * 5. "Log out" calls api.logout() + navigates to /login. |
| 11 | + * 6. "Account settings" navigates to /app/settings. |
| 12 | + * |
| 13 | + * Styling is intentionally not asserted — the layout tokens are expected |
| 14 | + * to evolve and we don't want to burn tests on every visual tweak. We |
| 15 | + * pin the behaviour with financial / auth consequences. */ |
| 16 | + |
| 17 | +import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest' |
| 18 | +import { render, screen, fireEvent, cleanup, act } from '@testing-library/react' |
| 19 | +import { MemoryRouter, Routes, Route } from 'react-router-dom' |
| 20 | + |
| 21 | +// ─── Module-level mocks ────────────────────────────────────────────────── |
| 22 | +// Mock the api so logout() is a spy we can assert against (and so it never |
| 23 | +// touches localStorage during the test run). |
| 24 | +vi.mock('../api', async () => { |
| 25 | + const actual = await vi.importActual<typeof import('../api')>('../api') |
| 26 | + return { |
| 27 | + ...actual, |
| 28 | + logout: vi.fn().mockResolvedValue({ ok: true }), |
| 29 | + } |
| 30 | +}) |
| 31 | + |
| 32 | +// Stub useDashboardCtx so we control what the menu reads. We intentionally |
| 33 | +// only populate the fields the component reads — `experiments` and other |
| 34 | +// /auth/me extensions must NOT be required by the menu. |
| 35 | +const FIXTURE_ME = { |
| 36 | + user: { id: 'u_test', email: 'aanya@acme.dev', tier: 'pro', team_id: 't_test', created_at: '' }, |
| 37 | + team: { id: 't_test', name: 'acme-corp', slug: 'acme-corp', owner_id: 'u_test', member_count: 1, tier: 'pro', created_at: '' }, |
| 38 | +} |
| 39 | + |
| 40 | +vi.mock('../hooks/useDashboardCtx', () => ({ |
| 41 | + useDashboardCtx: () => ({ |
| 42 | + me: FIXTURE_ME, |
| 43 | + meErr: null, |
| 44 | + meLoading: false, |
| 45 | + env: 'production', |
| 46 | + envs: ['production'], |
| 47 | + counts: { resources: 0, deployments: 0, vault: 0, team: 1 }, |
| 48 | + resources: [], |
| 49 | + billing: null, |
| 50 | + billingLoading: false, |
| 51 | + }), |
| 52 | +})) |
| 53 | + |
| 54 | +import * as api from '../api' |
| 55 | +import { UserMenu } from './UserMenu' |
| 56 | + |
| 57 | +// ─── Helpers ───────────────────────────────────────────────────────────── |
| 58 | + |
| 59 | +// Render the menu inside a MemoryRouter with extra routes wired up so we |
| 60 | +// can observe navigation by what react-router actually paints. The "*" |
| 61 | +// catch-all route renders the current path as text — assertions read |
| 62 | +// the route-shadow div instead of mocking useNavigate. |
| 63 | +function renderMenu(initialPath = '/app') { |
| 64 | + return render( |
| 65 | + <MemoryRouter initialEntries={[initialPath]}> |
| 66 | + <Routes> |
| 67 | + <Route path="/app/*" element={<UserMenu />} /> |
| 68 | + <Route path="/login" element={<div data-testid="route-login">on-login</div>} /> |
| 69 | + <Route path="/app/settings" element={<div data-testid="route-settings">on-settings</div>} /> |
| 70 | + </Routes> |
| 71 | + </MemoryRouter>, |
| 72 | + ) |
| 73 | +} |
| 74 | + |
| 75 | +beforeEach(() => { |
| 76 | + ;(api.logout as unknown as ReturnType<typeof vi.fn>).mockClear() |
| 77 | +}) |
| 78 | +afterEach(() => cleanup()) |
| 79 | + |
| 80 | +// ─── Tests ─────────────────────────────────────────────────────────────── |
| 81 | + |
| 82 | +describe('UserMenu — trigger', () => { |
| 83 | + it('renders the avatar with the first letter of the email', () => { |
| 84 | + renderMenu() |
| 85 | + const trigger = screen.getByTestId('user-menu-trigger') |
| 86 | + expect(trigger.textContent).toBe('A') |
| 87 | + // Email is exposed for screen readers via the title attribute so |
| 88 | + // users hovering over the avatar see whose account is signed in. |
| 89 | + expect(trigger.getAttribute('title')).toBe('aanya@acme.dev') |
| 90 | + }) |
| 91 | +}) |
| 92 | + |
| 93 | +describe('UserMenu — open / close', () => { |
| 94 | + it('click trigger opens the dropdown', () => { |
| 95 | + renderMenu() |
| 96 | + expect(screen.queryByTestId('user-menu-dropdown')).toBeNull() |
| 97 | + |
| 98 | + fireEvent.click(screen.getByTestId('user-menu-trigger')) |
| 99 | + |
| 100 | + const dropdown = screen.getByTestId('user-menu-dropdown') |
| 101 | + expect(dropdown).toBeTruthy() |
| 102 | + expect(dropdown.getAttribute('role')).toBe('menu') |
| 103 | + // The user's email + team identity must surface in the dropdown so |
| 104 | + // they know which account they're about to log out of. |
| 105 | + expect(screen.getByTestId('user-menu-email').textContent).toBe('aanya@acme.dev') |
| 106 | + expect(screen.getByTestId('user-menu-team-name').textContent).toBe('acme-corp') |
| 107 | + expect(screen.getByTestId('user-menu-tier-badge').textContent).toBe('pro') |
| 108 | + }) |
| 109 | + |
| 110 | + it('click outside the dropdown closes it', () => { |
| 111 | + render( |
| 112 | + <MemoryRouter> |
| 113 | + <div> |
| 114 | + <button data-testid="outside">outside</button> |
| 115 | + <Routes> |
| 116 | + <Route path="/" element={<UserMenu />} /> |
| 117 | + </Routes> |
| 118 | + </div> |
| 119 | + </MemoryRouter>, |
| 120 | + ) |
| 121 | + |
| 122 | + fireEvent.click(screen.getByTestId('user-menu-trigger')) |
| 123 | + expect(screen.getByTestId('user-menu-dropdown')).toBeTruthy() |
| 124 | + |
| 125 | + // mousedown on a node outside the wrapper must close — the click- |
| 126 | + // outside listener is wired up on `mousedown` (not `click`) so it |
| 127 | + // fires before any other handler can re-open. |
| 128 | + fireEvent.mouseDown(screen.getByTestId('outside')) |
| 129 | + expect(screen.queryByTestId('user-menu-dropdown')).toBeNull() |
| 130 | + }) |
| 131 | + |
| 132 | + it('Escape key closes the dropdown', () => { |
| 133 | + renderMenu() |
| 134 | + fireEvent.click(screen.getByTestId('user-menu-trigger')) |
| 135 | + expect(screen.getByTestId('user-menu-dropdown')).toBeTruthy() |
| 136 | + |
| 137 | + fireEvent.keyDown(document, { key: 'Escape' }) |
| 138 | + expect(screen.queryByTestId('user-menu-dropdown')).toBeNull() |
| 139 | + }) |
| 140 | +}) |
| 141 | + |
| 142 | +describe('UserMenu — actions', () => { |
| 143 | + it('Log out calls api.logout() and navigates to /login', async () => { |
| 144 | + renderMenu() |
| 145 | + fireEvent.click(screen.getByTestId('user-menu-trigger')) |
| 146 | + |
| 147 | + await act(async () => { |
| 148 | + fireEvent.click(screen.getByTestId('user-menu-logout')) |
| 149 | + // Flush microtasks so the awaited api.logout() promise + the |
| 150 | + // navigate() that follows commit before assertions. |
| 151 | + await Promise.resolve() |
| 152 | + }) |
| 153 | + |
| 154 | + expect(api.logout).toHaveBeenCalledTimes(1) |
| 155 | + // react-router actually unmounts the menu route and mounts the |
| 156 | + // login route — proves navigation, not just a spy call. |
| 157 | + expect(screen.getByTestId('route-login')).toBeTruthy() |
| 158 | + }) |
| 159 | + |
| 160 | + it('Account settings navigates to /app/settings', () => { |
| 161 | + renderMenu() |
| 162 | + fireEvent.click(screen.getByTestId('user-menu-trigger')) |
| 163 | + |
| 164 | + fireEvent.click(screen.getByTestId('user-menu-settings')) |
| 165 | + |
| 166 | + expect(screen.getByTestId('route-settings')).toBeTruthy() |
| 167 | + }) |
| 168 | +}) |
0 commit comments