mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 05:26:47 +00:00
Maurice
655 lines
27 KiB
TypeScript
655 lines
27 KiB
TypeScript
// FE-COMP-NAVBAR-001 to FE-COMP-NAVBAR-028
|
|
import { act, fireEvent, render, screen, waitFor } from '../../../tests/helpers/render';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { http, HttpResponse } from 'msw';
|
|
import { server } from '../../../tests/helpers/msw/server';
|
|
import { useAuthStore } from '../../store/authStore';
|
|
import { useSettingsStore } from '../../store/settingsStore';
|
|
import { useAddonStore } from '../../store/addonStore';
|
|
import { usePluginStore } from '../../store/pluginStore';
|
|
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
|
import { buildUser, buildSettings } from '../../../tests/helpers/factories';
|
|
import Navbar from './Navbar';
|
|
|
|
beforeEach(() => {
|
|
resetAllStores();
|
|
server.use(
|
|
http.get('/api/auth/app-config', () => HttpResponse.json({ version: '2.9.10' })),
|
|
http.get('/api/addons', () => HttpResponse.json({ addons: [] })),
|
|
);
|
|
seedStore(useAuthStore, { user: buildUser({ username: 'testuser', role: 'user' }), isAuthenticated: true, appVersion: '2.9.10' });
|
|
seedStore(useSettingsStore, { settings: buildSettings() });
|
|
});
|
|
|
|
describe('Navbar', () => {
|
|
it('FE-COMP-NAVBAR-001: renders without crashing', () => {
|
|
render(<Navbar />);
|
|
expect(document.body).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-002: shows TREK logo/brand', () => {
|
|
render(<Navbar />);
|
|
// The Navbar shows the app icon — check for presence of the nav element
|
|
expect(document.querySelector('nav') || document.body).toBeTruthy();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-003: shows username in user menu trigger', () => {
|
|
render(<Navbar />);
|
|
expect(screen.getByText('testuser')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-004: user menu opens on click', async () => {
|
|
const user = userEvent.setup();
|
|
render(<Navbar />);
|
|
// Click the username to open dropdown
|
|
await user.click(screen.getByText('testuser'));
|
|
// Settings option appears
|
|
expect(screen.getByText('Settings')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-005: user menu shows Log out option', async () => {
|
|
const user = userEvent.setup();
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('testuser'));
|
|
expect(screen.getByText('Log out')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-006: shows Settings link in user menu', async () => {
|
|
const user = userEvent.setup();
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('testuser'));
|
|
expect(screen.getByText('Settings')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-007: shows My Trips link in navbar', () => {
|
|
render(<Navbar />);
|
|
// nav.myTrips = "My Trips" is in the main navbar (hidden on mobile via CSS, but CSS is not processed in tests)
|
|
// The link to /dashboard is present regardless
|
|
const dashboardLinks = document.querySelectorAll('a[href="/dashboard"]');
|
|
expect(dashboardLinks.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-008: clicking Log out calls logout', async () => {
|
|
const user = userEvent.setup();
|
|
const logout = vi.fn();
|
|
seedStore(useAuthStore, { user: buildUser({ username: 'testuser' }), isAuthenticated: true, logout });
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('testuser'));
|
|
await user.click(screen.getByText('Log out'));
|
|
expect(logout).toHaveBeenCalled();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-009: admin user sees Admin option', async () => {
|
|
const user = userEvent.setup();
|
|
seedStore(useAuthStore, { user: buildUser({ username: 'admin', role: 'admin' }), isAuthenticated: true });
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('admin'));
|
|
expect(screen.getByText('Admin')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-010: regular user does not see Admin option', async () => {
|
|
const user = userEvent.setup();
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('testuser'));
|
|
expect(screen.queryByText('Admin')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-011: shows tripTitle when provided', () => {
|
|
render(<Navbar tripTitle="Paris 2026" />);
|
|
expect(screen.getByText('Paris 2026')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-012: shows back button when showBack is true', () => {
|
|
render(<Navbar showBack={true} onBack={vi.fn()} />);
|
|
// Back button is a button element
|
|
const backBtns = screen.getAllByRole('button');
|
|
expect(backBtns.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-012b: in a trip the back arrow and the trip name are one pill', async () => {
|
|
const user = userEvent.setup();
|
|
const onBack = vi.fn();
|
|
render(<Navbar tripTitle="Paris 2026" showBack onBack={onBack} />);
|
|
const pill = screen.getByRole('button', { name: 'Back: Paris 2026' });
|
|
expect(pill).toHaveTextContent('Paris 2026');
|
|
expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
|
|
await user.click(pill);
|
|
expect(onBack).toHaveBeenCalledOnce();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-013: clicking back button calls onBack', async () => {
|
|
const user = userEvent.setup();
|
|
const onBack = vi.fn();
|
|
render(<Navbar showBack={true} onBack={onBack} />);
|
|
// Find the back button (ArrowLeft icon)
|
|
const buttons = screen.getAllByRole('button');
|
|
// First button should be the back button
|
|
await user.click(buttons[0]);
|
|
expect(onBack).toHaveBeenCalled();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-014: notification bell is rendered when user is logged in', () => {
|
|
render(<Navbar />);
|
|
// InAppNotificationBell is rendered — check that body has some content
|
|
expect(document.body.children.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-015: dark mode toggle is accessible in user menu', async () => {
|
|
const user = userEvent.setup();
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('testuser'));
|
|
// Dark mode / Light mode / Auto mode options
|
|
const darkModeEls = screen.getAllByRole('button');
|
|
expect(darkModeEls.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-016: app version shown in user menu', async () => {
|
|
const user = userEvent.setup();
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('testuser'));
|
|
await waitFor(() => {
|
|
expect(screen.getByText('v2.9.10')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-017: Settings link navigates to /settings', async () => {
|
|
const user = userEvent.setup();
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('testuser'));
|
|
const settingsLink = screen.getByRole('link', { name: /settings/i });
|
|
expect(settingsLink).toHaveAttribute('href', '/settings');
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-018: Admin link navigates to /admin for admin user', async () => {
|
|
const user = userEvent.setup();
|
|
seedStore(useAuthStore, { user: buildUser({ username: 'adminuser', role: 'admin' }), isAuthenticated: true });
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('adminuser'));
|
|
const adminLink = screen.getByRole('link', { name: /admin/i });
|
|
expect(adminLink).toHaveAttribute('href', '/admin');
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-019: share button rendered when onShare prop provided', () => {
|
|
render(<Navbar onShare={vi.fn()} />);
|
|
const shareBtn = screen.getByRole('button', { name: /share/i });
|
|
expect(shareBtn).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-020: share button click calls onShare', async () => {
|
|
const user = userEvent.setup();
|
|
const onShare = vi.fn();
|
|
render(<Navbar onShare={onShare} />);
|
|
const shareBtn = screen.getByRole('button', { name: /share/i });
|
|
await user.click(shareBtn);
|
|
expect(onShare).toHaveBeenCalled();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-021: share button NOT rendered when onShare prop omitted', () => {
|
|
render(<Navbar />);
|
|
expect(screen.queryByRole('button', { name: /share/i })).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-022: dark mode toggle shows Moon when light, Sun when dark', () => {
|
|
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: false }) });
|
|
const { unmount } = render(<Navbar />);
|
|
// Moon icon button should be present (title = 'nav.darkMode' i.e. 'Dark mode')
|
|
expect(document.querySelector('[title]')).toBeTruthy();
|
|
unmount();
|
|
|
|
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'dark' }) });
|
|
render(<Navbar />);
|
|
// Sun icon button should be present when dark mode is on
|
|
const buttons = screen.getAllByRole('button');
|
|
expect(buttons.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-023: dark mode toggle calls updateSetting', async () => {
|
|
const user = userEvent.setup();
|
|
const updateSetting = vi.fn().mockResolvedValue(undefined);
|
|
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: false }), updateSetting });
|
|
render(<Navbar />);
|
|
// Find the dark mode toggle button by title attribute. The help button
|
|
// before it carries a title too, hence the exclusion.
|
|
const toggleBtn = document.querySelector('button[title]:not([data-help-button])') as HTMLElement;
|
|
expect(toggleBtn).toBeTruthy();
|
|
await user.click(toggleBtn);
|
|
expect(updateSetting).toHaveBeenCalledWith('dark_mode', 'dark');
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-024: global addon nav links appear when addons enabled', () => {
|
|
server.use(
|
|
http.get('/api/addons', () => HttpResponse.json({
|
|
addons: [{ id: 'vacay', name: 'Vacay', icon: 'CalendarDays', type: 'global', enabled: true }],
|
|
})),
|
|
);
|
|
seedStore(useAddonStore, {
|
|
addons: [{ id: 'vacay', name: 'Vacay', icon: 'CalendarDays', type: 'global', enabled: true }],
|
|
});
|
|
render(<Navbar />);
|
|
expect(screen.getByRole('link', { name: /vacay/i })).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-025: global addon links hidden when in trip view (tripTitle set)', () => {
|
|
seedStore(useAddonStore, {
|
|
addons: [{ id: 'vacay', name: 'Vacay', icon: 'CalendarDays', type: 'global', enabled: true }],
|
|
});
|
|
render(<Navbar tripTitle="Japan 2025" />);
|
|
expect(screen.queryByRole('link', { name: /vacay/i })).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-026: notification bell visible when tripId provided', () => {
|
|
render(<Navbar tripId="1" />);
|
|
// InAppNotificationBell renders a button — check it is present
|
|
const buttons = screen.getAllByRole('button');
|
|
expect(buttons.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-027: user avatar image shown when avatar_url set', () => {
|
|
seedStore(useAuthStore, {
|
|
user: buildUser({ username: 'testuser', avatar_url: 'https://example.com/av.jpg' }),
|
|
isAuthenticated: true,
|
|
});
|
|
render(<Navbar />);
|
|
const avatarImg = document.querySelector('img[src="https://example.com/av.jpg"]');
|
|
expect(avatarImg).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-028: user initial shown when no avatar_url', () => {
|
|
seedStore(useAuthStore, {
|
|
user: buildUser({ username: 'testuser', avatar_url: null }),
|
|
isAuthenticated: true,
|
|
});
|
|
render(<Navbar />);
|
|
// The initial is rendered as the first char uppercased in a div
|
|
expect(screen.getAllByText('T')[0]).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-029: clicking backdrop overlay closes user menu', async () => {
|
|
const user = userEvent.setup();
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('testuser'));
|
|
expect(screen.getByText('Settings')).toBeInTheDocument();
|
|
// The backdrop overlay is a fixed-inset div rendered in the portal
|
|
const backdrop = document.querySelector('[style*="inset: 0"]') as HTMLElement;
|
|
if (backdrop) {
|
|
await user.click(backdrop);
|
|
expect(screen.queryByText('Settings')).not.toBeInTheDocument();
|
|
}
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-030: dark mode auto uses system preference', () => {
|
|
// 'auto' dark_mode relies on matchMedia — seed with auto and render
|
|
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'auto' }) });
|
|
render(<Navbar />);
|
|
// Component should render without errors regardless of system preference
|
|
expect(document.querySelector('nav')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-031: dark mode toggle calls updateSetting with light when currently dark', async () => {
|
|
const user = userEvent.setup();
|
|
const updateSetting = vi.fn().mockResolvedValue(undefined);
|
|
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'dark' }), updateSetting });
|
|
render(<Navbar />);
|
|
const toggleBtn = document.querySelector('button[title]:not([data-help-button])') as HTMLElement;
|
|
expect(toggleBtn).toBeTruthy();
|
|
await user.click(toggleBtn);
|
|
expect(updateSetting).toHaveBeenCalledWith('dark_mode', 'light');
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-032: user email shown in open user menu', async () => {
|
|
const user = userEvent.setup();
|
|
seedStore(useAuthStore, {
|
|
user: buildUser({ username: 'testuser', email: 'testuser@example.com' }),
|
|
isAuthenticated: true,
|
|
});
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('testuser'));
|
|
expect(screen.getByText('testuser@example.com')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-033: administrator badge shown for admin user in open menu', async () => {
|
|
const user = userEvent.setup();
|
|
seedStore(useAuthStore, {
|
|
user: buildUser({ username: 'adminuser', role: 'admin' }),
|
|
isAuthenticated: true,
|
|
});
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('adminuser'));
|
|
expect(screen.getByText('Administrator')).toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-034: page plugin renders the icon its manifest declares', () => {
|
|
seedStore(usePluginStore, {
|
|
plugins: [{ id: 'trip-doctor', name: 'Trip Doctor', type: 'page', icon: 'Stethoscope' }],
|
|
});
|
|
const { container } = render(<Navbar />);
|
|
expect(screen.getByRole('link', { name: /trip doctor/i })).toBeInTheDocument();
|
|
expect(container.querySelector('.lucide-stethoscope')).not.toBeNull();
|
|
});
|
|
|
|
it('FE-COMP-NAVBAR-035: page plugin with an unknown icon falls back to Blocks', () => {
|
|
seedStore(usePluginStore, {
|
|
plugins: [{ id: 'bogus', name: 'Bogus', type: 'page', icon: 'NotAnIcon' }],
|
|
});
|
|
const { container } = render(<Navbar />);
|
|
expect(container.querySelector('.lucide-blocks')).not.toBeNull();
|
|
});
|
|
});
|
|
|
|
// FE-W5NAV-001 to FE-W5NAV-012 — scroll/dark styling, the addon-name fallback,
|
|
// the prerelease badge, the theme-transition timer and the hover styling that
|
|
// the behavioural tests above leave untouched.
|
|
describe('Navbar styling and menu details', () => {
|
|
const nav = () => document.querySelector('nav') as HTMLElement;
|
|
|
|
beforeEach(() => {
|
|
document.documentElement.classList.remove('trek-theme-transitioning');
|
|
Object.defineProperty(window, 'scrollY', { value: 0, configurable: true });
|
|
});
|
|
|
|
it('FE-W5NAV-001: the bar goes translucent once the page is scrolled', () => {
|
|
render(<Navbar />);
|
|
expect(nav().style.backdropFilter).toBe('blur(20px)');
|
|
|
|
Object.defineProperty(window, 'scrollY', { value: 40, configurable: true });
|
|
fireEvent.scroll(window);
|
|
|
|
expect(nav().style.backdropFilter).toBe('blur(28px) saturate(180%)');
|
|
expect(nav().style.background).toBe('rgba(255, 255, 255, 0.72)');
|
|
});
|
|
|
|
it('FE-W5NAV-002: dark mode swaps the bar and logo assets', () => {
|
|
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'dark' }) });
|
|
render(<Navbar />);
|
|
|
|
expect(nav().style.background).toBe('rgba(9, 9, 11, 0.95)');
|
|
expect(document.querySelector('img[src="/logo-light.svg"]')).not.toBeNull();
|
|
|
|
Object.defineProperty(window, 'scrollY', { value: 40, configurable: true });
|
|
fireEvent.scroll(window);
|
|
expect(nav().style.background).toBe('rgba(9, 9, 11, 0.78)');
|
|
});
|
|
|
|
it('FE-W5NAV-003: a scrolled body counts as scrolled too', () => {
|
|
render(<Navbar />);
|
|
Object.defineProperty(document.body, 'scrollTop', { value: 30, configurable: true });
|
|
fireEvent.scroll(document.body);
|
|
|
|
expect(nav().style.backdropFilter).toBe('blur(28px) saturate(180%)');
|
|
Object.defineProperty(document.body, 'scrollTop', { value: 0, configurable: true });
|
|
});
|
|
|
|
it('FE-W5NAV-004: no addons are loaded while nobody is signed in', () => {
|
|
const loadAddons = vi.fn(async () => {});
|
|
seedStore(useAuthStore, { user: null, isAuthenticated: false });
|
|
seedStore(useAddonStore, { loadAddons });
|
|
render(<Navbar />);
|
|
|
|
expect(loadAddons).not.toHaveBeenCalled();
|
|
expect(screen.queryByText('testuser')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5NAV-005: a catalogued addon uses its translated name, an unknown one its own', () => {
|
|
seedStore(useAddonStore, {
|
|
addons: [
|
|
{ id: 'budget', name: 'Budget', icon: 'Briefcase', type: 'global', enabled: true },
|
|
{ id: 'trip-doctor', name: 'Trip Doctor', icon: 'NoSuchIcon', type: 'global', enabled: true },
|
|
{ id: 'weather', name: 'Weather', icon: 'Globe', type: 'integration', enabled: true },
|
|
{ id: 'atlas', name: 'Atlas', icon: 'Globe', type: 'global', enabled: false },
|
|
],
|
|
});
|
|
render(<Navbar />);
|
|
|
|
expect(screen.getByRole('link', { name: /^Costs$/ })).toHaveAttribute('href', '/budget');
|
|
expect(screen.getByRole('link', { name: /^Trip Doctor$/ })).toBeInTheDocument();
|
|
expect(screen.queryByRole('link', { name: /^Weather$/ })).not.toBeInTheDocument();
|
|
expect(screen.queryByRole('link', { name: /^Atlas$/ })).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5NAV-006: the active tab keeps its colour on hover, inactive tabs brighten', () => {
|
|
seedStore(useAddonStore, {
|
|
addons: [{ id: 'vacay', name: 'Vacay', icon: 'CalendarDays', type: 'global', enabled: true }],
|
|
});
|
|
render(<Navbar />, { initialEntries: ['/dashboard'] });
|
|
|
|
const active = screen.getByRole('link', { name: /my trips/i });
|
|
const inactive = screen.getByRole('link', { name: /vacay/i });
|
|
expect(active.style.background).toBe('var(--bg-card)');
|
|
expect(inactive.style.background).toBe('transparent');
|
|
|
|
fireEvent.mouseEnter(active);
|
|
fireEvent.mouseLeave(active);
|
|
expect(active.style.color).toBe('var(--text-primary)');
|
|
|
|
fireEvent.mouseEnter(inactive);
|
|
expect(inactive.style.color).toBe('var(--text-primary)');
|
|
fireEvent.mouseLeave(inactive);
|
|
expect(inactive.style.color).toBe('var(--text-muted)');
|
|
});
|
|
|
|
it('FE-W5NAV-007: trip pages swap the tab pill for the centre notice slot', () => {
|
|
seedStore(useAddonStore, {
|
|
addons: [{ id: 'vacay', name: 'Vacay', icon: 'CalendarDays', type: 'global', enabled: true }],
|
|
});
|
|
render(<Navbar tripTitle="Japan 2027" />);
|
|
|
|
expect(document.getElementById('trek-nav-center-slot')).not.toBeNull();
|
|
expect(document.querySelector('.trek-nav-pill')).toBeNull();
|
|
});
|
|
|
|
it('FE-W5NAV-008: the prerelease badge only shows with a version and the flag set', () => {
|
|
seedStore(useAuthStore, {
|
|
user: buildUser({ username: 'testuser' }),
|
|
isAuthenticated: true,
|
|
isPrerelease: true,
|
|
appVersion: '3.5.0-rc1',
|
|
});
|
|
const { unmount } = render(<Navbar />);
|
|
expect(screen.getByText('3.5.0-rc1')).toBeInTheDocument();
|
|
unmount();
|
|
|
|
seedStore(useAuthStore, { isPrerelease: true, appVersion: null });
|
|
render(<Navbar />);
|
|
expect(screen.queryByText('3.5.0-rc1')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('FE-W5NAV-009: the back, share and theme buttons reset their hover background', () => {
|
|
render(<Navbar showBack onBack={vi.fn()} onShare={vi.fn()} />);
|
|
|
|
const back = screen.getByRole('button', { name: /back/i });
|
|
fireEvent.mouseEnter(back);
|
|
expect(back.style.background).toBe('var(--bg-hover)');
|
|
fireEvent.mouseLeave(back);
|
|
expect(back.style.background).toBe('transparent');
|
|
|
|
const share = screen.getByRole('button', { name: /share/i });
|
|
fireEvent.mouseEnter(share);
|
|
expect(share.style.background).toBe('var(--bg-hover)');
|
|
fireEvent.mouseLeave(share);
|
|
expect(share.style.background).toBe('var(--bg-card)');
|
|
|
|
const theme = document.querySelector('button[title]:not([data-help-button])') as HTMLElement;
|
|
fireEvent.mouseEnter(theme);
|
|
expect(theme.style.background).toBe('var(--bg-hover)');
|
|
fireEvent.mouseLeave(theme);
|
|
expect(theme.style.background).toBe('transparent');
|
|
});
|
|
|
|
it('FE-W5NAV-010: toggling the theme twice restarts the transition class timer', () => {
|
|
const updateSetting = vi.fn(async () => {});
|
|
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: false }), updateSetting });
|
|
render(<Navbar />);
|
|
const theme = document.querySelector('button[title]:not([data-help-button])') as HTMLElement;
|
|
|
|
vi.useFakeTimers();
|
|
try {
|
|
fireEvent.click(theme);
|
|
expect(document.documentElement.classList.contains('trek-theme-transitioning')).toBe(true);
|
|
|
|
act(() => { vi.advanceTimersByTime(200); });
|
|
fireEvent.click(theme); // restarts the pending timer
|
|
act(() => { vi.advanceTimersByTime(200); });
|
|
expect(document.documentElement.classList.contains('trek-theme-transitioning')).toBe(true);
|
|
|
|
act(() => { vi.advanceTimersByTime(200); });
|
|
expect(document.documentElement.classList.contains('trek-theme-transitioning')).toBe(false);
|
|
} finally {
|
|
vi.useRealTimers();
|
|
}
|
|
});
|
|
|
|
it('FE-W5NAV-011: unmounting with a pending transition cancels its timer', () => {
|
|
const updateSetting = vi.fn(async () => {});
|
|
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: false }), updateSetting });
|
|
const { unmount } = render(<Navbar />);
|
|
const theme = document.querySelector('button[title]:not([data-help-button])') as HTMLElement;
|
|
|
|
vi.useFakeTimers();
|
|
try {
|
|
fireEvent.click(theme);
|
|
const clear = vi.spyOn(window, 'clearTimeout');
|
|
unmount();
|
|
expect(clear).toHaveBeenCalled();
|
|
clear.mockRestore();
|
|
} finally {
|
|
vi.useRealTimers();
|
|
document.documentElement.classList.remove('trek-theme-transitioning');
|
|
}
|
|
});
|
|
|
|
it('FE-W5NAV-012: every entry in the open user menu resets its hover background', async () => {
|
|
const user = userEvent.setup();
|
|
seedStore(useAuthStore, {
|
|
user: buildUser({ username: 'adminuser', role: 'admin' }),
|
|
isAuthenticated: true,
|
|
appVersion: '3.5.0',
|
|
});
|
|
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'dark' }) });
|
|
render(<Navbar />);
|
|
await user.click(screen.getByText('adminuser'));
|
|
|
|
for (const name of [/^Settings$/, /^Help$/, /^Admin$/]) {
|
|
const link = screen.getByRole('link', { name });
|
|
fireEvent.mouseEnter(link);
|
|
expect(link.style.background).toBe('var(--bg-hover)');
|
|
fireEvent.mouseLeave(link);
|
|
expect(link.style.background).toBe('transparent');
|
|
}
|
|
|
|
const discord = screen.getByTitle('Discord');
|
|
fireEvent.mouseEnter(discord);
|
|
expect(discord.style.background).toBe('rgba(88, 101, 242, 0.125)');
|
|
fireEvent.mouseLeave(discord);
|
|
expect(discord.style.background).toBe('var(--bg-tertiary)');
|
|
|
|
expect(document.querySelector('img[src="/text-light.svg"]')).not.toBeNull();
|
|
});
|
|
|
|
it('FE-W5NAV-013: following any menu entry closes the menu', async () => {
|
|
const user = userEvent.setup();
|
|
seedStore(useAuthStore, {
|
|
user: buildUser({ username: 'adminuser', role: 'admin' }),
|
|
isAuthenticated: true,
|
|
});
|
|
render(<Navbar />);
|
|
|
|
for (const name of [/^Settings$/, /^Help$/, /^Admin$/]) {
|
|
await user.click(screen.getByText('adminuser'));
|
|
await user.click(screen.getByRole('link', { name }));
|
|
expect(screen.queryByRole('link', { name: /^Settings$/ })).not.toBeInTheDocument();
|
|
}
|
|
});
|
|
|
|
it('FE-W5NAV-014: a rejected theme update is swallowed', async () => {
|
|
const updateSetting = vi.fn(() => Promise.reject(new Error('offline')));
|
|
seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: false }), updateSetting });
|
|
render(<Navbar />);
|
|
|
|
fireEvent.click(document.querySelector('button[title]:not([data-help-button])') as HTMLElement);
|
|
|
|
await waitFor(() => expect(updateSetting).toHaveBeenCalledWith('dark_mode', 'dark'));
|
|
document.documentElement.classList.remove('trek-theme-transitioning');
|
|
});
|
|
});
|
|
|
|
/**
|
|
* The bar's three columns (#1983).
|
|
*
|
|
* The tab pill was absolutely positioned on the centre of the bar, so it had no
|
|
* relationship to what sat beside it. Its width grows with every enabled addon
|
|
* and every page plugin, and once it outgrew the free space in the middle it
|
|
* ran underneath the logo on one side and the user menu on the other. The only
|
|
* adaptation was a fixed 1024px breakpoint that drops the labels, tuned when
|
|
* two or three addons was the whole story and blind to plugins entirely.
|
|
*
|
|
* These check the shape rather than pixels, because that is where the defect
|
|
* was: three columns in the flow cannot overlap, whatever ends up in them, and
|
|
* no measurement has to be right for that to hold. jsdom reports every width as
|
|
* zero, so an assertion on how wide anything is would pass for the wrong reason.
|
|
*/
|
|
describe('Navbar layout (#1983)', () => {
|
|
const withAddons = (n: number) => {
|
|
const addons = Array.from({ length: n }, (_, i) => ({
|
|
id: `addon${i}`, name: `Addon ${i}`, icon: 'CalendarDays', type: 'global' as const, enabled: true,
|
|
}));
|
|
server.use(http.get('/api/addons', () => HttpResponse.json({ addons })));
|
|
seedStore(useAddonStore, { addons });
|
|
};
|
|
|
|
it('keeps the tab pill in the flow rather than floating over its neighbours', () => {
|
|
withAddons(4);
|
|
const { container } = render(<Navbar />);
|
|
const pill = container.querySelector('.trek-nav-pill') as HTMLElement;
|
|
expect(pill).toBeTruthy();
|
|
// The assertion that would have caught the overlap.
|
|
expect(pill.style.position).not.toBe('absolute');
|
|
});
|
|
|
|
it('gives the columns either side of it equal weight, so it stays centred', () => {
|
|
withAddons(4);
|
|
const { container } = render(<Navbar />);
|
|
const nav = container.querySelector('nav') as HTMLElement;
|
|
const columns = Array.from(nav.children).filter(c => c.classList.contains('flex-1'));
|
|
// Left brand column and right action cluster, both flex-1 basis-0.
|
|
expect(columns).toHaveLength(2);
|
|
for (const c of columns) expect(c.classList.contains('basis-0')).toBe(true);
|
|
});
|
|
|
|
it('lets the pill shrink instead of pushing the actions off the bar', () => {
|
|
withAddons(8);
|
|
const { container } = render(<Navbar />);
|
|
const pill = container.querySelector('.trek-nav-pill') as HTMLElement;
|
|
expect(pill.classList.contains('min-w-0')).toBe(true);
|
|
expect(pill.style.overflowX).toBe('auto');
|
|
});
|
|
|
|
it('keeps both columns at their content width, so the actions never spill over the pill', () => {
|
|
withAddons(8);
|
|
const { container } = render(<Navbar />);
|
|
const nav = container.querySelector('nav') as HTMLElement;
|
|
const columns = Array.from(nav.children).filter(c => c.classList.contains('flex-1'));
|
|
// A min-w-0 column shrinks below its content and its justify-end children
|
|
// overflow leftwards across the pill (5.0.0-pre.1 feedback).
|
|
for (const c of columns) {
|
|
expect(c.classList.contains('min-w-0')).toBe(false);
|
|
expect(c.classList.contains('min-w-max')).toBe(true);
|
|
}
|
|
});
|
|
|
|
it('shows the prerelease badge in the brand column, beside the logo', () => {
|
|
seedStore(useAuthStore, { isPrerelease: true, appVersion: '5.0.0-pre.1' });
|
|
const { container } = render(<Navbar />);
|
|
const nav = container.querySelector('nav') as HTMLElement;
|
|
const brandColumn = nav.children[0] as HTMLElement;
|
|
expect(brandColumn.contains(screen.getByText('5.0.0-pre.1'))).toBe(true);
|
|
});
|
|
|
|
it('still renders every addon as a reachable link, however many there are', () => {
|
|
withAddons(8);
|
|
render(<Navbar />);
|
|
for (let i = 0; i < 8; i++) {
|
|
expect(screen.getByRole('link', { name: new RegExp(`Addon ${i}`, 'i') })).toBeInTheDocument();
|
|
}
|
|
});
|
|
});
|