frontend: add tests for login component

Author: ffreddow

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

@@ -0,0 +1,170 @@
+import { render, fireEvent, waitFor, screen } from '@testing-library/preact';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock utils before importing component to avoid side effects
+vi.mock('../../utils', () => ({
+  fetchClient: { POST: vi.fn(), GET: vi.fn() },
+  get_salt_for_user: vi.fn(),
+  generate_hash: vi.fn(),
+  storeSecretKeyInServiceWorker: vi.fn(),
+  AppState: { Loading: 0, LoggedIn: 1, LoggedOut: 2, Recovery: 3 },
+  loggedIn: { value: 0 },
+  bc: { postMessage: vi.fn() },
+}));
+
+// Subpath mock for Form used as default import replicating global test-setup structure
+vi.mock('react-bootstrap/Form', () => {
+  const { h } = require('preact');
+  const Form = ({ children, onSubmit }: { children?: unknown; onSubmit?: (e: Event) => void }) => h('form', { onSubmit }, children);
+  Form.Group = ({ children, controlId }: { children?: any; controlId?: string }) => {
+    if (children && Array.isArray(children)) {
+      children = children.map((child) => {
+        if (typeof child !== 'object') return child;
+        child.props = { ...child.props, controlId };
+        return child;
+      });
+    }
+    return h('div', {}, children);
+  };
+  Form.Label = ({ children, controlId }: { children?: unknown; controlId?: string }) => h('label', { htmlFor: controlId }, children);
+  Form.Control = ({ type, value, onChange, isInvalid, controlId }: { type: string; value?: string; onChange?: (e: Event) => void; isInvalid?: boolean; controlId?: string }) =>
+    h('input', { id: controlId, type, value, onChange, 'data-testid': `${type}-input`, className: isInvalid ? 'invalid' : '' });
+  return { default: Form };
+});
+
+import { Login } from '../Login';
+
+// Mock Alert directly to capture calls (in addition to global test-setup mock)
+vi.mock('../Alert', () => ({
+  showAlert: vi.fn(),
+}));
+
+// i18n mock
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+
+describe('Login Component', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let mockUtils: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let mockAlert: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let mockBase64: any;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    mockUtils = await import('../../utils');
+    mockAlert = await import('../Alert');
+    mockBase64 = await import('js-base64');
+
+    // default happy path mocks
+    mockUtils.get_salt_for_user.mockResolvedValue(new Uint8Array([1, 2, 3]));
+    mockUtils.generate_hash.mockResolvedValue(new Uint8Array([9, 10, 11]));
+    mockUtils.fetchClient.POST.mockResolvedValue({ response: { status: 200 }, error: null });
+    mockUtils.fetchClient.GET.mockResolvedValue({ data: { secret_salt: [5, 6, 7] }, response: { status: 200 }, error: null });
+  });
+
+  function fillAndSubmit(email = '[email protected]', password = 'ValidPass123!') {
+    render(<Login />);
+    const emailInput = screen.getByRole('textbox', { name: 'email' });
+    const passwordInput = screen.getByRole('textbox', { name: 'password' });
+    fireEvent.change(emailInput, { target: { value: email } });
+    fireEvent.change(passwordInput, { target: { value: password } });
+    fireEvent.click(screen.getByRole('button', { name: 'login' }));
+  }
+
+  it('renders form fields', () => {
+    render(<Login />);
+    expect(screen.getByRole('textbox', { name: 'email' })).toBeTruthy();
+    expect(screen.getByRole('textbox', { name: 'password' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'login' })).toBeTruthy();
+  });
+
+  it('sets credentials_wrong when get_salt_for_user fails', async () => {
+    mockUtils.get_salt_for_user.mockRejectedValue('no user');
+    fillAndSubmit();
+
+    await waitFor(() => {
+      expect(mockUtils.fetchClient.POST).not.toHaveBeenCalled();
+      expect(screen.getByRole('textbox', { name: 'email' })).toHaveClass('invalid');
+    });
+  });
+
+  it('shows verification required alert on 403 login', async () => {
+    mockUtils.fetchClient.POST.mockResolvedValue({ response: { status: 403 }, error: null });
+    fillAndSubmit();
+
+    await waitFor(() => {
+      expect(mockAlert.showAlert).toHaveBeenCalledWith('login.verify_before_login', 'danger', 'login', 'login.verify_before_login_heading');
+      expect(mockUtils.fetchClient.GET).not.toHaveBeenCalled();
+    });
+  });
+
+  it('marks credentials wrong when POST returns error', async () => {
+    mockUtils.fetchClient.POST.mockResolvedValue({ response: { status: 500 }, error: 'err' });
+    fillAndSubmit();
+
+    await waitFor(() => {
+      expect(screen.getByRole('textbox', { name: 'email' })).toHaveClass('invalid');
+    });
+  });
+
+  it('alerts when secret retrieval fails (non-200)', async () => {
+    mockUtils.fetchClient.GET.mockResolvedValue({ data: null, response: { status: 500 }, error: 'boom' });
+    fillAndSubmit();
+
+    await waitFor(() => {
+      expect(mockAlert.showAlert).toHaveBeenCalledWith('Failed with status 500: boom', 'danger');
+    });
+  });
+
+  it('successful login flow stores key, updates state and posts broadcast', async () => {
+    fillAndSubmit();
+
+    await waitFor(() => {
+      expect(window.localStorage.setItem).toHaveBeenCalledWith('loginSalt', 'encoded');
+      expect(mockUtils.generate_hash).toHaveBeenCalledTimes(2);
+      expect(mockUtils.storeSecretKeyInServiceWorker).toHaveBeenCalledWith('encoded');
+      expect(mockUtils.loggedIn.value).toBe(mockUtils.AppState.LoggedIn);
+      expect(mockUtils.bc.postMessage).toHaveBeenCalledWith('login');
+    });
+  });
+
+  it('opens and submits password recovery modal success', async () => {
+    render(<Login />);
+    fireEvent.click(screen.getByText('password_recovery'));
+    expect(screen.getByTestId('modal')).toBeTruthy();
+
+    mockUtils.fetchClient.GET.mockResolvedValueOnce({ response: { status: 200 } });
+    const emailInput = screen.getAllByRole('textbox', { name: 'email' }).find(i => (i as HTMLInputElement).id === 'startRecoveryEmail')!;
+    fireEvent.change(emailInput, { target: { value: '[email protected]' } });
+
+    const sendBtn = screen.getByRole('button', { name: 'send' });
+    fireEvent.click(sendBtn);
+
+    await waitFor(() => {
+      expect(mockAlert.showAlert).toHaveBeenCalledWith('success_alert_text', 'success', 'login', 'success_alert_heading');
+    });
+  });
+
+  it('password recovery handles error', async () => {
+    render(<Login />);
+    fireEvent.click(screen.getByText('password_recovery'));
+    expect(screen.getByTestId('modal')).toBeTruthy();
+
+    mockUtils.fetchClient.GET.mockResolvedValueOnce({ response: { status: 500 }, error: 'fail' });
+    const emailInput = screen.getAllByRole('textbox', { name: 'email' }).find(i => (i as HTMLInputElement).id === 'startRecoveryEmail')!;
+    fireEvent.change(emailInput, { target: { value: '[email protected]' } });
+
+    const sendBtn = screen.getByRole('button', { name: 'send' });
+    fireEvent.click(sendBtn);
+
+    await waitFor(() => {
+      expect(mockAlert.showAlert).toHaveBeenCalled();
+    });
+  });
+});

frontend/src/test-setup.ts

@@ -261,7 +261,7 @@ vi.mock('react-bootstrap/Alert', () => {
     dismissible?: boolean;
     onClose?: () => void;
   }
-  
+
   interface AlertComponent {
     (props: MockAlertProps): ReturnType<typeof h>;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -278,6 +278,14 @@ vi.mock('react-bootstrap/Alert', () => {
   return { default: Alert };
 });
 
+// Direct import path mock for Button (components import from 'react-bootstrap/Button')
+vi.mock('react-bootstrap/Button', () => {
+  return {
+    default: ({ children, type, disabled, onClick }: { children?: ComponentChildren; type?: string; disabled?: boolean; onClick?: () => void }) =>
+      h('button', { type, disabled, onClick, 'data-testid': 'submit-button' }, children),
+  };
+});
+
 // Mock react-feather icons
 vi.mock('react-feather', () => ({
   ChevronDown: () => h('svg', { 'data-testid': 'chevron-down' }),
@@ -329,7 +337,8 @@ vi.mock('base58', () => ({
 vi.mock('js-base64', () => ({
   Base64: {
     toUint8Array: vi.fn(),
-    fromUint8Array: vi.fn(),
+  // Provide deterministic return; tests can override with mockReturnValueOnce
+  fromUint8Array: vi.fn(() => 'encoded'),
   },
 }));
 
@@ -350,6 +359,11 @@ vi.mock('./utils', () => ({
   get_salt: vi.fn(),
   get_salt_for_user: vi.fn(),
   concat_salts: vi.fn(),
+  // App/login related state & helpers for Login component tests
+  AppState: { Loading: 0, LoggedIn: 1, LoggedOut: 2, Recovery: 3 },
+  loggedIn: { value: 0 },
+  storeSecretKeyInServiceWorker: vi.fn(),
+  bc: { postMessage: vi.fn() },
   isDebugMode: { value: false },
 }));