feat: add Zigbee2MQTT network map importer

- Backend: async MQTT service (aiomqtt) to fetch Z2M networkmap via bridge API - Backend: FastAPI router at /api/v1/zigbee with /import and /test-connection - Backend: Pydantic v2 schemas for request/response validation - Backend: coordinator → router → end-device parent_id hierarchy builder - Frontend: ZigbeeImportModal with MQTT config form, Test Connection, Fetch Devices - Frontend: device list grouped by type (coordinator/router/enddevice) with checkboxes - Frontend: ZigbeeCoordinatorNode, ZigbeeRouterNode, ZigbeeEndDeviceNode canvas nodes - Frontend: Zigbee Import button in sidebar alongside Scan Network - Frontend: handleZigbeeAddToCanvas wires selected devices + edges onto canvas - Tests: full unit test suite for parser, hierarchy builder, MQTT mocks - Tests: API endpoint tests for /zigbee/import and /zigbee/test-connection - Tests: Vitest component tests for ZigbeeImportModal - Docs: docs/zigbee-import.md with full usage, MQTT config, troubleshooting guide - Docs: README.md Zigbee2MQTT Import section Co-authored-by: CyberKeys <noreply@openclaw.ai>
2026-05-04 13:58:58 +00:00
parent 5fb77ab00b
commit 103e24e5fa
18 changed files with 1780 additions and 5 deletions
@@ -0,0 +1,171 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { ZigbeeImportModal } from '../ZigbeeImportModal'
+
+vi.mock('@/api/client', () => ({
+  zigbeeApi: {
+    testConnection: vi.fn(),
+    importNetwork: vi.fn(),
+  },
+}))
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), info: vi.fn() } }))
+
+import { zigbeeApi } from '@/api/client'
+import { toast } from 'sonner'
+
+const defaultProps = {
+  open: true,
+  onClose: vi.fn(),
+  onAddToCanvas: vi.fn(),
+}
+
+const sampleNodes = [
+  {
+    id: '0x0000',
+    label: 'Coordinator',
+    type: 'zigbee_coordinator' as const,
+    ieee_address: '0x0000',
+    friendly_name: 'Coordinator',
+    device_type: 'Coordinator',
+    model: null,
+    vendor: null,
+    lqi: null,
+    parent_id: null,
+  },
+  {
+    id: '0x0001',
+    label: 'router_1',
+    type: 'zigbee_router' as const,
+    ieee_address: '0x0001',
+    friendly_name: 'router_1',
+    device_type: 'Router',
+    model: 'CC2530',
+    vendor: 'TI',
+    lqi: 200,
+    parent_id: '0x0000',
+  },
+]
+
+describe('ZigbeeImportModal', () => {
+  beforeEach(() => {
+    vi.mocked(zigbeeApi.testConnection).mockReset()
+    vi.mocked(zigbeeApi.importNetwork).mockReset()
+    vi.mocked(toast.success).mockReset()
+    vi.mocked(toast.error).mockReset()
+    vi.mocked(toast.info).mockReset()
+    defaultProps.onClose.mockReset()
+    defaultProps.onAddToCanvas.mockReset()
+  })
+
+  it('renders nothing when closed', () => {
+    const { container } = render(<ZigbeeImportModal {...defaultProps} open={false} />)
+    expect(container.querySelector('[role="dialog"]')).toBeNull()
+  })
+
+  it('renders the modal with form fields when open', () => {
+    render(<ZigbeeImportModal {...defaultProps} />)
+    expect(screen.getByText('Zigbee2MQTT Import')).toBeDefined()
+    expect(screen.getByPlaceholderText('192.168.1.x or mqtt.local')).toBeDefined()
+    expect(screen.getByPlaceholderText('1883')).toBeDefined()
+    expect(screen.getByPlaceholderText('zigbee2mqtt')).toBeDefined()
+  })
+
+  it('shows error toast when testing connection without a host', async () => {
+    render(<ZigbeeImportModal {...defaultProps} />)
+    fireEvent.click(screen.getByRole('button', { name: /test connection/i }))
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Enter a broker hostname')
+    })
+    expect(zigbeeApi.testConnection).not.toHaveBeenCalled()
+  })
+
+  it('shows success status when connection test passes', async () => {
+    vi.mocked(zigbeeApi.testConnection).mockResolvedValue({
+      data: { connected: true, message: 'Connection successful' },
+    } as never)
+
+    render(<ZigbeeImportModal {...defaultProps} />)
+    const hostInput = screen.getByPlaceholderText('192.168.1.x or mqtt.local')
+    fireEvent.change(hostInput, { target: { value: '192.168.1.100' } })
+    fireEvent.click(screen.getByRole('button', { name: /test connection/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Connection successful')).toBeDefined()
+    })
+  })
+
+  it('shows failure status when connection test fails', async () => {
+    vi.mocked(zigbeeApi.testConnection).mockResolvedValue({
+      data: { connected: false, message: 'Connection refused' },
+    } as never)
+
+    render(<ZigbeeImportModal {...defaultProps} />)
+    const hostInput = screen.getByPlaceholderText('192.168.1.x or mqtt.local')
+    fireEvent.change(hostInput, { target: { value: '10.0.0.1' } })
+    fireEvent.click(screen.getByRole('button', { name: /test connection/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Connection refused')).toBeDefined()
+    })
+  })
+
+  it('fetches devices and renders them grouped by type', async () => {
+    vi.mocked(zigbeeApi.importNetwork).mockResolvedValue({
+      data: { nodes: sampleNodes, edges: [], device_count: 2 },
+    } as never)
+
+    render(<ZigbeeImportModal {...defaultProps} />)
+    const hostInput = screen.getByPlaceholderText('192.168.1.x or mqtt.local')
+    fireEvent.change(hostInput, { target: { value: '192.168.1.100' } })
+    fireEvent.click(screen.getByRole('button', { name: /fetch devices/i }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Coordinator')).toBeDefined()
+      expect(screen.getByText('router_1')).toBeDefined()
+    })
+    expect(toast.success).toHaveBeenCalledWith('Found 2 devices')
+  })
+
+  it('shows info toast when no devices found', async () => {
+    vi.mocked(zigbeeApi.importNetwork).mockResolvedValue({
+      data: { nodes: [], edges: [], device_count: 0 },
+    } as never)
+
+    render(<ZigbeeImportModal {...defaultProps} />)
+    const hostInput = screen.getByPlaceholderText('192.168.1.x or mqtt.local')
+    fireEvent.change(hostInput, { target: { value: '192.168.1.100' } })
+    fireEvent.click(screen.getByRole('button', { name: /fetch devices/i }))
+
+    await waitFor(() => {
+      expect(toast.info).toHaveBeenCalledWith('No Zigbee devices found in the network map')
+    })
+  })
+
+  it('calls onAddToCanvas with selected devices and closes modal', async () => {
+    vi.mocked(zigbeeApi.importNetwork).mockResolvedValue({
+      data: { nodes: sampleNodes, edges: [{ source: '0x0000', target: '0x0001' }], device_count: 2 },
+    } as never)
+
+    render(<ZigbeeImportModal {...defaultProps} />)
+    const hostInput = screen.getByPlaceholderText('192.168.1.x or mqtt.local')
+    fireEvent.change(hostInput, { target: { value: '192.168.1.100' } })
+    fireEvent.click(screen.getByRole('button', { name: /fetch devices/i }))
+
+    await waitFor(() => screen.getByText('Coordinator'))
+
+    // Click "Add N to Canvas" button
+    const addBtn = screen.getByRole('button', { name: /add.*canvas/i })
+    fireEvent.click(addBtn)
+
+    await waitFor(() => {
+      expect(defaultProps.onAddToCanvas).toHaveBeenCalledOnce()
+      expect(defaultProps.onClose).toHaveBeenCalledOnce()
+    })
+  })
+
+  it('calls onClose when Cancel is clicked', () => {
+    render(<ZigbeeImportModal {...defaultProps} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(defaultProps.onClose).toHaveBeenCalledOnce()
+  })
+})