import { describe, it, expect, beforeEach, vi } from 'vitest' import { render, screen, fireEvent, waitFor } from '@testing-library/react' import { PendingDevicesModal } from '../PendingDevicesModal' import { useCanvasStore } from '@/stores/canvasStore' vi.mock('@/stores/canvasStore') const mockBulkApprove = vi.fn() const mockBulkHide = vi.fn() const mockRestore = vi.fn() const mockBulkRestore = vi.fn() const mockApprove = vi.fn() const mockHide = vi.fn() const mockPending = vi.fn() const mockHidden = vi.fn() const mockAddNode = vi.fn() vi.mock('@/api/client', () => ({ scanApi: { pending: (...a: unknown[]) => mockPending(...a), hidden: (...a: unknown[]) => mockHidden(...a), clearPending: vi.fn().mockResolvedValue({}), approve: (...a: unknown[]) => mockApprove(...a), hide: (...a: unknown[]) => mockHide(...a), ignore: vi.fn().mockResolvedValue({}), bulkApprove: (...a: unknown[]) => mockBulkApprove(...a), bulkHide: (...a: unknown[]) => mockBulkHide(...a), restore: (...a: unknown[]) => mockRestore(...a), bulkRestore: (...a: unknown[]) => mockBulkRestore(...a), }, })) vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } })) vi.mock('@/components/modals/PendingDeviceModal', () => ({ PendingDeviceModal: ({ device }: { device: unknown }) => device ?
: null, })) const DEVICE_IP = { id: 'dev-a', ip: '192.168.1.10', hostname: 'host-a', mac: 'aa:bb:cc:dd:ee:01', os: null, services: [{ port: 80, protocol: 'tcp', service_name: 'http' }], suggested_type: 'server', status: 'pending', discovery_source: 'arp', discovered_at: '2026-01-01T00:00:00Z', } const DEVICE_ZIGBEE = { id: 'dev-b', ip: null, hostname: null, mac: null, os: null, services: [], suggested_type: 'iot', status: 'pending', discovery_source: 'zigbee', ieee_address: '0x00124b001234abcd', friendly_name: 'living-room-bulb', vendor: 'Philips', model: 'Hue White', discovered_at: '2026-01-02T00:00:00Z', } beforeEach(() => { vi.clearAllMocks() vi.mocked(useCanvasStore).mockReturnValue({ addNode: mockAddNode, scanEventTs: 0, } as unknown as ReturnType) // setState is used by injectAutoEdges ;(useCanvasStore as unknown as { setState: (fn: unknown) => void }).setState = vi.fn() mockPending.mockResolvedValue({ data: [DEVICE_IP, DEVICE_ZIGBEE] }) mockHidden.mockResolvedValue({ data: [] }) mockApprove.mockResolvedValue({ data: { node_id: 'n1', edges: [], edges_created: 0 } }) mockHide.mockResolvedValue({ data: {} }) mockBulkApprove.mockResolvedValue({ data: { approved: 2, node_ids: ['n1', 'n2'], device_ids: ['dev-a', 'dev-b'], edges: [], edges_created: 0 }, }) mockBulkHide.mockResolvedValue({ data: { hidden: 2, skipped: 0 } }) mockRestore.mockResolvedValue({ data: { restored: true, device_id: 'dev-a' } }) mockBulkRestore.mockResolvedValue({ data: { restored: 1, skipped: 0 } }) }) const baseProps = { open: true, onClose: vi.fn(), } describe('PendingDevicesModal', () => { it('loads and renders pending devices on open', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) expect(screen.getByText('living-room-bulb')).toBeInTheDocument() }) it('shows source chip ZIGBEE for zigbee device', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) expect(screen.getByText('ZIGBEE')).toBeInTheDocument() }) it('filters by search query', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.change(screen.getByPlaceholderText(/Search/), { target: { value: 'living' } }) expect(screen.queryByTestId('pending-card-dev-a')).not.toBeInTheDocument() expect(screen.getByTestId('pending-card-dev-b')).toBeInTheDocument() }) it('filters by source (zigbee only)', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.click(screen.getByRole('button', { name: 'Zigbee' })) expect(screen.queryByTestId('pending-card-dev-a')).not.toBeInTheDocument() expect(screen.getByTestId('pending-card-dev-b')).toBeInTheDocument() }) it('filters by suggested type', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.change(screen.getByLabelText('Type filter'), { target: { value: 'server' } }) expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument() expect(screen.queryByTestId('pending-card-dev-b')).not.toBeInTheDocument() }) it('switches to hidden status loads hidden devices', async () => { mockHidden.mockResolvedValue({ data: [{ ...DEVICE_IP, id: 'h1', hostname: 'hidden-host', status: 'hidden' }], }) render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.click(screen.getByRole('button', { name: 'Hidden' })) await waitFor(() => expect(screen.getByTestId('pending-card-h1')).toBeInTheDocument()) expect(mockHidden).toHaveBeenCalled() }) it('opens approval modal when card is clicked outside select mode', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.click(screen.getByTestId('pending-card-dev-a')) expect(screen.getByTestId('approval-modal')).toBeInTheDocument() }) it('toggles selection in select mode instead of opening approval', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.click(screen.getByRole('button', { name: 'Select mode' })) fireEvent.click(screen.getByTestId('pending-card-dev-a')) expect(screen.queryByTestId('approval-modal')).not.toBeInTheDocument() expect(screen.getByText('1 selected')).toBeInTheDocument() }) it('select all visible selects only filtered devices', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.click(screen.getByRole('button', { name: 'Select mode' })) fireEvent.change(screen.getByPlaceholderText(/Search/), { target: { value: 'host-a' } }) fireEvent.click(screen.getByRole('button', { name: /Select all visible/ })) expect(screen.getByText('1 selected')).toBeInTheDocument() }) it('bulk approve calls API with selected ids', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.click(screen.getByRole('button', { name: 'Select mode' })) fireEvent.click(screen.getByTestId('pending-card-dev-a')) fireEvent.click(screen.getByTestId('pending-card-dev-b')) fireEvent.click(screen.getByRole('button', { name: /Approve \(2\)/ })) await waitFor(() => expect(mockBulkApprove).toHaveBeenCalledWith(['dev-a', 'dev-b'])) }) it('bulk approve carries the scanned MAC onto the canvas node (#168)', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.click(screen.getByRole('button', { name: 'Select mode' })) fireEvent.click(screen.getByTestId('pending-card-dev-a')) fireEvent.click(screen.getByTestId('pending-card-dev-b')) fireEvent.click(screen.getByRole('button', { name: /Approve \(2\)/ })) await waitFor(() => expect(mockAddNode).toHaveBeenCalledTimes(2)) // dev-a is an IP device with a MAC → node carries mac + a MAC property row. const ipNode = mockAddNode.mock.calls .map((c) => c[0]) .find((n) => n.id === 'n1') expect(ipNode.data.mac).toBe('aa:bb:cc:dd:ee:01') expect(ipNode.data.properties).toContainEqual({ key: 'MAC', value: 'aa:bb:cc:dd:ee:01', icon: null, visible: false, }) // dev-b is zigbee with no MAC → no MAC property row. const zbNode = mockAddNode.mock.calls .map((c) => c[0]) .find((n) => n.id === 'n2') expect(zbNode.data.properties.some((p: { key: string }) => p.key === 'MAC')).toBe(false) }) it('bulk hide calls API with selected ids', async () => { render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.click(screen.getByRole('button', { name: 'Select mode' })) fireEvent.click(screen.getByTestId('pending-card-dev-a')) fireEvent.click(screen.getByRole('button', { name: /Hide \(1\)/ })) await waitFor(() => expect(mockBulkHide).toHaveBeenCalledWith(['dev-a'])) }) it('does not load when closed', () => { render() expect(mockPending).not.toHaveBeenCalled() }) it('respects initialStatus=hidden', async () => { mockHidden.mockResolvedValue({ data: [{ ...DEVICE_IP, hostname: 'hidden-host', status: 'hidden' }] }) render() await waitFor(() => expect(mockHidden).toHaveBeenCalled()) expect(mockPending).not.toHaveBeenCalled() }) it('clicking a hidden card restores it instead of opening approval', async () => { mockHidden.mockResolvedValue({ data: [{ ...DEVICE_IP, status: 'hidden' }] }) render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.click(screen.getByTestId('pending-card-dev-a')) await waitFor(() => expect(mockRestore).toHaveBeenCalledWith('dev-a')) expect(screen.queryByTestId('approval-modal')).not.toBeInTheDocument() }) it('bulk restore in hidden mode calls API with selected ids', async () => { mockHidden.mockResolvedValue({ data: [{ ...DEVICE_IP, status: 'hidden' }] }) render() await waitFor(() => expect(screen.getByTestId('pending-card-dev-a')).toBeInTheDocument()) fireEvent.click(screen.getByRole('button', { name: 'Select mode' })) fireEvent.click(screen.getByTestId('pending-card-dev-a')) fireEvent.click(screen.getByRole('button', { name: /Restore \(1\)/ })) await waitFor(() => expect(mockBulkRestore).toHaveBeenCalledWith(['dev-a'])) }) })