@accounter/scraper-app 0.0.1

package/src/ui/__tests__/accounts-tab.test.tsx

@@ -0,0 +1,134 @@
+// @vitest-environment happy-dom
+
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { AccountsTab } from '../screens/config/accounts-tab.js';
+import { AccountRecord } from '../../server/check-accounts.js';
+
+function mockFetch(initial: AccountRecord[]) {
+  let accounts = [...initial];
+  const fetchMock = vi.fn(async (url: string, options?: RequestInit) => {
+    if (url === '/api/vault/accounts') {
+      return { ok: true, json: async () => accounts } as Response;
+    }
+    const putMatch = (url as string).match(/\/api\/vault\/accounts\/(.+)/);
+    if (putMatch && options?.method === 'PUT') {
+      const id = putMatch[1];
+      const { status } = JSON.parse(options.body as string) as { status: AccountRecord['status'] };
+      accounts = accounts.map(a => (a.id === id ? { ...a, status } : a));
+      return { ok: true, json: async () => accounts } as Response;
+    }
+    return { ok: false, json: async () => ({}) } as Response;
+  });
+  vi.stubGlobal('fetch', fetchMock);
+  return fetchMock;
+}
+
+const SAMPLE_ACCOUNTS: AccountRecord[] = [
+  {
+    id: 'acc-1',
+    sourceId: 'src-a',
+    sourceType: 'poalim',
+    accountNumber: '123456',
+    branchNumber: '700',
+    status: 'pending',
+  },
+  {
+    id: 'acc-2',
+    sourceId: 'src-a',
+    sourceType: 'poalim',
+    accountNumber: '789012',
+    status: 'accepted',
+  },
+  {
+    id: 'acc-3',
+    sourceId: 'src-b',
+    sourceType: 'max',
+    accountNumber: '333333',
+    status: 'ignored',
+  },
+];
+
+beforeEach(() => {
+  mockFetch([]);
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('AccountsTab', () => {
+  it('renders empty state when no accounts', async () => {
+    render(<AccountsTab />);
+    await waitFor(() => {
+      expect(screen.getByText(/no account records discovered/i)).toBeTruthy();
+    });
+  });
+
+  it('renders status badges for each account', async () => {
+    vi.unstubAllGlobals();
+    mockFetch(SAMPLE_ACCOUNTS);
+    render(<AccountsTab />);
+
+    await waitFor(() => screen.getAllByText('pending'));
+    expect(screen.getAllByText('accepted').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('ignored').length).toBeGreaterThan(0);
+  });
+
+  it('shows pending notice for pending accounts', async () => {
+    vi.unstubAllGlobals();
+    mockFetch(SAMPLE_ACCOUNTS);
+    render(<AccountsTab />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/visit the accounter client/i)).toBeTruthy();
+    });
+  });
+
+  it('changes status via dropdown', async () => {
+    vi.unstubAllGlobals();
+    const fetchMock = mockFetch(SAMPLE_ACCOUNTS);
+    render(<AccountsTab />);
+
+    await waitFor(() => screen.getAllByRole('combobox'));
+    const selects = screen.getAllByRole('combobox') as HTMLSelectElement[];
+    const pendingSelect = selects.find(s => s.value === 'pending')!;
+
+    await userEvent.selectOptions(pendingSelect, 'accepted');
+
+    await waitFor(() => {
+      const putCalls = fetchMock.mock.calls.filter(
+        ([, opts]) => (opts as RequestInit | undefined)?.method === 'PUT',
+      );
+      expect(putCalls.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('groups accounts by source', async () => {
+    vi.unstubAllGlobals();
+    mockFetch(SAMPLE_ACCOUNTS);
+    render(<AccountsTab />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Bank Hapoalim \(src-a\)/)).toBeTruthy();
+      expect(screen.getByText(/Max \(src-b\)/)).toBeTruthy();
+    });
+  });
+
+  it('after status change the badge updates', async () => {
+    vi.unstubAllGlobals();
+    mockFetch([SAMPLE_ACCOUNTS[0]]);
+    render(<AccountsTab />);
+
+    await waitFor(() => screen.getAllByText('pending'));
+    const select = screen.getByRole('combobox') as HTMLSelectElement;
+
+    await userEvent.selectOptions(select, 'accepted');
+
+    await waitFor(() => {
+      expect(screen.getAllByText('accepted').length).toBeGreaterThan(0);
+    });
+  });
+});

package/src/ui/__tests__/config.test.tsx

@@ -0,0 +1,99 @@
+// @vitest-environment happy-dom
+
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Config } from '../screens/config/config.js';
+
+function mockFetchEmpty() {
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (url: string) => {
+      if (url === '/api/vault/sources') return { ok: true, json: async () => [] } as Response;
+      if (url === '/api/vault/accounts') return { ok: true, json: async () => [] } as Response;
+      if (url === '/api/vault/settings')
+        return {
+          ok: true,
+          json: async () => ({
+            showBrowser: false,
+            fetchBankOfIsraelRates: true,
+            concurrentScraping: true,
+          }),
+        } as Response;
+      return { ok: false, json: async () => ({}) } as Response;
+    }),
+  );
+}
+
+beforeEach(() => {
+  mockFetchEmpty();
+});
+
+describe('Config tab navigation', () => {
+  it('renders Credentials tab by default', async () => {
+    render(<Config />);
+    await waitFor(() => {
+      expect(screen.getByRole('tab', { name: 'Credentials' })).toBeTruthy();
+    });
+    expect(
+      screen.getByRole('tab', { name: 'Credentials' }).getAttribute('aria-selected'),
+    ).toBe('true');
+    expect(screen.getByText(/no sources configured/i)).toBeTruthy();
+  });
+
+  it('shows server connection fields in Credentials tab', async () => {
+    render(<Config />);
+    await waitFor(() => screen.getByLabelText(/server url/i));
+    expect(screen.getByLabelText(/api key/i)).toBeTruthy();
+    expect(screen.getByRole('button', { name: /test connection/i })).toBeTruthy();
+  });
+
+  it('switches to Settings tab on click', async () => {
+    render(<Config />);
+    await waitFor(() => screen.getByRole('tab', { name: 'Settings' }));
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Settings' }));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/show browser/i)).toBeTruthy();
+    });
+    expect(screen.getByRole('tab', { name: 'Settings' }).getAttribute('aria-selected')).toBe('true');
+    expect(
+      screen.getByRole('tab', { name: 'Credentials' }).getAttribute('aria-selected'),
+    ).toBe('false');
+  });
+
+  it('switches to Accounts tab on click', async () => {
+    render(<Config />);
+    await waitFor(() => screen.getByRole('tab', { name: 'Accounts' }));
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Accounts' }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/no account records discovered/i)).toBeTruthy();
+    });
+    expect(screen.getByRole('tab', { name: 'Accounts' }).getAttribute('aria-selected')).toBe('true');
+  });
+
+  it('only renders the active panel', async () => {
+    render(<Config />);
+    await waitFor(() => screen.getByText(/no sources/i));
+
+    expect(screen.queryByLabelText(/show browser/i)).toBeNull();
+    expect(screen.queryByText(/no account records/i)).toBeNull();
+  });
+
+  it('can navigate back to Credentials after switching away', async () => {
+    render(<Config />);
+    await waitFor(() => screen.getByText(/no sources/i));
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Settings' }));
+    await waitFor(() => screen.getByLabelText(/show browser/i));
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Credentials' }));
+    await waitFor(() => {
+      expect(screen.getByText(/no sources configured/i)).toBeTruthy();
+    });
+  });
+});

package/src/ui/__tests__/history.test.tsx

@@ -0,0 +1,94 @@
+// @vitest-environment happy-dom
+
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { History, formatDuration } from '../screens/history.js';
+import type { RunRecord } from '../../shared/types.js';
+
+function mockFetch(records: RunRecord[]) {
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async () => ({ ok: true, json: async () => records }) as Response),
+  );
+}
+
+const BASE_TIME = '2024-06-01T10:00:00.000Z';
+const LATER_TIME = '2024-06-01T10:02:30.000Z'; // +2m 30s
+
+function makeRecord(overrides: Partial<RunRecord> = {}): RunRecord {
+  return {
+    id: 'run-1',
+    startedAt: BASE_TIME,
+    completedAt: LATER_TIME,
+    totalInserted: 10,
+    totalSkipped: 2,
+    errorCount: 0,
+    sources: [],
+    ...overrides,
+  };
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('History screen', () => {
+  it('renders empty state when response is []', async () => {
+    mockFetch([]);
+    render(<History />);
+    await waitFor(() => {
+      expect(screen.getByText(/no scrape runs recorded yet/i)).toBeTruthy();
+    });
+  });
+
+  it('renders correct number of rows from mock API response', async () => {
+    mockFetch([
+      makeRecord({ id: 'run-1' }),
+      makeRecord({ id: 'run-2', totalInserted: 5 }),
+      makeRecord({ id: 'run-3', totalInserted: 1 }),
+    ]);
+    render(<History />);
+    await waitFor(() => {
+      expect(
+        screen.getAllByRole('button').filter(el => el.hasAttribute('aria-expanded')).length,
+      ).toBe(3);
+    });
+  });
+
+  it('expanding a row shows per-source detail', async () => {
+    const record = makeRecord({
+      sources: [{ sourceId: 'src-poalim', nickname: 'Poalim', sourceType: 'poalim', status: 'done', inserted: 7, skipped: 1 }],
+    });
+    mockFetch([record]);
+    render(<History />);
+
+    await waitFor(() => screen.getByRole('table', { name: /scrape history/i }));
+    const dataRow = screen.getAllByRole('button').find(el => el.hasAttribute('aria-expanded'));
+    expect(dataRow).toBeTruthy();
+    await userEvent.setup().click(dataRow!);
+
+    await waitFor(() => {
+      expect(screen.getByText('Poalim')).toBeTruthy();
+      expect(screen.getByText('poalim')).toBeTruthy();
+    });
+  });
+
+  it('duration is calculated and displayed as Xm Ys', () => {
+    expect(formatDuration(BASE_TIME, LATER_TIME)).toBe('2m 30s');
+    expect(formatDuration(BASE_TIME, BASE_TIME)).toBe('0m 0s');
+    expect(formatDuration('2024-01-01T00:00:00.000Z', '2024-01-01T00:01:00.000Z')).toBe('1m 0s');
+  });
+
+  it('Refresh button re-fetches data', async () => {
+    const fetchMock = vi.fn(async () => ({ ok: true, json: async () => [] }) as Response);
+    vi.stubGlobal('fetch', fetchMock);
+
+    render(<History />);
+    await waitFor(() => screen.getByText(/no scrape runs recorded yet/i));
+
+    const callsBefore = fetchMock.mock.calls.length;
+    await userEvent.setup().click(screen.getByRole('button', { name: /refresh/i }));
+    await waitFor(() => expect(fetchMock.mock.calls.length).toBeGreaterThan(callsBefore));
+  });
+});

package/src/ui/__tests__/run.test.tsx

@@ -0,0 +1,195 @@
+// @vitest-environment happy-dom
+
+import { render, screen, waitFor, act } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { Run } from '../screens/run.js';
+import { useRunSocket } from '../lib/ws.js';
+
+function RunWithSocket(props: { onNavigateAccounts?: () => void }) {
+  const socket = useRunSocket();
+  return <Run {...socket} {...props} />;
+}
+
+// ── WebSocket mock ────────────────────────────────────────────────────────────
+
+type MessageHandler = (event: { data: string }) => void;
+
+let wsInstance: MockWs | null = null;
+
+class MockWs {
+  readyState = WebSocket.OPEN;
+  onmessage: MessageHandler | null = null;
+  sent: unknown[] = [];
+
+  send(data: string) {
+    this.sent.push(JSON.parse(data));
+  }
+
+  close() {}
+
+  /** Push a server message into the component */
+  push(msg: object) {
+    this.onmessage?.({ data: JSON.stringify(msg) });
+  }
+}
+
+beforeEach(() => {
+  wsInstance = new MockWs();
+  const MockWebSocketCtor = function MockWebSocketCtor() {
+    return wsInstance;
+  };
+  MockWebSocketCtor.OPEN = 1;
+  MockWebSocketCtor.CONNECTING = 0;
+  MockWebSocketCtor.CLOSING = 2;
+  MockWebSocketCtor.CLOSED = 3;
+  vi.stubGlobal('WebSocket', MockWebSocketCtor);
+  // Stub fetch → empty sources list
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async () => ({ ok: true, json: async () => [] }) as Response),
+  );
+});
+
+afterEach(() => {
+  wsInstance = null;
+  vi.unstubAllGlobals();
+});
+
+function ws(): MockWs {
+  if (!wsInstance) throw new Error('no ws');
+  return wsInstance;
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function push(msg: object) {
+  act(() => ws().push(msg));
+}
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('Run screen', () => {
+  it('"Run" button fires run-start message', async () => {
+    // provide one source so the button is not disabled due to no selection
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => ({
+        ok: true,
+        json: async () => [{ id: 'src-1', type: 'poalim', userCode: 'u', password: 'p' }],
+      }) as Response),
+    );
+
+    render(<RunWithSocket />);
+    await waitFor(() => expect(screen.queryByRole('button', { name: /^run$/i })).toBeTruthy());
+
+    await userEvent.click(screen.getByRole('button', { name: /^run$/i }));
+
+    expect(ws().sent).toContainEqual(
+      expect.objectContaining({ type: 'run-start', sourceIds: ['src-1'] }),
+    );
+  });
+
+  it('task-pending → task-running → TaskRow shows correct states', async () => {
+    render(<RunWithSocket />);
+    await waitFor(() => screen.getByRole('button', { name: /^run$/i }));
+
+    push({ type: 'task-pending', sourceId: 'src-1' });
+    await waitFor(() => expect(screen.getAllByText(/pending/i).length).toBeGreaterThan(0));
+
+    push({ type: 'task-running', sourceId: 'src-1' });
+    // The badge text contains "Running…" (with ellipsis), distinct from the button "Running…"
+    await waitFor(() => expect(screen.getAllByText(/running/i).length).toBeGreaterThan(0));
+  });
+
+  it('task-done → TaskRow shows green with counts', async () => {
+    render(<RunWithSocket />);
+    await waitFor(() => screen.getByRole('button', { name: /^run$/i }));
+
+    push({ type: 'task-pending', sourceId: 'src-1' });
+    push({ type: 'task-done', sourceId: 'src-1', inserted: 5, skipped: 2, insertedIds: [] });
+
+    await waitFor(() => {
+      expect(screen.getByText(/done/i)).toBeTruthy();
+      expect(screen.getByText(/5 new/i)).toBeTruthy();
+      expect(screen.getByText(/2 skipped/i)).toBeTruthy();
+    });
+  });
+
+  it('task-error → TaskRow shows red with message', async () => {
+    render(<RunWithSocket />);
+    await waitFor(() => screen.getByRole('button', { name: /^run$/i }));
+
+    push({ type: 'task-pending', sourceId: 'src-1' });
+    push({ type: 'task-error', sourceId: 'src-1', message: 'Login failed' });
+
+    await waitFor(() => {
+      expect(screen.getByText(/error/i)).toBeTruthy();
+    });
+
+    // Expand details to see message
+    await userEvent.click(screen.getByRole('button', { name: /details/i }));
+    await waitFor(() => expect(screen.getByText(/Login failed/)).toBeTruthy());
+  });
+
+  it('task-blocked → TaskRow shows yellow with account IDs', async () => {
+    render(<RunWithSocket />);
+    await waitFor(() => screen.getByRole('button', { name: /^run$/i }));
+
+    push({
+      type: 'task-blocked',
+      sourceId: 'src-1',
+      sourceType: 'poalim',
+      unknownAccounts: ['ACC-001', 'ACC-002'],
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/blocked/i)).toBeTruthy();
+      expect(screen.getByText(/ACC-001/)).toBeTruthy();
+      expect(screen.getByText(/ACC-002/)).toBeTruthy();
+    });
+  });
+
+  it('otp-required → OtpModal appears; submit closes modal and sends otp-submit', async () => {
+    render(<RunWithSocket />);
+    await waitFor(() => screen.getByRole('button', { name: /^run$/i }));
+
+    push({ type: 'task-pending', sourceId: 'src-1' });
+    push({ type: 'otp-required', sourceId: 'src-1' });
+
+    await waitFor(() => expect(screen.getByRole('dialog')).toBeTruthy());
+
+    await userEvent.type(screen.getByLabelText(/otp code/i), '123456');
+    await userEvent.click(screen.getByRole('button', { name: /submit otp/i }));
+
+    expect(ws().sent).toContainEqual({ type: 'otp-submit', sourceId: 'src-1', otp: '123456' });
+  });
+
+  it('run-complete → summary panel renders; Run button re-enabled', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => ({
+        ok: true,
+        json: async () => [{ id: 'src-1', type: 'poalim', userCode: 'u', password: 'p' }],
+      }) as Response),
+    );
+
+    render(<RunWithSocket />);
+    await waitFor(() => screen.getByRole('button', { name: /^run$/i }));
+
+    // Simulate a running state then completion
+    push({ type: 'task-pending', sourceId: 'src-1' });
+    push({ type: 'task-running', sourceId: 'src-1' });
+    push({ type: 'task-done', sourceId: 'src-1', inserted: 3, skipped: 1, insertedIds: [] });
+    push({ type: 'run-complete', totalInserted: 3, totalSkipped: 1, errors: 0 });
+
+    await waitFor(() => {
+      expect(screen.getByRole('region', { name: /run summary/i })).toBeTruthy();
+    });
+
+    // Run button should be enabled again
+    const runBtn = screen.getByRole('button', { name: /^run$/i });
+    expect((runBtn as HTMLButtonElement).disabled).toBe(false);
+  });
+});

package/src/ui/__tests__/settings-tab.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+
+import { render, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { SettingsTab } from '../screens/config/settings-tab.js';
+
+const DEFAULT_SETTINGS = {
+  showBrowser: false,
+  fetchBankOfIsraelRates: true,
+  concurrentScraping: true,
+};
+
+function mockFetch(settings = DEFAULT_SETTINGS) {
+  let current = { ...settings };
+  const fetchMock = vi.fn(async (url: string, options?: RequestInit) => {
+    if (url === '/api/vault/settings') {
+      if (!options || options.method !== 'PUT') {
+        return { ok: true, json: async () => ({ ...current }) } as Response;
+      }
+      const patch = JSON.parse(options.body as string) as typeof current;
+      current = { ...current, ...patch };
+      return { ok: true, json: async () => ({ ...current }) } as Response;
+    }
+    return { ok: false, json: async () => ({}) } as Response;
+  });
+  vi.stubGlobal('fetch', fetchMock);
+  return fetchMock;
+}
+
+beforeEach(() => {
+  mockFetch();
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('SettingsTab', () => {
+  it('renders boolean toggles', async () => {
+    render(<SettingsTab />);
+    await waitFor(() => screen.getByLabelText(/show browser/i));
+    expect(screen.getByLabelText(/show browser/i)).toBeTruthy();
+    expect(screen.getByLabelText(/fetch bank of israel/i)).toBeTruthy();
+    expect(screen.getByLabelText(/scrape sources concurrently/i)).toBeTruthy();
+  });
+
+  it('renders number and text fields', async () => {
+    render(<SettingsTab />);
+    await waitFor(() => screen.getByLabelText(/default date range/i));
+    expect(screen.getByLabelText(/history file path/i)).toBeTruthy();
+  });
+
+  it('auto-saves on toggle change', async () => {
+    const fetchMock = mockFetch();
+    render(<SettingsTab />);
+    await waitFor(() => screen.getByLabelText(/show browser/i));
+
+    await userEvent.click(screen.getByLabelText(/show browser/i));
+
+    await waitFor(() => {
+      const putCalls = fetchMock.mock.calls.filter(
+        ([, opts]) => (opts as RequestInit | undefined)?.method === 'PUT',
+      );
+      expect(putCalls.length).toBeGreaterThan(0);
+      const body = JSON.parse(putCalls[0][1]!.body as string) as { showBrowser: boolean };
+      expect(body.showBrowser).toBe(true);
+    });
+  });
+
+  it('reflects initial values from the server', async () => {
+    mockFetch({ ...DEFAULT_SETTINGS, showBrowser: true });
+    render(<SettingsTab />);
+    await waitFor(() => {
+      expect((screen.getByLabelText(/show browser/i) as HTMLInputElement).checked).toBe(true);
+    });
+  });
+});