feat(frontend): sprint 2 — simulations UI + MITRE picker

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/tests/SimulationList.test.tsx

@@ -0,0 +1,138 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { apiClient } from '@/api/client';
+import { SimulationList } from '@/components/SimulationList';
+import { renderWithProviders } from './utils';
+import type { Simulation } from '@/api/types';
+
+const SIMULATIONS: Simulation[] = [
+  {
+    id: 1,
+    engagement_id: 42,
+    name: 'Lateral movement test',
+    mitre_technique_id: 'T1021',
+    mitre_technique_name: 'Remote Services',
+    description: null,
+    commands: null,
+    prerequisites: null,
+    executed_at: '2026-06-01T10:00:00',
+    execution_result: null,
+    log_source: null,
+    logs: null,
+    soc_comment: null,
+    incident_number: null,
+    status: 'in_progress',
+    created_at: '2026-05-26T08:00:00',
+    updated_at: null,
+    created_by: { id: 1, username: 'alice' },
+  },
+];
+
+let mockCanEdit = true;
+
+vi.mock('@/hooks/useAuth', () => ({
+  useAuth: () => ({
+    user: { id: 1, username: 'alice', role: mockCanEdit ? 'admin' : 'soc', created_at: '2026-01-01' },
+    status: 'authenticated',
+    login: vi.fn(),
+    logout: vi.fn(),
+    isAdmin: mockCanEdit,
+    isRedteam: false,
+    isSoc: !mockCanEdit,
+    canEditEngagements: mockCanEdit,
+  }),
+}));
+
+describe('SimulationList — admin/redteam', () => {
+  let mock: MockAdapter;
+
+  beforeEach(() => {
+    mockCanEdit = true;
+    mock = new MockAdapter(apiClient);
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  it('shows loading state initially', () => {
+    mock.onGet('/engagements/42/simulations').reply(() => new Promise(() => {}));
+    renderWithProviders(<SimulationList engagementId={42} />);
+    expect(screen.getByTestId('loading-state')).toBeInTheDocument();
+  });
+
+  it('shows error state when request fails', async () => {
+    mock.onGet('/engagements/42/simulations').reply(500, { error: 'Server error' });
+    renderWithProviders(<SimulationList engagementId={42} />);
+    await waitFor(() => {
+      expect(screen.getByTestId('error-state')).toBeInTheDocument();
+    });
+  });
+
+  it('shows empty state when no simulations', async () => {
+    mock.onGet('/engagements/42/simulations').reply(200, []);
+    renderWithProviders(<SimulationList engagementId={42} />);
+    await waitFor(() => {
+      expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+    });
+  });
+
+  it('shows "Nouvelle simulation" button for admin/redteam in empty state', async () => {
+    mock.onGet('/engagements/42/simulations').reply(200, []);
+    renderWithProviders(<SimulationList engagementId={42} />);
+    await waitFor(() => {
+      expect(screen.getByTestId('new-simulation-btn')).toBeInTheDocument();
+    });
+  });
+
+  it('renders the simulation list with correct data', async () => {
+    mock.onGet('/engagements/42/simulations').reply(200, SIMULATIONS);
+    renderWithProviders(<SimulationList engagementId={42} />);
+    await waitFor(() => {
+      expect(screen.getByText('Lateral movement test')).toBeInTheDocument();
+    });
+    expect(screen.getByText('T1021')).toBeInTheDocument();
+    expect(screen.getByTestId('simulation-status-badge')).toHaveAttribute('data-status', 'in_progress');
+  });
+
+  it('shows "Nouvelle simulation" button in header when simulations exist', async () => {
+    mock.onGet('/engagements/42/simulations').reply(200, SIMULATIONS);
+    renderWithProviders(<SimulationList engagementId={42} />);
+    await waitFor(() => {
+      expect(screen.getByText('Lateral movement test')).toBeInTheDocument();
+    });
+    expect(screen.getByTestId('new-simulation-btn')).toBeInTheDocument();
+  });
+});
+
+describe('SimulationList — SOC role (no edit button)', () => {
+  let mock: MockAdapter;
+
+  beforeEach(() => {
+    mockCanEdit = false;
+    mock = new MockAdapter(apiClient);
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  it('does not show "Nouvelle simulation" button for SOC in empty state', async () => {
+    mock.onGet('/engagements/42/simulations').reply(200, []);
+    renderWithProviders(<SimulationList engagementId={42} />);
+    await waitFor(() => {
+      expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+    });
+    expect(screen.queryByTestId('new-simulation-btn')).toBeNull();
+  });
+
+  it('does not show "Nouvelle simulation" button for SOC when simulations exist', async () => {
+    mock.onGet('/engagements/42/simulations').reply(200, SIMULATIONS);
+    renderWithProviders(<SimulationList engagementId={42} />);
+    await waitFor(() => {
+      expect(screen.getByText('Lateral movement test')).toBeInTheDocument();
+    });
+    expect(screen.queryByTestId('new-simulation-btn')).toBeNull();
+  });
+});