From 170db13da9b654c91d7c30d822ac5d023e2e1faa Mon Sep 17 00:00:00 2001 From: Celes Renata Date: Tue, 21 Apr 2026 06:51:16 +0000 Subject: [PATCH] feat: add 40 interaction tests for Positions, Orders, Trends, Recommendations pages --- frontend/src/test/orders.test.tsx | 147 ++++++++++++++++++ frontend/src/test/positions.test.tsx | 165 +++++++++++++++++++++ frontend/src/test/recommendations.test.tsx | 129 ++++++++++++++++ frontend/src/test/trends.test.tsx | 135 +++++++++++++++++ 4 files changed, 576 insertions(+) create mode 100644 frontend/src/test/orders.test.tsx create mode 100644 frontend/src/test/positions.test.tsx create mode 100644 frontend/src/test/recommendations.test.tsx create mode 100644 frontend/src/test/trends.test.tsx diff --git a/frontend/src/test/orders.test.tsx b/frontend/src/test/orders.test.tsx new file mode 100644 index 0000000..e5cf939 --- /dev/null +++ b/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('—'); + }); +}); diff --git a/frontend/src/test/positions.test.tsx b/frontend/src/test/positions.test.tsx new file mode 100644 index 0000000..e99ec19 --- /dev/null +++ b/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(); + }); + }); +}); diff --git a/frontend/src/test/recommendations.test.tsx b/frontend/src/test/recommendations.test.tsx new file mode 100644 index 0000000..2d91540 --- /dev/null +++ b/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(); + }); + }); +}); diff --git a/frontend/src/test/trends.test.tsx b/frontend/src/test/trends.test.tsx new file mode 100644 index 0000000..5643342 --- /dev/null +++ b/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(); + }); + }); +});