feat: make spatial entry optional and authoritative

frontend/src/components/map/MunicipalitySearch.test.tsx

@@ -1,32 +1,36 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/react'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { areasApi } from '../../services/api/areas'
 import { MunicipalitySearch } from './MunicipalitySearch'
 import type { AreaRead } from '../../types'
 
-const areas = [
-  { id: 'mol', project_id: 'project', name: 'Gemeente Mol', geometry: { type: 'Polygon', coordinates: [] } },
-  { id: 'gent', project_id: 'project', name: 'Gemeente Gent', geometry: { type: 'Polygon', coordinates: [] } },
-  { id: 'flanders', project_id: 'project', name: 'Vlaanderen', geometry: { type: 'Polygon', coordinates: [] } },
-] satisfies AreaRead[]
+vi.mock('../../services/api/areas', () => ({
+  areasApi: { searchMunicipalities: vi.fn() },
+}))
 
 describe('MunicipalitySearch', () => {
+  beforeEach(() => {
+    vi.mocked(areasApi.searchMunicipalities).mockResolvedValue({
+      items: [{ niscode: '13025', name: 'Mol', name_nl: 'Mol', name_fr: 'Mol', name_de: 'Mol' }],
+      total: 1,
+    })
+  })
   afterEach(() => cleanup())
 
-  it('selects an exact municipality while excluding regional areas', () => {
-    const onSelect = vi.fn()
-    render(<MunicipalitySearch areas={areas} selectedAreaId="" onSelect={onSelect} />)
+  it('searches the official municipality catalog and activates a result', async () => {
+    const activated = { id: 'mol', project_id: 'project', name: 'Gemeente Mol - NIS 13025' } as AreaRead
+    const onActivate = vi.fn().mockResolvedValue(activated)
+    render(<MunicipalitySearch projectId="project" activeArea={null} onActivate={onActivate} />)
 
-    const input = screen.getByTestId('municipality-search-input')
-    fireEvent.change(input, { target: { value: 'Mol' } })
-    fireEvent.click(screen.getByRole('button', { name: 'Gemeente laden' }))
-
-    expect(onSelect).toHaveBeenCalledWith('mol')
-    expect(screen.getByText('2 gemeenten beschikbaar')).toBeTruthy()
+    fireEvent.change(screen.getByTestId('municipality-search-input'), { target: { value: 'Mol' } })
+    await waitFor(() => expect(areasApi.searchMunicipalities).toHaveBeenCalledWith('project', 'Mol'))
+    fireEvent.click(await screen.findByRole('button', { name: /Mol/ }))
+    await waitFor(() => expect(onActivate).toHaveBeenCalledWith('13025'))
   })
 
-  it('shows the active municipality without the technical prefix', () => {
-    render(<MunicipalitySearch areas={areas} selectedAreaId="gent" onSelect={vi.fn()} />)
-    expect(screen.getByDisplayValue('Gent')).toBeTruthy()
-    expect(screen.getByText('Gent actief')).toBeTruthy()
+  it('presents municipality search as optional and keeps free selection visible', () => {
+    render(<MunicipalitySearch projectId="project" activeArea={null} onActivate={vi.fn()} />)
+    expect(screen.getByText('optioneel')).toBeTruthy()
+    expect(screen.getByText('Vrije kaartselectie')).toBeTruthy()
   })
 })