AetherForge/server/web/src/App.test.tsx

/**
 * @vitest-environment happy-dom
 */
import type { ReactNode } from 'react';
import { describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MemoryRouter, Routes, Route, Navigate } from 'react-router-dom';
import App, { PageFallback } from './App';
import { routerFuture } from './routerFuture';

vi.mock('./context/WebSocketProvider', () => ({
  WebSocketProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
}));

vi.mock('./components/Sound/SoundBridge', () => ({
  default: () => null,
}));

vi.mock('./context/ForgeContext', () => ({
  ForgeProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
}));

vi.mock('./components/SessionGate', () => ({
  default: ({ children }: { children: ReactNode }) => <>{children}</>,
}));

vi.mock('./components/Layout/Layout', () => ({
  default: ({ children }: { children: ReactNode }) => <div data-testid="layout">{children}</div>,
}));

vi.mock('./pages/DashboardPage', () => ({ default: () => <div>Dashboard Page</div> }));
vi.mock('./pages/AgentsPage', () => ({ default: () => <div>Agents Page</div> }));
vi.mock('./pages/BuilderPage', () => ({ default: () => <div>Forge Page</div> }));
vi.mock('./pages/MissionDeckPage', () => ({ default: () => <div>Mission Deck Page</div> }));
vi.mock('./pages/BuildManagerPage', () => ({ default: () => <div>Builds Page</div> }));
vi.mock('./pages/SettingsPage', () => ({ default: () => <div>Settings Page</div> }));
vi.mock('./pages/CruciblePage', () => ({ default: () => <div>Crucible Page</div> }));

describe('PageFallback', () => {
  it('shows loading copy', () => {
    render(<PageFallback />);
    expect(screen.getByText('Loading…')).toBeTruthy();
  });
});

describe('App route config', () => {
  it('redirects / to dashboard and /builder to forge', () => {
    function RedirectProbe({ path }: { path: string }) {
      return (
        <MemoryRouter initialEntries={[path]} future={routerFuture}>
          <Routes>
            <Route path="/" element={<Navigate to="/dashboard" replace />} />
            <Route path="/dashboard" element={<div>Dashboard Page</div>} />
            <Route path="/builder" element={<Navigate to="/forge" replace />} />
            <Route path="/forge" element={<div>Forge Page</div>} />
          </Routes>
        </MemoryRouter>
      );
    }
    const { unmount: u1 } = render(<RedirectProbe path="/" />);
    expect(screen.getByText('Dashboard Page')).toBeTruthy();
    u1();
    render(<RedirectProbe path="/builder" />);
    expect(screen.getByText('Forge Page')).toBeTruthy();
  });

  it('renders crucible route via App shell', async () => {
    render(
      <MemoryRouter initialEntries={['/crucible']} future={routerFuture}>
        <App />
      </MemoryRouter>
    );
    expect(await screen.findByText('Crucible Page')).toBeTruthy();
    expect(screen.getByTestId('layout')).toBeTruthy();
  });

  it('renders mission-deck route via App shell', async () => {
    const { unmount } = render(
      <MemoryRouter initialEntries={['/mission-deck']} future={routerFuture}>
        <App />
      </MemoryRouter>
    );
    expect(await screen.findByText('Mission Deck Page')).toBeTruthy();
    expect(screen.getAllByTestId('layout').length).toBeGreaterThan(0);
    unmount();
  });
});