TehRiehlBudget/tehriehlbudget-frontend/src/components/ImportStatementDialog.test.tsx

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import {
  ImportStatementDialog,
  type ParseResponse,
} from './ImportStatementDialog';

const bulkCreateTransactions = vi.fn();
const fetchTransactions = vi.fn();
const fetchAccounts = vi.fn();

const accounts = [
  {
    id: 'acc-1',
    userId: 'u',
    name: 'Chase Checking',
    type: 'CHECKING' as const,
    balance: 1000,
    createdAt: '',
    updatedAt: '',
  },
  {
    id: 'acc-2',
    userId: 'u',
    name: 'Savings',
    type: 'SAVINGS' as const,
    balance: 5000,
    createdAt: '',
    updatedAt: '',
  },
];

vi.mock('@/stores/transactions', () => ({
  useTransactionsStore: () => ({
    bulkCreateTransactions,
    fetchTransactions,
  }),
}));

vi.mock('@/stores/accounts', () => ({
  useAccountsStore: () => ({
    accounts,
    fetchAccounts,
  }),
}));

vi.mock('@/lib/supabase', () => ({
  supabase: {
    auth: {
      getSession: async () => ({
        data: { session: { access_token: 'fake-token' } },
      }),
    },
  },
}));

vi.mock('@/lib/runtime-config', () => ({
  getConfig: () => 'http://api.test',
}));

function newRowResponse(over: any = {}) {
  return {
    sourceIndex: 0,
    date: '2026-04-10',
    amount: 42.1,
    type: 'EXPENSE',
    description: 'Coffee',
    confidence: 0.95,
    status: 'new',
    ...over,
  };
}

function mockParseResponse(rows: any[], extra: Partial<ParseResponse> = {}) {
  return {
    format: 'csv' as const,
    account: { id: 'acc-1', name: 'Chase Checking', type: 'CHECKING' },
    rows,
    warnings: [],
    ...extra,
  };
}

function mockFetchOnce(payload: any, ok = true) {
  (globalThis as any).fetch = vi.fn(async () => ({
    ok,
    status: ok ? 200 : 400,
    json: async () => payload,
  }));
}

describe('ImportStatementDialog', () => {
  beforeEach(() => {
    bulkCreateTransactions.mockReset();
    bulkCreateTransactions.mockResolvedValue({
      created: 1,
      ids: ['new-1'],
    });
    fetchTransactions.mockReset();
    fetchTransactions.mockResolvedValue(undefined);
    fetchAccounts.mockReset();
  });

  function open(extras: any = {}) {
    return render(
      <ImportStatementDialog
        open
        onOpenChange={vi.fn()}
        defaultAccountId="acc-1"
        {...extras}
      />,
    );
  }

  function chooseFile(name = 'test.csv') {
    const input = document.querySelector(
      'input[type="file"]',
    ) as HTMLInputElement;
    const file = new File(['Date,Amount\n2026-04-01,10\n'], name, {
      type: 'text/csv',
    });
    fireEvent.change(input, { target: { files: [file] } });
    return file;
  }

  it('renders the upload step initially', () => {
    open();
    expect(
      screen.getByText(/Upload a CSV, OFX, QFX, or PDF/i),
    ).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /continue/i })).toBeDisabled();
  });

  it('enables Continue once a file is chosen', () => {
    open();
    chooseFile();
    expect(screen.getByTestId('selected-file')).toHaveTextContent('test.csv');
    expect(screen.getByRole('button', { name: /continue/i })).not.toBeDisabled();
  });

  it('after parsing a clean statement, advances to Review with rows', async () => {
    mockFetchOnce(
      mockParseResponse([
        newRowResponse({ sourceIndex: 0, description: 'Coffee', status: 'new' }),
        newRowResponse({
          sourceIndex: 1,
          description: 'Payday',
          type: 'INCOME',
          amount: 2000,
          status: 'new',
        }),
      ]),
    );
    open();
    chooseFile();
    fireEvent.click(screen.getByRole('button', { name: /continue/i }));

    await waitFor(() =>
      expect(screen.getByText(/Review each row/i)).toBeInTheDocument(),
    );
    expect(screen.getAllByRole('row').length).toBeGreaterThan(1);
    expect(screen.getByRole('button', { name: /Continue to confirm/i })).toBeInTheDocument();
  });

  it('shows the Confirm step with the count in the primary button label', async () => {
    mockFetchOnce(
      mockParseResponse([
        newRowResponse({ sourceIndex: 0 }),
        newRowResponse({ sourceIndex: 1, description: 'B' }),
      ]),
    );
    open();
    chooseFile();
    fireEvent.click(screen.getByRole('button', { name: /^continue$/i }));
    await waitFor(() =>
      expect(screen.getByText(/Review each row/i)).toBeInTheDocument(),
    );

    fireEvent.click(screen.getByRole('button', { name: /Continue to confirm/i }));

    expect(
      screen.getByRole('button', { name: /Import 2 transactions/i }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole('button', { name: /Back to review/i }),
    ).toBeInTheDocument();
  });

  it('Back to review preserves the row selection state', async () => {
    mockFetchOnce(
      mockParseResponse([
        newRowResponse({ sourceIndex: 0, description: 'Coffee' }),
        newRowResponse({ sourceIndex: 1, description: 'Lunch' }),
      ]),
    );
    open();
    chooseFile();
    fireEvent.click(screen.getByRole('button', { name: /^continue$/i }));
    await waitFor(() =>
      expect(screen.getByText(/Review each row/i)).toBeInTheDocument(),
    );
    // Uncheck the first row.
    const checkboxes = screen.getAllByRole('checkbox');
    expect(checkboxes[0]).toBeChecked();
    fireEvent.click(checkboxes[0]);
    expect(checkboxes[0]).not.toBeChecked();

    fireEvent.click(screen.getByRole('button', { name: /Continue to confirm/i }));
    expect(
      screen.getByRole('button', { name: /Import 1 transaction/i }),
    ).toBeInTheDocument();

    fireEvent.click(screen.getByRole('button', { name: /Back to review/i }));
    const recheckboxes = screen.getAllByRole('checkbox');
    expect(recheckboxes[0]).not.toBeChecked();
    expect(recheckboxes[1]).toBeChecked();
  });

  it('does NOT call bulkCreateTransactions until Confirm is clicked', async () => {
    mockFetchOnce(
      mockParseResponse([newRowResponse({ sourceIndex: 0 })]),
    );
    open();
    chooseFile();
    fireEvent.click(screen.getByRole('button', { name: /^continue$/i }));
    await waitFor(() =>
      expect(screen.getByText(/Review each row/i)).toBeInTheDocument(),
    );
    fireEvent.click(screen.getByRole('button', { name: /Continue to confirm/i }));
    expect(bulkCreateTransactions).not.toHaveBeenCalled();

    fireEvent.click(screen.getByRole('button', { name: /Import 1 transaction/i }));
    await waitFor(() => expect(bulkCreateTransactions).toHaveBeenCalled());
    const [rows, source] = bulkCreateTransactions.mock.calls[0];
    expect(rows).toHaveLength(1);
    expect(source.kind).toBe('statement-import');
  });

  it('defaults duplicate rows to unchecked', async () => {
    mockFetchOnce(
      mockParseResponse([
        newRowResponse({
          sourceIndex: 0,
          status: 'duplicate',
          duplicateOf: {
            id: 'existing',
            date: '2026-04-10',
            amount: 42.1,
            description: 'Coffee',
          },
        }),
        newRowResponse({ sourceIndex: 1, description: 'Lunch' }),
      ]),
    );
    open();
    chooseFile();
    fireEvent.click(screen.getByRole('button', { name: /^continue$/i }));
    await waitFor(() =>
      expect(screen.getByText(/Review each row/i)).toBeInTheDocument(),
    );
    const checkboxes = screen.getAllByRole('checkbox');
    expect(checkboxes[0]).not.toBeChecked();
    expect(checkboxes[1]).toBeChecked();
  });

  it('shows the Column Mapping step when the backend asks for one', async () => {
    mockFetchOnce(
      mockParseResponse([], {
        needsMapping: {
          headers: ['Col1', 'Col2', 'Col3'],
          sample: [['1', '2', '3']],
          guess: {},
        },
      }),
    );
    open();
    chooseFile();
    fireEvent.click(screen.getByRole('button', { name: /^continue$/i }));
    await waitFor(() =>
      expect(
        screen.getByText(/Tell us which field each column/i),
      ).toBeInTheDocument(),
    );
    // Headers are listed as table cells
    expect(screen.getByText('Col1')).toBeInTheDocument();
    expect(screen.getByText('Col2')).toBeInTheDocument();
    expect(screen.getByText('Col3')).toBeInTheDocument();
  });

  it('shows a parse error inline', async () => {
    mockFetchOnce({ message: 'This file is corrupt' }, false);
    open();
    chooseFile();
    fireEvent.click(screen.getByRole('button', { name: /^continue$/i }));
    await waitFor(() =>
      expect(screen.getByText('This file is corrupt')).toBeInTheDocument(),
    );
  });
});