frontend: add component tests for the navbar

Author: ffreddow

frontend/src/components/__tests__/Navbar.test.tsx

@@ -0,0 +1,103 @@
+import { render, screen, fireEvent } from '@testing-library/preact';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import * as NavbarModule from './Navbar';
+import { connected as connectedSignal } from './Navbar';
+import { useLocation } from 'preact-iso';
+import { fetchClient, AppState, loggedIn, bc, resetSecret, clearSecretKeyFromServiceWorker } from '../utils';
+
+// Use actual module for component and functions (test-setup re-exports actual)
+const { CustomNavbar } = NavbarModule;
+
+vi.mock('median-js-bridge', () => ({
+  default: {
+    isNativeApp: () => false,
+    sidebar: { setItems: vi.fn() },
+  },
+}));
+
+vi.mock('logo', () => ({ default: 'logo.png' }));
+
+describe('Navbar', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    // Reset connection state
+    connectedSignal.value = false;
+    // Reset location
+  const loc = useLocation() as unknown as { url: string };
+  loc.url = '/';
+  });
+
+  it('renders links and toggles collapse', async () => {
+    render(<CustomNavbar />);
+
+    const navbar = screen.getByRole('navigation');
+    expect(navbar).toBeInTheDocument();
+
+    expect(screen.getByText('chargers')).toBeInTheDocument();
+    expect(screen.getByText('token')).toBeInTheDocument();
+    expect(screen.getByText('user')).toBeInTheDocument();
+    expect(screen.getByText('logout')).toBeInTheDocument();
+
+    const toggler = screen.getByRole('button');
+    fireEvent.click(toggler);
+    fireEvent.click(toggler);
+  });
+
+  it('hides when connected signal is true', async () => {
+    connectedSignal.value = true;
+    render(<CustomNavbar />);
+    const navbar = screen.getByRole('navigation', { hidden: true });
+    expect(navbar).toHaveAttribute('hidden');
+  });
+
+  it('logout() clears state and calls API (single session)', async () => {
+    (fetchClient.GET as unknown as ReturnType<typeof vi.fn>).mockReset();
+    (fetchClient.GET as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce({ error: undefined });
+
+    const actual = await vi.importActual<typeof import('./Navbar')>('./Navbar');
+    await actual.logout(false);
+
+    // Assert
+    expect(fetchClient.GET).toHaveBeenCalledWith('/user/logout', { params: { query: { logout_all: false } }, credentials: 'same-origin' });
+    expect(resetSecret).toHaveBeenCalled();
+    expect(window.localStorage.removeItem).toHaveBeenCalledWith('loginSalt');
+    expect(clearSecretKeyFromServiceWorker).toHaveBeenCalled();
+    expect(loggedIn.value).toBe(AppState.LoggedOut);
+    expect(bc.postMessage).toHaveBeenCalledWith('logout');
+  });
+
+  it('logout() shows alert when logout_all fails', async () => {
+    (fetchClient.GET as unknown as ReturnType<typeof vi.fn>).mockReset();
+    (fetchClient.GET as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce({ error: 'boom' });
+    const { showAlert } = await vi.importMock<typeof import('./Alert')>('./Alert');
+    const showAlertSpy = showAlert as unknown as ReturnType<typeof vi.fn>;
+
+    const actual = await vi.importActual<typeof import('./Navbar')>('./Navbar');
+    await actual.logout(true);
+
+    // Assert
+    expect(showAlertSpy).toHaveBeenCalledWith('boom', 'danger');
+    expect(resetSecret).not.toHaveBeenCalled();
+  });
+
+  it('setAppNavigation configures sidebar via Median', async () => {
+    const Median = await vi.importMock<typeof import('median-js-bridge')>('median-js-bridge');
+    const setItems = vi.spyOn(Median.default.sidebar, 'setItems');
+    const mod = await vi.importActual<typeof import('./Navbar')>('./Navbar');
+    mod.setAppNavigation();
+    expect(setItems).toHaveBeenCalled();
+  });
+
+  it('clicking logout link triggers logout(false)', async () => {
+    (fetchClient.GET as unknown as ReturnType<typeof vi.fn>).mockReset();
+    (fetchClient.GET as unknown as ReturnType<typeof vi.fn>).mockResolvedValueOnce({ error: undefined });
+    render(<CustomNavbar />);
+
+    const logoutLink = screen.getByText('logout');
+    fireEvent.click(logoutLink);
+
+    // Assert that the API was called with logout_all=false
+    await Promise.resolve();
+    expect(fetchClient.GET).toHaveBeenCalledWith('/user/logout', { params: { query: { logout_all: false } }, credentials: 'same-origin' });
+  });
+});

frontend/src/test-setup.ts

@@ -178,23 +178,23 @@ vi.mock('react-bootstrap', () => {
     Item: ({ children, ...props }: MockComponentProps) => h('button', { ...props }, children),
   };
 
-  const Nav = ({ children, ...props }: MockComponentProps) =>
-    h('nav', { ...props }, children);
+  const Nav = ({ children, className }: MockComponentProps) =>
+    h('div', { className }, children);
 
-  Nav.Link = ({ children, ...props }: MockComponentProps) =>
-    h('a', { ...props }, children);
+  Nav.Link = ({ children, href, onClick, className }: MockComponentProps) =>
+    h('a', { href, onClick, className }, children);
 
-  const Navbar = ({ children, ...props }: MockComponentProps) =>
-    h('nav', { ...props, className: 'navbar' }, children);
+  const Navbar = ({ children, id, hidden, className }: MockComponentProps) =>
+    h('nav', { id, hidden, className: className ? className : 'navbar', role: 'navigation' }, children);
 
-  Navbar.Brand = ({ children, ...props }: MockComponentProps) =>
-    h('a', { ...props, className: 'navbar-brand' }, children);
+  Navbar.Brand = ({ children, href, className }: MockComponentProps) =>
+    h('a', { href, className: className ? className : 'navbar-brand' }, children);
 
-  Navbar.Toggle = ({ children, ...props }: MockComponentProps) =>
-    h('button', { ...props, className: 'navbar-toggle' }, children);
+  Navbar.Toggle = ({ children, onClick, id, 'aria-controls': ariaControls }: MockComponentProps & { 'aria-controls'?: string }) =>
+    h('button', { onClick, id, 'aria-controls': ariaControls, className: 'navbar-toggle' }, children);
 
-  Navbar.Collapse = ({ children, ...props }: MockComponentProps) =>
-    h('div', { ...props, className: 'navbar-collapse' }, children);
+  Navbar.Collapse = ({ children, id, className }: MockComponentProps) =>
+    h('div', { id, className: className ? className : 'navbar-collapse' }, children);
 
   const InputGroup = ({ children, ...props }: MockComponentProps) =>
     h('div', { ...props, className: 'input-group' }, children);
@@ -286,15 +286,41 @@ vi.mock('react-bootstrap/Button', () => {
   };
 });
 
-// Mock react-feather icons
+// Direct import path mocks for Nav and Navbar
+vi.mock('react-bootstrap/Nav', () => {
+  const Nav = ({ children, className }: MockComponentProps) => h('div', { className }, children);
+  const NavWithStatics = Object.assign(Nav, {
+    Link: ({ children, href, onClick, className }: MockComponentProps) =>
+      h('a', { href, onClick, className }, children),
+  });
+  return { default: NavWithStatics };
+});
+
+vi.mock('react-bootstrap/Navbar', () => {
+  const Navbar = ({ children, id, hidden, className }: MockComponentProps) =>
+    h('nav', { id, hidden, className, role: 'navigation' }, children);
+  const NavbarWithStatics = Object.assign(Navbar, {
+    Brand: ({ children, href, className }: MockComponentProps) => h('a', { href, className }, children),
+    Toggle: ({ children, onClick, id, 'aria-controls': ariaControls }: MockComponentProps & { 'aria-controls'?: string }) =>
+      h('button', { onClick, id, 'aria-controls': ariaControls, className: 'navbar-toggle' }, children),
+    Collapse: ({ children, id, className }: MockComponentProps) => h('div', { id, className }, children),
+  });
+  return { default: NavbarWithStatics };
+});
+
+// Mock react-feather icons (use non-SVG to avoid namespace issues in jsdom)
 vi.mock('react-feather', () => ({
-  ChevronDown: () => h('svg', { 'data-testid': 'chevron-down' }),
-  ChevronUp: () => h('svg', { 'data-testid': 'chevron-up' }),
-  Edit: () => h('svg', { 'data-testid': 'edit-icon' }),
-  Eye: () => h('svg', { 'data-testid': 'eye-icon' }),
-  EyeOff: () => h('svg', { 'data-testid': 'eye-off-icon' }),
-  Monitor: () => h('svg', { 'data-testid': 'monitor-icon' }),
-  Trash2: () => h('svg', { 'data-testid': 'trash-icon', className: 'feather-trash-2' }),
+  ChevronDown: () => h('span', { 'data-testid': 'chevron-down' }),
+  ChevronUp: () => h('span', { 'data-testid': 'chevron-up' }),
+  Edit: () => h('span', { 'data-testid': 'edit-icon' }),
+  Eye: () => h('span', { 'data-testid': 'eye-icon' }),
+  EyeOff: () => h('span', { 'data-testid': 'eye-off-icon' }),
+  Monitor: () => h('span', { 'data-testid': 'monitor-icon' }),
+  Trash2: () => h('span', { 'data-testid': 'trash-icon', className: 'feather-trash-2' }),
+  Key: () => h('span', { 'data-testid': 'key-icon' }),
+  LogOut: () => h('span', { 'data-testid': 'logout-icon' }),
+  Server: () => h('span', { 'data-testid': 'server-icon' }),
+  User: () => h('span', { 'data-testid': 'user-icon' }),
 }));
 
 // Mock i18next
@@ -365,19 +391,24 @@ vi.mock('./utils', () => ({
   storeSecretKeyInServiceWorker: vi.fn(),
   bc: { postMessage: vi.fn() },
   isDebugMode: { value: false },
+  resetSecret: vi.fn(),
+  clearSecretKeyFromServiceWorker: vi.fn().mockResolvedValue(undefined),
+  FRONTEND_URL: '',
 }));
 
 // Mock preact-iso
 vi.mock('preact-iso', () => ({
   useLocation: () => ({
     route: vi.fn(),
+    url: '/',
   }),
 }));
 
 // Mock median-js-bridge
 vi.mock('median-js-bridge', () => ({
   default: {
     isNativeApp: () => false,
+    sidebar: { setItems: vi.fn() },
   },
 }));
 
@@ -403,9 +434,18 @@ vi.mock('./components/Circle', () => ({
   Circle: vi.fn(() => null),
 }));
 
-// Mock Navbar component
-vi.mock('./components/Navbar', () => ({
-  logout: vi.fn(),
+// Mock components/Navbar to stub logout but keep other exports real
+vi.mock('./components/Navbar', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('./components/Navbar')>();
+  return {
+    ...actual,
+    logout: vi.fn(),
+  };
+});
+
+// Also mock direct Alert import path used by components (Navbar imports './Alert')
+vi.mock('./Alert', () => ({
+  showAlert: vi.fn(),
 }));
 
 // Mock PasswordComponent