mimic/frontend/tests/MitreTechniquePicker.test.tsx

import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { screen, waitFor, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MockAdapter from 'axios-mock-adapter';
import { apiClient } from '@/api/client';
import { MitreTechniquePicker } from '@/components/MitreTechniquePicker';
import { renderWithProviders } from './utils';
import type { MitreTechnique } from '@/api/types';

const TECHNIQUES: MitreTechnique[] = [
  { id: 'T1059', name: 'Command and Scripting Interpreter', tactics: ['execution'] },
  { id: 'T1059.001', name: 'PowerShell', tactics: ['execution'] },
  { id: 'T1021', name: 'Remote Services', tactics: ['lateral-movement'] },
];

describe('MitreTechniquePicker', () => {
  let mock: MockAdapter;

  beforeEach(() => {
    mock = new MockAdapter(apiClient);
    vi.useFakeTimers({ shouldAdvanceTime: true });
  });

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

  it('renders input with placeholder', () => {
    vi.useRealTimers();
    renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);
    expect(screen.getByRole('combobox')).toBeInTheDocument();
    expect(screen.getByPlaceholderText(/Rechercher une technique/i)).toBeInTheDocument();
  });

  it('is disabled when disabled prop is true', () => {
    vi.useRealTimers();
    renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} disabled />);
    expect(screen.getByRole('combobox')).toBeDisabled();
  });

  it('debounces search: no request fires before 200ms', async () => {
    mock.onGet('/mitre/techniques').reply(200, TECHNIQUES);
    const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });

    renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);

    const input = screen.getByRole('combobox');
    await user.click(input);
    await user.type(input, 'T');

    expect(mock.history.get.length).toBe(0);

    act(() => { vi.advanceTimersByTime(300); });

    await waitFor(() => expect(mock.history.get.length).toBeGreaterThan(0));
  });

  it('displays results in dropdown after debounce', async () => {
    mock.onGet('/mitre/techniques').reply(200, TECHNIQUES);
    const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });

    renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);

    const input = screen.getByRole('combobox');
    await user.click(input);
    await user.type(input, 'T1059');
    act(() => { vi.advanceTimersByTime(300); });

    await waitFor(() => {
      expect(screen.getByRole('listbox')).toBeInTheDocument();
    });

    const options = screen.getAllByRole('option');
    expect(options.length).toBeGreaterThan(0);
    expect(options[0].textContent).toContain('T1059');
  });

  it('selecting a result calls onSelect with technique object', async () => {
    mock.onGet('/mitre/techniques').reply(200, TECHNIQUES);
    const onSelect = vi.fn();
    const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });

    renderWithProviders(<MitreTechniquePicker onSelect={onSelect} />);

    const input = screen.getByRole('combobox');
    await user.click(input);
    await user.type(input, 'T1059');
    act(() => { vi.advanceTimersByTime(300); });

    await waitFor(() => screen.getByRole('listbox'));

    const options = screen.getAllByRole('option');
    await user.click(options[0]);

    expect(onSelect).toHaveBeenCalledWith(
      expect.objectContaining({ id: 'T1059', name: 'Command and Scripting Interpreter' }),
    );
  });

  it('resets input to empty after selection (one-shot)', async () => {
    mock.onGet('/mitre/techniques').reply(200, TECHNIQUES);
    const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });

    renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);

    const input = screen.getByRole('combobox') as HTMLInputElement;
    await user.click(input);
    await user.type(input, 'T1059');
    act(() => { vi.advanceTimersByTime(300); });

    await waitFor(() => screen.getByRole('listbox'));

    const options = screen.getAllByRole('option');
    await user.click(options[0]);

    // Input must be reset after selection
    expect(input.value).toBe('');
  });

  it('keyboard ArrowDown + Enter selects item', async () => {
    mock.onGet('/mitre/techniques').reply(200, TECHNIQUES);
    const onSelect = vi.fn();
    const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });

    renderWithProviders(<MitreTechniquePicker onSelect={onSelect} />);

    const input = screen.getByRole('combobox');
    await user.click(input);
    await user.type(input, 'T105');
    act(() => { vi.advanceTimersByTime(300); });

    await waitFor(() => screen.getByRole('listbox'));

    await user.keyboard('{ArrowDown}');
    await user.keyboard('{Enter}');

    expect(onSelect).toHaveBeenCalled();
  });

  it('Escape closes the dropdown', async () => {
    mock.onGet('/mitre/techniques').reply(200, TECHNIQUES);
    const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });

    renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);

    const input = screen.getByRole('combobox');
    await user.click(input);
    await user.type(input, 'T1059');
    act(() => { vi.advanceTimersByTime(300); });

    await waitFor(() => screen.getByRole('listbox'));

    await user.keyboard('{Escape}');

    expect(screen.queryByRole('listbox')).toBeNull();
  });

  it('shows inline error when API returns 503', async () => {
    mock.onGet('/mitre/techniques').reply(503, { error: 'mitre bundle not loaded' });
    const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });

    renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);

    const input = screen.getByRole('combobox');
    await user.click(input);
    await user.type(input, 'T1059');
    act(() => { vi.advanceTimersByTime(300); });

    await waitFor(() => {
      expect(screen.getByRole('alert')).toBeInTheDocument();
    });
  });
});