Spaces:
Sleeping
Sleeping
File size: 3,716 Bytes
766d85d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | // FE-COMP-MOBILETOPBAR-001 to FE-COMP-MOBILETOPBAR-007
vi.mock('./InAppNotificationBell', () => ({ default: () => null }));
const mockNavigate = vi.fn();
vi.mock('react-router-dom', async () => {
const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
return { ...actual, useNavigate: () => mockNavigate };
});
import { render, screen, fireEvent } from '../../../tests/helpers/render';
import userEvent from '@testing-library/user-event';
import { useAuthStore } from '../../store/authStore';
import { useSettingsStore } from '../../store/settingsStore';
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
import { buildUser, buildSettings } from '../../../tests/helpers/factories';
import MobileTopBar from './MobileTopBar';
const currentUser = buildUser({ id: 1, username: 'testuser', email: 'test@example.com' });
beforeEach(() => {
resetAllStores();
mockNavigate.mockClear();
seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
});
describe('MobileTopBar', () => {
it('FE-COMP-MOBILETOPBAR-001: renders the profile avatar (no brand logo)', () => {
render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
expect(screen.getByRole('button', { name: 'Profile' })).toBeInTheDocument();
expect(screen.queryByText('trek')).not.toBeInTheDocument();
});
it('FE-COMP-MOBILETOPBAR-002: avatar opens the profile sheet', async () => {
const user = userEvent.setup();
render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
await user.click(screen.getByRole('button', { name: 'Profile' }));
expect(screen.getByText('testuser')).toBeInTheDocument();
expect(screen.getByText('test@example.com')).toBeInTheDocument();
});
it('FE-COMP-MOBILETOPBAR-003: profile sheet shows Settings', async () => {
const user = userEvent.setup();
render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
await user.click(screen.getByRole('button', { name: 'Profile' }));
expect(screen.getByText('Settings')).toBeInTheDocument();
});
it('FE-COMP-MOBILETOPBAR-004: profile sheet shows Logout', async () => {
const user = userEvent.setup();
render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
await user.click(screen.getByRole('button', { name: 'Profile' }));
expect(screen.getByText('Logout')).toBeInTheDocument();
});
it('FE-COMP-MOBILETOPBAR-005: admin badge shown for admin users', async () => {
seedStore(useAuthStore, { user: buildUser({ id: 2, username: 'adminuser', role: 'admin' }), isAuthenticated: true });
const user = userEvent.setup();
render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
await user.click(screen.getByRole('button', { name: 'Profile' }));
expect(screen.getByText('Admin')).toBeInTheDocument();
});
it('FE-COMP-MOBILETOPBAR-006: backdrop click closes the profile sheet', async () => {
const user = userEvent.setup();
render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
await user.click(screen.getByRole('button', { name: 'Profile' }));
expect(screen.getByText('testuser')).toBeInTheDocument();
const backdrop = document.querySelector('.fixed.inset-0') as HTMLElement;
expect(backdrop).toBeTruthy();
fireEvent.click(backdrop);
expect(screen.queryByText('testuser')).not.toBeInTheDocument();
});
it('FE-COMP-MOBILETOPBAR-007: profile label translates when language is fr', async () => {
seedStore(useSettingsStore, { settings: buildSettings({ language: 'fr' }) });
render(<MobileTopBar />, { initialEntries: ['/dashboard'] });
expect(await screen.findByRole('button', { name: 'Profil' })).toBeInTheDocument();
});
});
|