feat(frontend): sprint 3 — multi-technique MITRE selection + matrix modal
- types: replace mitre_technique_id/name scalars with techniques:MitreTechnique[] on Simulation; add MitreTactic/MitreMatrixTechnique/MitreMatrixSubtechnique; SimulationPatchInput now uses technique_ids:string[] - api/mitre.ts: add getMitreMatrix() → GET /api/mitre/matrix - hooks/useMitre: add useMitreMatrix(enabled) with staleTime:Infinity - MitreTechniquePicker: clean rewrite — onSelect(technique) one-shot, resets input after selection, no incoming value props - MitreTechniqueTag: chip component with id+name and × remove button - MitreMatrixModal: tactic columns (220px fixed), expand/collapse subtechniques, search filter (auto-expands parent on sub match), selection state, focus trap (Tab wrap, Escape, search autofocus), backdrop click cancel, Apply N techniques - MitreTechniquesField: orchestrates tags+picker+matrix with auto-save PATCH on every add/remove/Apply, dedup guard, disabled read-only mode for SOC - SimulationFormPage: swap MitreTechniquePicker for MitreTechniquesField; remove technique state from RT form (techniques have independent auto-save cycle) - SimulationList: MITRE column → T1059 +2 counter format, — when empty - Tests: 84 passing (13 test files); new suites for Tag, Field, Modal; MitreTechniquePicker + SimulationFormPage + SimulationList adapted to new API Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
@@ -28,41 +28,14 @@ describe('MitreTechniquePicker', () => {
|
||||
|
||||
it('renders input with placeholder', () => {
|
||||
vi.useRealTimers();
|
||||
renderWithProviders(
|
||||
<MitreTechniquePicker
|
||||
techniqueId={null}
|
||||
techniqueName={null}
|
||||
onChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);
|
||||
expect(screen.getByRole('combobox')).toBeInTheDocument();
|
||||
expect(screen.getByPlaceholderText(/Search by ID or name/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows preselected value when techniqueId and name provided', () => {
|
||||
vi.useRealTimers();
|
||||
renderWithProviders(
|
||||
<MitreTechniquePicker
|
||||
techniqueId="T1059"
|
||||
techniqueName="Command and Scripting Interpreter"
|
||||
onChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
const input = screen.getByRole('combobox') as HTMLInputElement;
|
||||
expect(input.value).toContain('T1059');
|
||||
expect(input.value).toContain('Command and Scripting Interpreter');
|
||||
});
|
||||
|
||||
it('is disabled when disabled prop is true', () => {
|
||||
vi.useRealTimers();
|
||||
renderWithProviders(
|
||||
<MitreTechniquePicker
|
||||
techniqueId={null}
|
||||
techniqueName={null}
|
||||
onChange={vi.fn()}
|
||||
disabled
|
||||
/>,
|
||||
);
|
||||
renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} disabled />);
|
||||
expect(screen.getByRole('combobox')).toBeDisabled();
|
||||
});
|
||||
|
||||
@@ -70,22 +43,14 @@ describe('MitreTechniquePicker', () => {
|
||||
mock.onGet('/mitre/techniques').reply(200, TECHNIQUES);
|
||||
const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });
|
||||
|
||||
renderWithProviders(
|
||||
<MitreTechniquePicker
|
||||
techniqueId={null}
|
||||
techniqueName={null}
|
||||
onChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);
|
||||
|
||||
const input = screen.getByRole('combobox');
|
||||
await user.click(input);
|
||||
await user.type(input, 'T');
|
||||
|
||||
// Before debounce fires
|
||||
expect(mock.history.get.length).toBe(0);
|
||||
|
||||
// Advance past debounce
|
||||
act(() => { vi.advanceTimersByTime(300); });
|
||||
|
||||
await waitFor(() => expect(mock.history.get.length).toBeGreaterThan(0));
|
||||
@@ -95,13 +60,7 @@ describe('MitreTechniquePicker', () => {
|
||||
mock.onGet('/mitre/techniques').reply(200, TECHNIQUES);
|
||||
const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });
|
||||
|
||||
renderWithProviders(
|
||||
<MitreTechniquePicker
|
||||
techniqueId={null}
|
||||
techniqueName={null}
|
||||
onChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);
|
||||
|
||||
const input = screen.getByRole('combobox');
|
||||
await user.click(input);
|
||||
@@ -117,18 +76,12 @@ describe('MitreTechniquePicker', () => {
|
||||
expect(options[0].textContent).toContain('T1059');
|
||||
});
|
||||
|
||||
it('selecting a result calls onChange with id and name', async () => {
|
||||
it('selecting a result calls onSelect with technique object', async () => {
|
||||
mock.onGet('/mitre/techniques').reply(200, TECHNIQUES);
|
||||
const onChange = vi.fn();
|
||||
const onSelect = vi.fn();
|
||||
const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });
|
||||
|
||||
renderWithProviders(
|
||||
<MitreTechniquePicker
|
||||
techniqueId={null}
|
||||
techniqueName={null}
|
||||
onChange={onChange}
|
||||
/>,
|
||||
);
|
||||
renderWithProviders(<MitreTechniquePicker onSelect={onSelect} />);
|
||||
|
||||
const input = screen.getByRole('combobox');
|
||||
await user.click(input);
|
||||
@@ -140,20 +93,16 @@ describe('MitreTechniquePicker', () => {
|
||||
const options = screen.getAllByRole('option');
|
||||
await user.click(options[0]);
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith('T1059', 'Command and Scripting Interpreter');
|
||||
expect(onSelect).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ id: 'T1059', name: 'Command and Scripting Interpreter' }),
|
||||
);
|
||||
});
|
||||
|
||||
it('populates input display string after selection', async () => {
|
||||
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
|
||||
techniqueId={null}
|
||||
techniqueName={null}
|
||||
onChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);
|
||||
|
||||
const input = screen.getByRole('combobox') as HTMLInputElement;
|
||||
await user.click(input);
|
||||
@@ -165,22 +114,16 @@ describe('MitreTechniquePicker', () => {
|
||||
const options = screen.getAllByRole('option');
|
||||
await user.click(options[0]);
|
||||
|
||||
expect(input.value).toContain('T1059');
|
||||
expect(input.value).toContain('Command and Scripting Interpreter');
|
||||
// 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 onChange = vi.fn();
|
||||
const onSelect = vi.fn();
|
||||
const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });
|
||||
|
||||
renderWithProviders(
|
||||
<MitreTechniquePicker
|
||||
techniqueId={null}
|
||||
techniqueName={null}
|
||||
onChange={onChange}
|
||||
/>,
|
||||
);
|
||||
renderWithProviders(<MitreTechniquePicker onSelect={onSelect} />);
|
||||
|
||||
const input = screen.getByRole('combobox');
|
||||
await user.click(input);
|
||||
@@ -192,20 +135,14 @@ describe('MitreTechniquePicker', () => {
|
||||
await user.keyboard('{ArrowDown}');
|
||||
await user.keyboard('{Enter}');
|
||||
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
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
|
||||
techniqueId={null}
|
||||
techniqueName={null}
|
||||
onChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);
|
||||
|
||||
const input = screen.getByRole('combobox');
|
||||
await user.click(input);
|
||||
@@ -219,37 +156,11 @@ describe('MitreTechniquePicker', () => {
|
||||
expect(screen.queryByRole('listbox')).toBeNull();
|
||||
});
|
||||
|
||||
it('typing while techniqueId is null does not reset inputValue between keystrokes', async () => {
|
||||
mock.onGet('/mitre/techniques').reply(200, []);
|
||||
const user = userEvent.setup({ advanceTimers: (ms) => vi.advanceTimersByTime(ms) });
|
||||
|
||||
renderWithProviders(
|
||||
<MitreTechniquePicker
|
||||
techniqueId={null}
|
||||
techniqueName={null}
|
||||
onChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
const input = screen.getByRole('combobox') as HTMLInputElement;
|
||||
await user.click(input);
|
||||
await user.type(input, 'T10');
|
||||
|
||||
// Input must retain the full typed value — no mid-stroke reset
|
||||
expect(input.value).toBe('T10');
|
||||
});
|
||||
|
||||
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
|
||||
techniqueId={null}
|
||||
techniqueName={null}
|
||||
onChange={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
renderWithProviders(<MitreTechniquePicker onSelect={vi.fn()} />);
|
||||
|
||||
const input = screen.getByRole('combobox');
|
||||
await user.click(input);
|
||||
|
||||
Reference in New Issue
Block a user