mimic/frontend/tests/MitreTechniquesField.test.tsx

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(
      <MitreTechniquesField value={[]} simulationId={7} engagementId={42} />,
    );
    expect(screen.getByText(/No techniques selected/i)).toBeInTheDocument();
  });

  it('renders tags for each technique', () => {
    renderWithProviders(
      <MitreTechniquesField value={[T1059, T1078]} simulationId={7} engagementId={42} />,
    );
    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(
      <MitreTechniquesField value={[]} simulationId={7} engagementId={42} />,
    );
    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(
      <MitreTechniquesField value={[T1059]} simulationId={7} engagementId={42} disabled />,
    );
    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(
      <MitreTechniquesField value={[T1059, T1078]} simulationId={7} engagementId={42} />,
    );

    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(
      <MitreTechniquesField value={[]} simulationId={7} engagementId={42} />,
    );
    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(
      <MitreTechniquesField value={[T1059]} simulationId={7} engagementId={42} />,
    );

    // 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(
      <MitreTechniquesField value={[]} simulationId={7} engagementId={42} />,
    );
    await user.click(screen.getByRole('button', { name: /Add technique/i }));
    expect(screen.getByRole('dialog')).toBeInTheDocument();
  });
});