Files
mimic/frontend/tests/SimulationList.test.tsx
Knacky f5ea9d16af feat(frontend): sprint 4 — dark mode + matrix overhaul + tactic selection + done read-only + UI polish
US-17: fix duplicate "Create engagement" button, icon conventions (Save/RotateCcw/Grid2x2), UsersAdminPage form baseline alignment
US-18: done status fully read-only + Reopen button (done → review_required) for all roles
US-19: invalidate engagement queries on simulation PATCH/transition for auto-status propagation
US-20: MitreMatrixModal rewritten — CSS grid 12-column layout, no horizontal scroll, attack.mitre.org compact look
US-21: tactic header clickable in matrix, tactic chips (MitreTacticTag) in field, single atomic PATCH with technique_ids + tactic_ids
US-22: MitreTechniquesField chips-only area + inline search input + matrix icon button; chips show ID-only (name in title=)
US-23: useTheme hook — 3-state light/dark/system, CSS variables, Tailwind darkMode class, localStorage persistence

92/92 tests passing, typecheck and lint clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-27 20:06:01 +02:00

158 lines
5.3 KiB
TypeScript

import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { screen, waitFor, fireEvent } 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',
techniques: [{ id: 'T1021', name: 'Remote Services', tactics: ['lateral-movement'] }],
tactics: [],
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();
});
it('clicking a row uses SPA navigation and does not trigger window.location change', async () => {
mock.onGet('/engagements/42/simulations').reply(200, SIMULATIONS);
const originalHref = window.location.href;
renderWithProviders(<SimulationList engagementId={42} />, {
routerProps: { initialEntries: ['/engagements/42'] },
});
await waitFor(() => {
expect(screen.getByText('Lateral movement test')).toBeInTheDocument();
});
const row = screen.getByText('Lateral movement test').closest('tr') as HTMLElement;
fireEvent.click(row);
// window.location.href must be unchanged (no full-page reload)
expect(window.location.href).toBe(originalHref);
});
});
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();
});
});