stonks-oracle/frontend/src/test/pages.test.tsx

import { describe, it, expect } from 'vitest';
import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderRoute } from './render';

describe('Home page', () => {
  it('renders the title and key metrics', async () => {
    renderRoute('/');
    await waitFor(() => {
      expect(screen.getByText('Stonks Oracle')).toBeInTheDocument();
    });
  });
});

describe('Companies page', () => {
  it('renders company list with tickers', async () => {
    renderRoute('/companies');
    await waitFor(() => {
      expect(screen.getByText('AAPL')).toBeInTheDocument();
      expect(screen.getByText('MSFT')).toBeInTheDocument();
    });
  });

  it('filters companies by search', async () => {
    renderRoute('/companies');
    await waitFor(() => expect(screen.getByText('AAPL')).toBeInTheDocument());

    const filter = screen.getByLabelText('Filter table');
    await userEvent.type(filter, 'micro');

    expect(screen.getByText('MSFT')).toBeInTheDocument();
    expect(screen.queryByText('AAPL')).not.toBeInTheDocument();
  });

  it('shows add company form on button click', async () => {
    renderRoute('/companies');
    await waitFor(() => expect(screen.getByText('Add Company')).toBeInTheDocument());

    await userEvent.click(screen.getByText('Add Company'));
    expect(screen.getByLabelText('Ticker')).toBeInTheDocument();
    expect(screen.getByLabelText('Legal Name')).toBeInTheDocument();
  });

  it('submits new company form', async () => {
    renderRoute('/companies');
    await waitFor(() => expect(screen.getByText('Add Company')).toBeInTheDocument());

    await userEvent.click(screen.getByText('Add Company'));
    await userEvent.type(screen.getByLabelText('Ticker'), 'TSLA');
    await userEvent.type(screen.getByLabelText('Legal Name'), 'Tesla Inc.');
    await userEvent.click(screen.getByText('Create'));

    // Form should close on success
    await waitFor(() => {
      expect(screen.queryByLabelText('Ticker')).not.toBeInTheDocument();
    });
  });
});

describe('Documents page', () => {
  it('renders document list', async () => {
    renderRoute('/documents');
    await waitFor(() => {
      expect(screen.getByText('Apple Q4 Earnings Beat')).toBeInTheDocument();
    });
  });
});

describe('Trends page', () => {
  it('renders trend cards with direction', async () => {
    renderRoute('/trends');
    await waitFor(() => {
      expect(screen.getByText('AAPL')).toBeInTheDocument();
    });
  });
});

describe('Recommendations page', () => {
  it('renders recommendation list', async () => {
    renderRoute('/recommendations');
    await waitFor(() => {
      expect(screen.getByText('AAPL')).toBeInTheDocument();
    });
  });
});

describe('Orders page', () => {
  it('renders order list', async () => {
    renderRoute('/orders');
    await waitFor(() => {
      expect(screen.getByText('AAPL')).toBeInTheDocument();
    });
  });
});

describe('Positions page', () => {
  it('renders positions with PnL', async () => {
    renderRoute('/positions');
    await waitFor(() => {
      expect(screen.getByText('AAPL')).toBeInTheDocument();
      expect(screen.getByText('$185.50')).toBeInTheDocument();
    });
  });
});

describe('Trading page', () => {
  it('renders trading mode buttons', async () => {
    renderRoute('/trading');
    await waitFor(() => {
      expect(screen.getByText('paper')).toBeInTheDocument();
      expect(screen.getByText('live')).toBeInTheDocument();
      expect(screen.getByText('disabled')).toBeInTheDocument();
    });
  });
});

describe('Ops pages', () => {
  it('pipeline health renders', async () => {
    renderRoute('/ops/pipeline');
    await waitFor(() => {
      expect(screen.getByText('Pipeline Health')).toBeInTheDocument();
    });
  });

  it('ingestion monitor renders', async () => {
    renderRoute('/ops/ingestion');
    await waitFor(() => {
      expect(screen.getByText('Ingestion Monitor')).toBeInTheDocument();
    });
  });

  it('model performance renders', async () => {
    renderRoute('/ops/model');
    await waitFor(() => {
      expect(screen.getByText('Model Performance')).toBeInTheDocument();
    });
  });

  it('source coverage renders', async () => {
    renderRoute('/ops/coverage');
    await waitFor(() => {
      expect(screen.getByText('Source Coverage')).toBeInTheDocument();
    });
  });
});

describe('Watchlists page', () => {
  it('renders watchlists page with new button', async () => {
    renderRoute('/watchlists');
    await waitFor(() => {
      expect(screen.getByText('New Watchlist')).toBeInTheDocument();
    });
  });
});

describe('Global Events page', () => {
  it('renders global events list with severity filter', async () => {
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByText('Global Events')).toBeInTheDocument();
    });
  });

  it('renders event summary from mock data', async () => {
    renderRoute('/macro/events');
    await waitFor(() => {
      expect(screen.getByText(/US tariffs on Chinese semiconductors/)).toBeInTheDocument();
    });
  });
});

describe('OpsModel validation tab', () => {
  it('renders Model Validation tab with summary cards', async () => {
    renderRoute('/ops/model');
    await waitFor(() => expect(screen.getByText('Model Performance')).toBeInTheDocument());

    // The tab buttons should be present
    expect(screen.getByText('Extraction Performance')).toBeInTheDocument();
    expect(screen.getByText('Model Validation')).toBeInTheDocument();

    // Click the Model Validation tab button
    await userEvent.click(screen.getByText('Model Validation'));

    // Summary cards should render key metric labels unique to the validation summary
    await waitFor(() => {
      expect(screen.getByText('Brier Score')).toBeInTheDocument();
      expect(screen.getByText('ECE')).toBeInTheDocument();
      expect(screen.getByText('Directional Accuracy')).toBeInTheDocument();
      expect(screen.getByText('Excess vs SPY')).toBeInTheDocument();
    });
  }, 10000);

  it('renders calibration table with miscalibration warning', async () => {
    renderRoute('/ops/model');
    await waitFor(() => expect(screen.getByText('Model Performance')).toBeInTheDocument());

    await userEvent.click(screen.getByText('Model Validation'));

    await waitFor(() => {
      expect(screen.getByText('Calibration by Confidence Bucket')).toBeInTheDocument();
    });

    // Miscalibrated buckets should show warning text
    const miscalWarnings = screen.getAllByText('Miscalibrated');
    expect(miscalWarnings.length).toBeGreaterThanOrEqual(1);
  }, 10000);

  it('renders gate status pass/fail indicator', async () => {
    renderRoute('/ops/model');
    await waitFor(() => expect(screen.getByText('Model Performance')).toBeInTheDocument());

    await userEvent.click(screen.getByText('Model Validation'));

    // The gate-status endpoint returns passed: false
    await waitFor(() => {
      expect(screen.getByText(/Live Trading Gate: FAIL/)).toBeInTheDocument();
    });
  }, 10000);
});

describe('Agents page', () => {
  it('renders agent list in sidebar', async () => {
    renderRoute('/agents');
    await waitFor(() => {
      expect(screen.getByText('Document Extractor')).toBeInTheDocument();
      expect(screen.getByText('Event Classifier')).toBeInTheDocument();
    });
  });

  it('renders variant list when an agent is selected', async () => {
    renderRoute('/agents');
    await waitFor(() => expect(screen.getByText('Document Extractor')).toBeInTheDocument());

    await userEvent.click(screen.getByText('Document Extractor'));

    await waitFor(() => {
      expect(screen.getByText('GPT-4o Variant')).toBeInTheDocument();
      expect(screen.getByText('Mistral Variant')).toBeInTheDocument();
    });
  });

  it('shows comparison view when multiple variants are checked', async () => {
    renderRoute('/agents');
    await waitFor(() => expect(screen.getByText('Document Extractor')).toBeInTheDocument());

    await userEvent.click(screen.getByText('Document Extractor'));

    await waitFor(() => expect(screen.getByText('GPT-4o Variant')).toBeInTheDocument());

    // Select both variant checkboxes
    const checkboxes = screen.getAllByRole('checkbox');
    await userEvent.click(checkboxes[0]);
    await userEvent.click(checkboxes[1]);

    await waitFor(() => {
      expect(screen.getByText(/Variant Comparison/)).toBeInTheDocument();
    });
  });
});