mimic/frontend/tests/EngagementFormPage.test.tsx

import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { screen, waitFor } from '@testing-library/react';
import { Route, Routes } from 'react-router-dom';
import MockAdapter from 'axios-mock-adapter';
import { apiClient } from '@/api/client';
import { EngagementFormPage } from '@/pages/EngagementFormPage';
import { renderWithProviders } from './utils';
import type { Engagement } from '@/api/types';

const ENGAGEMENT: Engagement = {
  id: 5,
  name: 'Test Engagement',
  description: null,
  start_date: '2026-06-01',
  end_date: null,
  status: 'active',
  created_at: '2026-06-01T08:00:00',
  created_by: { id: 1, username: 'alice' },
};

type MockRole = 'admin' | 'redteam' | 'soc';
let mockRole: MockRole = 'admin';

vi.mock('@/hooks/useAuth', () => ({
  useAuth: () => ({
    user: { id: 1, username: 'alice', role: mockRole, created_at: '2026-01-01' },
    status: 'authenticated',
    login: vi.fn(),
    logout: vi.fn(),
    isAdmin: mockRole === 'admin',
    isRedteam: mockRole === 'redteam',
    isSoc: mockRole === 'soc',
    canEditEngagements: mockRole === 'admin' || mockRole === 'redteam',
  }),
}));

function EditPage() {
  return (
    <Routes>
      <Route path="/engagements/:id/edit" element={<EngagementFormPage />} />
    </Routes>
  );
}

function NewPage() {
  return (
    <Routes>
      <Route path="/engagements/new" element={<EngagementFormPage />} />
    </Routes>
  );
}

describe('EngagementFormPage — C2 config card visibility', () => {
  let mock: MockAdapter;

  beforeEach(() => {
    mock = new MockAdapter(apiClient);
    mock.onGet('/engagements/5').reply(200, ENGAGEMENT);
    mock.onGet('/engagements/5/c2-config').reply(404);
  });

  afterEach(() => {
    mock.restore();
    vi.clearAllMocks();
  });

  it('shows C2 config card in EDIT mode for admin', async () => {
    mockRole = 'admin';
    renderWithProviders(<EditPage />, {
      routerProps: { initialEntries: ['/engagements/5/edit'] },
    });
    await waitFor(() => {
      expect(screen.getByTestId('c2-config-card')).toBeInTheDocument();
    });
  });

  it('shows C2 config card in EDIT mode for redteam', async () => {
    mockRole = 'redteam';
    renderWithProviders(<EditPage />, {
      routerProps: { initialEntries: ['/engagements/5/edit'] },
    });
    await waitFor(() => {
      expect(screen.getByTestId('c2-config-card')).toBeInTheDocument();
    });
  });

  it('does NOT show C2 config card in EDIT mode for SOC', async () => {
    mockRole = 'soc';
    renderWithProviders(<EditPage />, {
      routerProps: { initialEntries: ['/engagements/5/edit'] },
    });
    await waitFor(() => {
      expect(screen.getByRole('button', { name: /save changes/i })).toBeInTheDocument();
    });
    expect(screen.queryByTestId('c2-config-card')).toBeNull();
  });

  it('does NOT show C2 config card on the NEW engagement form', async () => {
    mockRole = 'admin';
    renderWithProviders(<NewPage />, {
      routerProps: { initialEntries: ['/engagements/new'] },
    });
    await waitFor(() => {
      expect(screen.getByRole('button', { name: /create engagement/i })).toBeInTheDocument();
    });
    expect(screen.queryByTestId('c2-config-card')).toBeNull();
  });
});