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 { MitreMatrixModal } from '@/components/MitreMatrixModal'; import { renderWithProviders } from './utils'; import type { MitreTactic, MitreTechnique } from '@/api/types'; const MATRIX: MitreTactic[] = [ { tactic_id: 'TA0001', tactic_name: 'Initial Access', techniques: [ { id: 'T1078', name: 'Valid Accounts', subtechniques: [ { id: 'T1078.001', name: 'Default Accounts' }, { id: 'T1078.002', name: 'Domain Accounts' }, ], }, { id: 'T1190', name: 'Exploit Public-Facing Application', subtechniques: [], }, ], }, { tactic_id: 'TA0002', tactic_name: 'Execution', techniques: [ { id: 'T1059', name: 'Command and Scripting Interpreter', subtechniques: [{ id: 'T1059.001', name: 'PowerShell' }], }, ], }, ]; const SELECTION: MitreTechnique[] = [ { id: 'T1078', name: 'Valid Accounts', tactics: ['initial-access'] }, ]; const NO_TACTICS: never[] = []; describe('MitreMatrixModal', () => { let mock: MockAdapter; beforeEach(() => { mock = new MockAdapter(apiClient); mock.onGet('/mitre/matrix').reply(200, MATRIX); }); afterEach(() => { mock.restore(); }); it('returns null when isOpen=false', () => { const { container } = renderWithProviders( , ); expect(container.firstChild).toBeNull(); }); it('renders dialog with tactic columns when open', async () => { renderWithProviders( , ); await waitFor(() => { expect(screen.getByText('Initial Access')).toBeInTheDocument(); expect(screen.getByText('Execution')).toBeInTheDocument(); }); }); it('renders techniques for each tactic', async () => { renderWithProviders( , ); await waitFor(() => { expect(screen.getByText('T1078')).toBeInTheDocument(); expect(screen.getByText('T1059')).toBeInTheDocument(); }); }); it('Apply button calls onApply with selected techniques', async () => { const onApply = vi.fn(); const user = userEvent.setup(); renderWithProviders( , ); await waitFor(() => screen.getByText('T1078')); const t1078Btn = screen.getAllByRole('button').find( (btn) => btn.textContent?.includes('T1078') && !btn.getAttribute('aria-label'), ); await user.click(t1078Btn!); await user.click(screen.getByRole('button', { name: /Apply/i })); expect(onApply).toHaveBeenCalledWith( expect.objectContaining({ techniques: expect.arrayContaining([expect.objectContaining({ id: 'T1078' })]), }), ); }); it('Cancel button calls onCancel without onApply', async () => { const onApply = vi.fn(); const onCancel = vi.fn(); const user = userEvent.setup(); renderWithProviders( , ); await user.click(screen.getByRole('button', { name: /Cancel/i })); expect(onCancel).toHaveBeenCalled(); expect(onApply).not.toHaveBeenCalled(); }); it('Escape key calls onCancel', async () => { const onCancel = vi.fn(); const user = userEvent.setup(); renderWithProviders( , ); await user.keyboard('{Escape}'); expect(onCancel).toHaveBeenCalled(); }); it('shows initial technique selection as selected (count in header)', async () => { renderWithProviders( , ); await waitFor(() => screen.getByText('T1078')); expect(screen.getByText(/1 sel\./i)).toBeInTheDocument(); }); it('search filter narrows visible techniques', async () => { const user = userEvent.setup(); renderWithProviders( , ); await waitFor(() => screen.getByText('T1078')); const searchInput = screen.getByPlaceholderText(/Filter techniques/i); await user.type(searchInput, 'T1059'); expect(screen.queryByText('T1078')).toBeNull(); expect(screen.getByText('T1059')).toBeInTheDocument(); }); it('chevron expands subtechniques', async () => { const user = userEvent.setup(); renderWithProviders( , ); await waitFor(() => screen.getByText('T1078')); expect(screen.queryByText(/Default Accounts/)).toBeNull(); const expandBtn = screen.getByRole('button', { name: /Expand T1078/i }); await user.click(expandBtn); expect(screen.getByText(/Default Accounts/)).toBeInTheDocument(); }); it('Apply button shows item count when techniques selected', async () => { renderWithProviders( , ); await waitFor(() => { expect(screen.getByRole('button', { name: /Apply 1 item/i })).toBeInTheDocument(); }); }); it('Apply button is disabled when nothing selected and no initial selection', async () => { renderWithProviders( , ); await waitFor(() => screen.getByText('T1078')); const applyBtn = screen.getByRole('button', { name: /Clear all/i }); expect(applyBtn).toBeDisabled(); }); it('Apply button shows "Clear all" and is enabled when initial selection is deselected', async () => { const onApply = vi.fn(); const user = userEvent.setup(); renderWithProviders( , ); await waitFor(() => screen.getByText('T1078')); const t1078Btn = screen.getAllByRole('button').find( (btn) => btn.textContent?.includes('T1078') && !btn.getAttribute('aria-label'), ); await user.click(t1078Btn!); const applyBtn = screen.getByRole('button', { name: /Clear all/i }); expect(applyBtn).not.toBeDisabled(); await user.click(applyBtn); expect(onApply).toHaveBeenCalledWith( expect.objectContaining({ techniques: [], tactics: [] }), ); }); it('backdrop click calls onCancel', async () => { const onCancel = vi.fn(); const user = userEvent.setup(); renderWithProviders( , ); const backdrop = document.querySelector('.bg-ink\\/60') as HTMLElement; if (backdrop) await user.click(backdrop); expect(onCancel).toHaveBeenCalled(); }); });