feat: clarify municipality-first workbench flow

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

@@ -0,0 +1,32 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+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[]
+
+describe('MunicipalitySearch', () => {
+  afterEach(() => cleanup())
+
+  it('selects an exact municipality while excluding regional areas', () => {
+    const onSelect = vi.fn()
+    render(<MunicipalitySearch areas={areas} selectedAreaId="" onSelect={onSelect} />)
+
+    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()
+  })
+
+  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()
+  })
+})