import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MockAdapter from 'axios-mock-adapter';
import { apiClient } from '@/api/client';
import { MitreTechniquesField } from '@/components/MitreTechniquesField';
import { renderWithProviders } from './utils';
import type { MitreTechnique } from '@/api/types';
const T1059: MitreTechnique = { id: 'T1059', name: 'Command and Scripting Interpreter', tactics: ['execution'] };
const T1078: MitreTechnique = { id: 'T1078', name: 'Valid Accounts', tactics: ['initial-access'] };
vi.mock('@/hooks/useAuth', () => ({
useAuth: () => ({
user: { id: 1, username: 'alice', role: 'redteam', created_at: '2026-01-01' },
status: 'authenticated',
login: vi.fn(),
logout: vi.fn(),
isAdmin: false,
isRedteam: true,
isSoc: false,
canEditEngagements: true,
}),
}));
describe('MitreTechniquesField', () => {
let mock: MockAdapter;
beforeEach(() => {
mock = new MockAdapter(apiClient);
});
afterEach(() => {
mock.restore();
});
it('shows empty state message when no techniques', () => {
renderWithProviders(
,
);
expect(screen.getByText(/No techniques selected/i)).toBeInTheDocument();
});
it('renders tags for each technique', () => {
renderWithProviders(
,
);
expect(screen.getAllByTestId('mitre-technique-tag')).toHaveLength(2);
expect(screen.getByText('T1059')).toBeInTheDocument();
expect(screen.getByText('T1078')).toBeInTheDocument();
});
it('shows Add technique and Quick search buttons when not disabled', () => {
renderWithProviders(
,
);
expect(screen.getByRole('button', { name: /Add technique/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /Quick search/i })).toBeInTheDocument();
});
it('hides action buttons when disabled', () => {
renderWithProviders(
,
);
expect(screen.queryByRole('button', { name: /Add technique/i })).toBeNull();
expect(screen.queryByRole('button', { name: /Quick search/i })).toBeNull();
});
it('× button on tag calls PATCH with technique removed', async () => {
mock.onPatch('/simulations/7').reply(200, {
id: 7, engagement_id: 42, name: 'test', techniques: [],
description: null, commands: null, prerequisites: null,
executed_at: null, execution_result: null, log_source: null,
logs: null, soc_comment: null, incident_number: null,
status: 'pending', created_at: '2026-01-01', updated_at: null,
created_by: { id: 1, username: 'alice' },
});
// also mock GET simulations list for invalidation
mock.onGet('/engagements/42/simulations').reply(200, []);
mock.onGet('/simulations/7').reply(200, {
id: 7, engagement_id: 42, name: 'test', techniques: [],
description: null, commands: null, prerequisites: null,
executed_at: null, execution_result: null, log_source: null,
logs: null, soc_comment: null, incident_number: null,
status: 'pending', created_at: '2026-01-01', updated_at: null,
created_by: { id: 1, username: 'alice' },
});
const user = userEvent.setup();
renderWithProviders(
,
);
const removeBtn = screen.getByRole('button', { name: /Remove T1059/i });
await user.click(removeBtn);
await waitFor(() => {
expect(mock.history.patch.length).toBe(1);
const body = JSON.parse(mock.history.patch[0].data as string);
expect(body.technique_ids).toEqual(['T1078']);
});
});
it('Quick search toggle shows picker input', async () => {
const user = userEvent.setup();
renderWithProviders(
,
);
await user.click(screen.getByRole('button', { name: /Quick search/i }));
expect(screen.getByRole('combobox')).toBeInTheDocument();
});
it('dedup: selecting an already-present technique does not PATCH', async () => {
mock.onGet('/mitre/techniques').reply(200, [T1059]);
const user = userEvent.setup();
renderWithProviders(
,
);
// Open the quick-search picker
await user.click(screen.getByRole('button', { name: /Quick search/i }));
const combobox = screen.getByRole('combobox');
expect(combobox).toBeInTheDocument();
// Type to trigger the search (debounce is 200ms but fake timers not needed — mock responds immediately)
await user.type(combobox, 'T1059');
// Wait for the option to appear in the listbox
const option = await screen.findByRole('option', { name: /T1059/i });
expect(option).toBeInTheDocument();
// Select it via pointerDown (mirrors the component's onPointerDown handler)
await user.pointer({ target: option, keys: '[MouseLeft>]' });
// Dedup guard should have fired — no PATCH should have been sent
expect(mock.history.patch.length).toBe(0);
});
it('opens matrix modal when Add technique is clicked', async () => {
mock.onGet('/mitre/matrix').reply(200, []);
const user = userEvent.setup();
renderWithProviders(
,
);
await user.click(screen.getByRole('button', { name: /Add technique/i }));
expect(screen.getByRole('dialog')).toBeInTheDocument();
});
});