feat: add 40 interaction tests for Positions, Orders, Trends, Recommendations pages

frontend/src/test/orders.test.tsx

@@ -0,0 +1,147 @@
+import { describe, it, expect } from 'vitest';
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { HttpResponse, http } from 'msw';
+import { renderRoute } from './render';
+import { server } from './mocks/server';
+
+describe('Orders page', () => {
+  // -------------------------------------------------------------------------
+  // 1. Renders order list with data
+  // -------------------------------------------------------------------------
+  it('renders order list with ticker and status', async () => {
+    renderRoute('/orders');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    expect(screen.getByText('filled')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 2. Displays order details — side, type, quantity
+  // -------------------------------------------------------------------------
+  it('displays side, type, and quantity', async () => {
+    renderRoute('/orders');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    const row = screen.getByText('AAPL').closest('tr')!;
+    expect(row).toHaveTextContent('buy');
+    expect(row).toHaveTextContent('market');
+    expect(row).toHaveTextContent('10');
+  });
+
+  // -------------------------------------------------------------------------
+  // 3. Displays fill price in USD format
+  // -------------------------------------------------------------------------
+  it('displays fill price formatted as USD', async () => {
+    renderRoute('/orders');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    expect(screen.getByText('$185.50')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 4. Empty state
+  // -------------------------------------------------------------------------
+  it('shows empty state when no orders exist', async () => {
+    server.use(
+      http.get('/api/orders', () => HttpResponse.json([])),
+    );
+    renderRoute('/orders');
+    await waitFor(() => {
+      expect(screen.getByText('No data')).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 5. Page title and ticker filter render
+  // -------------------------------------------------------------------------
+  it('renders page title and ticker filter', async () => {
+    renderRoute('/orders');
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Orders' })).toBeInTheDocument();
+    });
+    expect(screen.getByPlaceholderText('Ticker…')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 6. Row click navigates to order detail
+  // -------------------------------------------------------------------------
+  it('navigates to order detail on row click', async () => {
+    const user = userEvent.setup();
+    renderRoute('/orders');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    const row = screen.getByText('AAPL').closest('tr')!;
+    await user.click(row);
+    // Order detail page should render with the order ticker
+    await waitFor(() => {
+      // OrderDetail shows the ticker as h1 plus side and status badges
+      expect(screen.getByText('Type')).toBeInTheDocument();
+      expect(screen.getByText('Fill Price')).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 7. Order detail shows all fields
+  // -------------------------------------------------------------------------
+  it('renders order detail with all fields', async () => {
+    renderRoute('/orders/o1');
+    await waitFor(() => {
+      expect(screen.getByText('Type')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Quantity')).toBeInTheDocument();
+    expect(screen.getByText('Fill Price')).toBeInTheDocument();
+    expect(screen.getByText('Fill Qty')).toBeInTheDocument();
+    expect(screen.getByText('$185.50')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 8. Order detail shows events section
+  // -------------------------------------------------------------------------
+  it('renders events section on order detail', async () => {
+    renderRoute('/orders/o1');
+    await waitFor(() => {
+      expect(screen.getByText('Events (0)')).toBeInTheDocument();
+    });
+    expect(screen.getByText('No events')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 9. Multiple orders render correctly
+  // -------------------------------------------------------------------------
+  it('renders multiple orders', async () => {
+    server.use(
+      http.get('/api/orders', () => HttpResponse.json([
+        { id: 'o1', recommendation_id: 'r1', broker_account_id: null, ticker: 'AAPL', side: 'buy', order_type: 'market', quantity: 10, limit_price: null, stop_price: null, status: 'filled', broker_order_id: null, submitted_at: '2026-04-10T19:01:00Z', fill_price: 185.50, fill_quantity: 10, created_at: '2026-04-10T19:01:00Z' },
+        { id: 'o2', recommendation_id: 'r2', broker_account_id: null, ticker: 'MSFT', side: 'sell', order_type: 'limit', quantity: 5, limit_price: 420.00, stop_price: null, status: 'pending', broker_order_id: null, submitted_at: null, fill_price: null, fill_quantity: null, created_at: '2026-04-11T10:00:00Z' },
+      ])),
+    );
+    renderRoute('/orders');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    expect(screen.getByText('MSFT')).toBeInTheDocument();
+    expect(screen.getByText('pending')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 10. Null fill price shows dash
+  // -------------------------------------------------------------------------
+  it('shows dash for null fill price', async () => {
+    server.use(
+      http.get('/api/orders', () => HttpResponse.json([
+        { id: 'o2', recommendation_id: 'r2', broker_account_id: null, ticker: 'GOOG', side: 'buy', order_type: 'limit', quantity: 3, limit_price: 170.00, stop_price: null, status: 'pending', broker_order_id: null, submitted_at: null, fill_price: null, fill_quantity: null, created_at: '2026-04-11T10:00:00Z' },
+      ])),
+    );
+    renderRoute('/orders');
+    await waitFor(() => {
+      expect(screen.getByText('GOOG')).toBeInTheDocument();
+    });
+    const row = screen.getByText('GOOG').closest('tr')!;
+    expect(row).toHaveTextContent('—');
+  });
+});

frontend/src/test/positions.test.tsx

@@ -0,0 +1,165 @@
+import { describe, it, expect } from 'vitest';
+import { screen, waitFor, within } from '@testing-library/react';
+import { HttpResponse, http } from 'msw';
+import { renderRoute } from './render';
+import { server } from './mocks/server';
+
+describe('Positions page', () => {
+  // -------------------------------------------------------------------------
+  // 1. Renders positions table with data
+  // -------------------------------------------------------------------------
+  it('renders positions table with ticker and quantity', async () => {
+    renderRoute('/positions');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    const row = screen.getByText('AAPL').closest('tr')!;
+    expect(row).toHaveTextContent('10');
+  });
+
+  // -------------------------------------------------------------------------
+  // 2. Displays formatted USD prices
+  // -------------------------------------------------------------------------
+  it('displays entry and current prices in USD format', async () => {
+    renderRoute('/positions');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    expect(screen.getByText('$185.50')).toBeInTheDocument();
+    expect(screen.getByText('$188.20')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 3. Displays unrealized and realized PnL
+  // -------------------------------------------------------------------------
+  it('displays unrealized and realized PnL', async () => {
+    renderRoute('/positions');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    const row = screen.getByText('AAPL').closest('tr')!;
+    expect(row).toHaveTextContent('$27.00');
+    expect(row).toHaveTextContent('$0.00');
+  });
+
+  // -------------------------------------------------------------------------
+  // 4. PnL color coding — green for positive
+  // -------------------------------------------------------------------------
+  it('applies green color to positive unrealized PnL', async () => {
+    renderRoute('/positions');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    const row = screen.getByText('AAPL').closest('tr')!;
+    const pnlEl = within(row).getByText('$27.00');
+    expect(pnlEl.className).toContain('text-green');
+  });
+
+  // -------------------------------------------------------------------------
+  // 5. Totals row renders with correct sums
+  // -------------------------------------------------------------------------
+  it('renders totals row with correct sums', async () => {
+    renderRoute('/positions');
+    await waitFor(() => {
+      expect(screen.getByText('Totals')).toBeInTheDocument();
+    });
+    const totalsRow = screen.getByText('Totals').closest('tr')!;
+    const cells = within(totalsRow).getAllByRole('cell');
+    // Totals: label, qty, cost basis, market value, unrealized, realized, empty
+    expect(cells[0]).toHaveTextContent('Totals');
+    expect(cells[1]).toHaveTextContent('10');
+    // cost basis = 10 * 185.50 = 1855.00
+    expect(cells[2]).toHaveTextContent('$1855.00');
+    // market value = 10 * 188.20 = 1882.00
+    expect(cells[3]).toHaveTextContent('$1882.00');
+    // unrealized = 27.00
+    expect(cells[4]).toHaveTextContent('$27.00');
+    // realized = 0.00
+    expect(cells[5]).toHaveTextContent('$0.00');
+  });
+
+  // -------------------------------------------------------------------------
+  // 6. Empty state — no positions
+  // -------------------------------------------------------------------------
+  it('shows empty state when no positions exist', async () => {
+    server.use(
+      http.get('/api/positions', () => HttpResponse.json([])),
+    );
+    renderRoute('/positions');
+    await waitFor(() => {
+      expect(screen.getByText('No data')).toBeInTheDocument();
+    });
+    // Totals row should NOT render when empty
+    expect(screen.queryByText('Totals')).not.toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 7. Multiple positions — totals sum correctly
+  // -------------------------------------------------------------------------
+  it('sums totals correctly with multiple positions', async () => {
+    server.use(
+      http.get('/api/positions', () => HttpResponse.json([
+        { id: 'p1', broker_account_id: null, ticker: 'AAPL', quantity: 10, avg_entry_price: 185.50, current_price: 188.20, unrealized_pnl: 27.00, realized_pnl: 0, updated_at: '2026-04-11T12:00:00Z' },
+        { id: 'p2', broker_account_id: null, ticker: 'MSFT', quantity: 5, avg_entry_price: 420.00, current_price: 415.00, unrealized_pnl: -25.00, realized_pnl: 50.00, updated_at: '2026-04-11T12:00:00Z' },
+      ])),
+    );
+    renderRoute('/positions');
+    await waitFor(() => {
+      expect(screen.getByText('Totals')).toBeInTheDocument();
+    });
+    const totalsRow = screen.getByText('Totals').closest('tr')!;
+    const cells = within(totalsRow).getAllByRole('cell');
+    // qty = 10 + 5 = 15
+    expect(cells[1]).toHaveTextContent('15');
+    // cost basis = (10*185.50) + (5*420.00) = 1855 + 2100 = 3955.00
+    expect(cells[2]).toHaveTextContent('$3955.00');
+    // market value = (10*188.20) + (5*415.00) = 1882 + 2075 = 3957.00
+    expect(cells[3]).toHaveTextContent('$3957.00');
+    // unrealized = 27 + (-25) = 2.00
+    expect(cells[4]).toHaveTextContent('$2.00');
+    // realized = 0 + 50 = 50.00
+    expect(cells[5]).toHaveTextContent('$50.00');
+  });
+
+  // -------------------------------------------------------------------------
+  // 8. Negative PnL gets red color
+  // -------------------------------------------------------------------------
+  it('applies red color to negative unrealized PnL', async () => {
+    server.use(
+      http.get('/api/positions', () => HttpResponse.json([
+        { id: 'p1', broker_account_id: null, ticker: 'TSLA', quantity: 3, avg_entry_price: 250.00, current_price: 240.00, unrealized_pnl: -30.00, realized_pnl: 0, updated_at: '2026-04-11T12:00:00Z' },
+      ])),
+    );
+    renderRoute('/positions');
+    await waitFor(() => {
+      expect(screen.getByText('TSLA')).toBeInTheDocument();
+    });
+    const row = screen.getByText('TSLA').closest('tr')!;
+    const pnlEl = within(row).getByText('$-30.00');
+    expect(pnlEl.className).toContain('text-red');
+  });
+
+  // -------------------------------------------------------------------------
+  // 9. Updated timestamp renders
+  // -------------------------------------------------------------------------
+  it('renders the updated_at timestamp', async () => {
+    renderRoute('/positions');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    // The component renders new Date(r.updated_at).toLocaleString()
+    // Just verify something date-like appears in the row
+    const row = screen.getByText('AAPL').closest('tr')!;
+    expect(row).toHaveTextContent('2026');
+  });
+
+  // -------------------------------------------------------------------------
+  // 10. Page title renders
+  // -------------------------------------------------------------------------
+  it('renders the page title', async () => {
+    renderRoute('/positions');
+    await waitFor(() => {
+      expect(screen.getByText('Positions')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/test/recommendations.test.tsx

@@ -0,0 +1,129 @@
+import { describe, it, expect } from 'vitest';
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { HttpResponse, http } from 'msw';
+import { renderRoute } from './render';
+import { server } from './mocks/server';
+
+describe('Recommendations page', () => {
+  // -------------------------------------------------------------------------
+  // 1. Renders recommendation list with ticker
+  // -------------------------------------------------------------------------
+  it('renders recommendation with ticker', async () => {
+    renderRoute('/recommendations');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 2. Shows action badge
+  // -------------------------------------------------------------------------
+  it('shows action badge (buy)', async () => {
+    renderRoute('/recommendations');
+    await waitFor(() => {
+      expect(screen.getByText('buy')).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 3. Shows mode badge
+  // -------------------------------------------------------------------------
+  it('shows mode badge (paper)', async () => {
+    renderRoute('/recommendations');
+    await waitFor(() => {
+      expect(screen.getByText('paper')).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 4. Shows thesis text
+  // -------------------------------------------------------------------------
+  it('shows thesis text', async () => {
+    renderRoute('/recommendations');
+    await waitFor(() => {
+      expect(screen.getByText('Strong earnings momentum')).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 5. Risk tier filter renders with options
+  // -------------------------------------------------------------------------
+  it('renders risk tier filter with options', async () => {
+    renderRoute('/recommendations');
+    await waitFor(() => {
+      expect(screen.getByLabelText('Risk Tier')).toBeInTheDocument();
+    });
+    const select = screen.getByLabelText('Risk Tier');
+    const options = within(select).getAllByRole('option');
+    expect(options).toHaveLength(3);
+    expect(options[0]).toHaveTextContent('Conservative');
+    expect(options[1]).toHaveTextContent('Moderate');
+    expect(options[2]).toHaveTextContent('Aggressive');
+  });
+
+  // -------------------------------------------------------------------------
+  // 6. Empty state
+  // -------------------------------------------------------------------------
+  it('shows empty state when no recommendations', async () => {
+    server.use(
+      http.get('/api/recommendations', () => HttpResponse.json([])),
+    );
+    renderRoute('/recommendations');
+    await waitFor(() => {
+      expect(screen.getByText('No data')).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 7. Page title renders
+  // -------------------------------------------------------------------------
+  it('renders page title', async () => {
+    renderRoute('/recommendations');
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Recommendations' })).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 8. Multiple recommendations render
+  // -------------------------------------------------------------------------
+  it('renders multiple recommendations', async () => {
+    server.use(
+      http.get('/api/recommendations', () => HttpResponse.json([
+        { id: 'r1', ticker: 'AAPL', action: 'buy', mode: 'paper', confidence: 0.78, time_horizon: '7d', thesis: 'Strong earnings', invalidation_conditions: null, portfolio_pct: 0.05, max_loss_pct: 0.02, model_version: 'v1', risk_classification: 'moderate', generated_at: '2026-04-10T19:00:00Z' },
+        { id: 'r2', ticker: 'MSFT', action: 'sell', mode: 'paper', confidence: 0.65, time_horizon: '30d', thesis: 'Weakening outlook', invalidation_conditions: null, portfolio_pct: 0.03, max_loss_pct: 0.01, model_version: 'v1', risk_classification: 'conservative', generated_at: '2026-04-11T10:00:00Z' },
+      ])),
+    );
+    renderRoute('/recommendations');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    expect(screen.getByText('MSFT')).toBeInTheDocument();
+    expect(screen.getByText('sell')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 9. Risk tier filter changes selection
+  // -------------------------------------------------------------------------
+  it('allows changing risk tier', async () => {
+    const user = userEvent.setup();
+    renderRoute('/recommendations');
+    await waitFor(() => {
+      expect(screen.getByLabelText('Risk Tier')).toBeInTheDocument();
+    });
+    const select = screen.getByLabelText('Risk Tier');
+    await user.selectOptions(select, 'aggressive');
+    expect(select).toHaveValue('aggressive');
+  });
+
+  // -------------------------------------------------------------------------
+  // 10. Ticker filter renders
+  // -------------------------------------------------------------------------
+  it('renders ticker filter', async () => {
+    renderRoute('/recommendations');
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Ticker…')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/test/trends.test.tsx

@@ -0,0 +1,135 @@
+import { describe, it, expect } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { HttpResponse, http } from 'msw';
+import { renderRoute } from './render';
+import { server } from './mocks/server';
+
+describe('Trends page', () => {
+  // -------------------------------------------------------------------------
+  // 1. Renders trend cards with entity ID
+  // -------------------------------------------------------------------------
+  it('renders trend card with ticker', async () => {
+    renderRoute('/trends');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 2. Shows trend direction arrow
+  // -------------------------------------------------------------------------
+  it('shows trend direction arrow', async () => {
+    renderRoute('/trends');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    // TrendArrow renders an aria-label
+    expect(screen.getByLabelText('Bullish')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 3. Shows window badge
+  // -------------------------------------------------------------------------
+  it('shows window badge on trend card', async () => {
+    renderRoute('/trends');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    // The card has a window badge; the filter also has a 7d button
+    // Verify at least two 7d elements exist (badge + filter button)
+    const elements = screen.getAllByText('7d');
+    expect(elements.length).toBeGreaterThanOrEqual(2);
+  });
+
+  // -------------------------------------------------------------------------
+  // 4. Shows strength and confidence labels
+  // -------------------------------------------------------------------------
+  it('shows strength and confidence labels', async () => {
+    renderRoute('/trends');
+    await waitFor(() => {
+      expect(screen.getByText('Strength')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Confidence')).toBeInTheDocument();
+    expect(screen.getByText('Contradiction')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 5. Shows contradiction score
+  // -------------------------------------------------------------------------
+  it('displays contradiction score as percentage', async () => {
+    renderRoute('/trends');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    // contradiction_score = 0.1 → "10%"
+    expect(screen.getByText('10%')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 6. Shows catalyst tags
+  // -------------------------------------------------------------------------
+  it('shows dominant catalyst tags', async () => {
+    renderRoute('/trends');
+    await waitFor(() => {
+      expect(screen.getByText('earnings')).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 7. Evidence expand/collapse
+  // -------------------------------------------------------------------------
+  it('expands and collapses evidence on click', async () => {
+    const user = userEvent.setup();
+    renderRoute('/trends');
+    await waitFor(() => {
+      expect(screen.getByText('AAPL')).toBeInTheDocument();
+    });
+    // Mock has 1 supporting evidence item
+    const showBtn = screen.getByText(/Show evidence/);
+    expect(showBtn).toBeInTheDocument();
+    await user.click(showBtn);
+    // After expanding, should show "Hide evidence"
+    expect(screen.getByText(/Hide evidence/)).toBeInTheDocument();
+    // Click again to collapse
+    await user.click(screen.getByText(/Hide evidence/));
+    expect(screen.getByText(/Show evidence/)).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 8. Window filter buttons render
+  // -------------------------------------------------------------------------
+  it('renders window filter buttons', async () => {
+    renderRoute('/trends');
+    await waitFor(() => {
+      expect(screen.getByText('All')).toBeInTheDocument();
+    });
+    expect(screen.getByText('intraday')).toBeInTheDocument();
+    expect(screen.getByText('1d')).toBeInTheDocument();
+    expect(screen.getByText('30d')).toBeInTheDocument();
+    expect(screen.getByText('90d')).toBeInTheDocument();
+  });
+
+  // -------------------------------------------------------------------------
+  // 9. Empty state
+  // -------------------------------------------------------------------------
+  it('shows empty state when no trends', async () => {
+    server.use(
+      http.get('/api/trends', () => HttpResponse.json([])),
+    );
+    renderRoute('/trends');
+    await waitFor(() => {
+      expect(screen.getByText('No trends found')).toBeInTheDocument();
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // 10. Page title renders
+  // -------------------------------------------------------------------------
+  it('renders page title', async () => {
+    renderRoute('/trends');
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: 'Trends' })).toBeInTheDocument();
+    });
+  });
+});