test: add component unit tests for critical UI components (Closes #535)

frontend/package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview",
     "lint": "eslint .",
     "format": "prettier . --write",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:headed": "playwright test --headed",
@@ -59,6 +61,9 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@playwright/test": "^1.61.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.6",
     "@types/crypto-js": "^4.2.2",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.21",
@@ -78,13 +83,14 @@
     "glob": "^13.0.0",
     "globals": "^16.5.0",
     "husky": "^9.1.7",
+    "jsdom": "^30.0.1",
     "lint-staged": "^16.2.7",
     "prettier": "3.6.2",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.1",
     "vite": "^7.2.6",
     "vite-plugin-node-polyfills": "^0.24.0",
     "vite-plugin-wasm": "^3.5.0",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.11"
   }
 }

frontend/src/__tests__/BulkPaymentStatusTracker.test.tsx

@@ -0,0 +1,84 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { BulkPaymentStatusTracker } from '../components/BulkPaymentStatusTracker';
+
+// Use vi.hoisted for mock variables
+const mockFetchPayrollRuns = vi.hoisted(() => vi.fn());
+const mockFetchPayrollRunSummary = vi.hoisted(() => vi.fn());
+const mockRetryFailedBatch = vi.hoisted(() => vi.fn());
+const mockGetTxExplorerUrl = vi.hoisted(() => vi.fn((hash: string) => `https://stellar.expert/explorer/testnet/tx/${hash}`));
+
+vi.mock('../services/bulkPaymentStatus', () => ({
+  fetchPayrollRuns: mockFetchPayrollRuns,
+  fetchPayrollRunSummary: mockFetchPayrollRunSummary,
+  getTxExplorerUrl: mockGetTxExplorerUrl,
+  retryFailedBatch: mockRetryFailedBatch,
+}));
+
+vi.mock('../hooks/useNotification', () => ({
+  useNotification: () => ({
+    notifyError: vi.fn(),
+    notifySuccess: vi.fn(),
+  }),
+}));
+
+vi.mock('../hooks/useSocket', () => ({
+  useSocket: () => ({
+    socket: null,
+  }),
+}));
+
+vi.mock('../hooks/useWallet', () => ({
+  useWallet: () => ({
+    address: null,
+  }),
+}));
+
+vi.mock('../hooks/useWalletSigning', () => ({
+  useWalletSigning: () => ({
+    sign: vi.fn(),
+  }),
+}));
+
+vi.mock('../services/contracts', () => ({
+  contractService: {
+    initialize: vi.fn(),
+    getContractId: vi.fn(),
+  },
+}));
+
+describe('BulkPaymentStatusTracker', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders the component title', () => {
+    mockFetchPayrollRuns.mockResolvedValue({ data: [] });
+    render(<BulkPaymentStatusTracker organizationId={1} />);
+    expect(screen.getByText('Bulk Payment Status Tracker')).toBeTruthy();
+  });
+
+  it('shows loading state initially', () => {
+    mockFetchPayrollRuns.mockReturnValue(new Promise(() => {}));
+    render(<BulkPaymentStatusTracker organizationId={1} />);
+    expect(screen.getByText(/Loading bulk payroll runs/)).toBeTruthy();
+  });
+
+  it('shows empty state when no payroll runs exist', async () => {
+    mockFetchPayrollRuns.mockResolvedValue({ data: [] });
+    render(<BulkPaymentStatusTracker organizationId={1} />);
+    await vi.waitFor(() => {
+      expect(screen.getByText('No payroll batch runs found.')).toBeTruthy();
+    });
+  });
+
+  it('shows a refresh button', () => {
+    mockFetchPayrollRuns.mockResolvedValue({ data: [] });
+    render(<BulkPaymentStatusTracker organizationId={1} />);
+    expect(screen.getByText('Refresh')).toBeTruthy();
+  });
+});

frontend/src/__tests__/CSVUploader.test.tsx

@@ -0,0 +1,197 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup, waitFor } from '@testing-library/react';
+import { CSVUploader } from '../components/CSVUploader';
+
+describe('CSVUploader', () => {
+  const mockOnDataParsed = vi.fn();
+  const requiredColumns = ['name', 'email', 'wallet'];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders the upload zone with required columns info', () => {
+    render(
+      <CSVUploader requiredColumns={requiredColumns} onDataParsed={mockOnDataParsed} />
+    );
+    expect(screen.getByText(/Drag and drop your CSV file/i)).toBeTruthy();
+    expect(screen.getByText(/name, email, wallet/i)).toBeTruthy();
+  });
+
+  // Helper: use drop event to trigger file upload (bypasses FileReader in jsdom)
+  function simulateFileDrop(container: HTMLElement, file: File, content: string) {
+    // Mock FileReader to work synchronously in jsdom
+    const origReader = globalThis.FileReader;
+    globalThis.FileReader = class MockFileReader {
+      onload: ((e: { target: { result: string } }) => void) | null = null;
+      result: string | null = null;
+      readAsText() {
+        // Schedule onload on next microtask
+        setTimeout(() => {
+          if (this.onload) {
+            this.onload({ target: { result: content } });
+          }
+        }, 0);
+      }
+    } as unknown as typeof FileReader;
+
+    // Find the drop zone
+    const dropZone = container.querySelector('[class*="border-2"]') as HTMLElement;
+    if (!dropZone) throw new Error('Drop zone not found');
+
+    // Simulate drag events
+    fireEvent.dragEnter(dropZone);
+    fireEvent.dragOver(dropZone);
+
+    // Simulate drop with file
+    Object.defineProperty(file, 'name', { value: file.name, writable: true });
+    fireEvent.drop(dropZone, {
+      dataTransfer: {
+        files: [file],
+        items: [{ kind: 'file', type: file.type, getAsFile: () => file }],
+        types: ['Files'],
+      },
+    });
+
+    // Restore FileReader
+    setTimeout(() => { globalThis.FileReader = origReader; }, 10);
+  }
+
+  it('parses a valid CSV file correctly', async () => {
+    const { container } = render(
+      <CSVUploader requiredColumns={requiredColumns} onDataParsed={mockOnDataParsed} />
+    );
+
+    const file = new File([''], 'employees.csv', { type: 'text/csv' });
+    simulateFileDrop(container, file, 'name,email,wallet\nAlice,alice@test.com,GA12345\nBob,bob@test.com,GB67890');
+
+    await waitFor(() => {
+      expect(mockOnDataParsed).toHaveBeenCalled();
+    }, { timeout: 5000 });
+
+    const parsed = mockOnDataParsed.mock.calls[0][0];
+    expect(parsed).toHaveLength(2);
+    expect(parsed[0].data.name).toBe('Alice');
+    expect(parsed[1].data.name).toBe('Bob');
+    expect(parsed[0].isValid).toBe(true);
+    expect(parsed[1].isValid).toBe(true);
+  });
+
+  it('detects missing required columns and shows an alert', async () => {
+    const alertMock = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    const { container } = render(
+      <CSVUploader requiredColumns={requiredColumns} onDataParsed={mockOnDataParsed} />
+    );
+
+    const file = new File([''], 'employees.csv', { type: 'text/csv' });
+    simulateFileDrop(container, file, 'name,email\nAlice,alice@test.com');
+
+    await waitFor(() => {
+      expect(alertMock).toHaveBeenCalledWith(expect.stringContaining('wallet'));
+    }, { timeout: 5000 });
+    alertMock.mockRestore();
+  });
+
+  it('shows validation errors for missing fields', async () => {
+    const { container } = render(
+      <CSVUploader requiredColumns={requiredColumns} onDataParsed={mockOnDataParsed} />
+    );
+
+    const file = new File([''], 'employees.csv', { type: 'text/csv' });
+    simulateFileDrop(container, file, 'name,email,wallet\n,alice@test.com,GA12345');
+
+    await waitFor(() => {
+      expect(mockOnDataParsed).toHaveBeenCalled();
+    }, { timeout: 5000 });
+
+    const parsed = mockOnDataParsed.mock.calls[0][0];
+    expect(parsed[0].isValid).toBe(false);
+    expect(parsed[0].errors.some((e: string) => e.includes('name'))).toBe(true);
+  });
+
+  it('shows file name, valid and invalid row counts after parsing', async () => {
+    const { container } = render(
+      <CSVUploader requiredColumns={requiredColumns} onDataParsed={mockOnDataParsed} />
+    );
+
+    const file = new File([''], 'employees.csv', { type: 'text/csv' });
+    simulateFileDrop(container, file, 'name,email,wallet\nAlice,alice@test.com,GA12345\n,,');
+
+    await waitFor(() => {
+      expect(screen.getByText(/employees.csv/)).toBeTruthy();
+    }, { timeout: 5000 });
+
+    expect(screen.getByText(/1 valid/)).toBeTruthy();
+    expect(screen.getByText(/1 rows with errors/)).toBeTruthy();
+  });
+
+  it('rejects non-CSV files with an alert', () => {
+    const alertMock = vi.spyOn(window, 'alert').mockImplementation(() => {});
+
+    render(
+      <CSVUploader requiredColumns={requiredColumns} onDataParsed={mockOnDataParsed} />
+    );
+
+    const file = new File(['not csv'], 'data.txt', { type: 'text/plain' });
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    Object.defineProperty(fileInput, 'files', {
+      value: [file] as unknown as FileList,
+      writable: true,
+      configurable: true,
+    });
+    fireEvent.change(fileInput, { target: { files: fileInput.files } });
+
+    expect(alertMock).toHaveBeenCalledWith('Please upload a CSV file');
+    expect(mockOnDataParsed).not.toHaveBeenCalled();
+    alertMock.mockRestore();
+  });
+
+  it('shows preview table with parsed data', async () => {
+    const { container } = render(
+      <CSVUploader requiredColumns={requiredColumns} onDataParsed={mockOnDataParsed} />
+    );
+
+    const file = new File([''], 'employees.csv', { type: 'text/csv' });
+    simulateFileDrop(container, file, 'name,email,wallet\nAlice,alice@test.com,GA12345');
+
+    await waitFor(() => {
+      expect(screen.getByText('Preview')).toBeTruthy();
+    }, { timeout: 5000 });
+
+    expect(screen.getByText('Alice')).toBeTruthy();
+    expect(screen.getByText('alice@test.com')).toBeTruthy();
+    expect(screen.getByText('GA12345')).toBeTruthy();
+  });
+
+  it('applies custom validators correctly', async () => {
+    const validators = {
+      email: (value: string) => {
+        if (!value.includes('@')) return 'Invalid email format';
+        return null;
+      },
+    };
+
+    const { container } = render(
+      <CSVUploader
+        requiredColumns={requiredColumns}
+        onDataParsed={mockOnDataParsed}
+        validators={validators}
+      />
+    );
+
+    const file = new File([''], 'employees.csv', { type: 'text/csv' });
+    simulateFileDrop(container, file, 'name,email,wallet\nAlice,bad-email,GA12345');
+
+    await waitFor(() => {
+      expect(mockOnDataParsed).toHaveBeenCalled();
+    }, { timeout: 5000 });
+
+    const parsed = mockOnDataParsed.mock.calls[0][0];
+    expect(parsed[0].isValid).toBe(false);
+    expect(parsed[0].errors.some((e: string) => e.includes('Invalid email'))).toBe(true);
+  });
+});