@defra/interactive-map 0.0.3-alpha → 0.0.5-alpha

package/plugins/interact/src/api/selectFeature.test.js

@@ -0,0 +1,33 @@
+import { selectFeature } from './selectFeature.js'
+
+describe('selectFeature', () => {
+  it('emits interact:selectFeature with correct payload', () => {
+    const emit = jest.fn()
+    const services = { eventBus: { emit } }
+
+    // Test with all params
+    selectFeature(
+      { services },
+      { featureId: 'f1', layerId: 'layer-abc', idProperty: 'objectId' }
+    )
+
+    expect(emit).toHaveBeenCalledTimes(1)
+    expect(emit).toHaveBeenCalledWith('interact:selectFeature', {
+      featureId: 'f1',
+      layerId: 'layer-abc',
+      idProperty: 'objectId'
+    })
+
+    emit.mockClear()
+
+    // Test missing optional params
+    selectFeature({ services }, { featureId: 'f2' })
+
+    expect(emit).toHaveBeenCalledTimes(1)
+    expect(emit).toHaveBeenCalledWith('interact:selectFeature', {
+      featureId: 'f2',
+      layerId: undefined,
+      idProperty: undefined
+    })
+  })
+})

package/plugins/interact/src/api/unselectFeature.test.js

@@ -0,0 +1,33 @@
+import { unselectFeature } from './unselectFeature.js'
+
+describe('unselectFeature', () => {
+  it('emits interact:unselectFeature with correct payload', () => {
+    const emit = jest.fn()
+    const services = { eventBus: { emit } }
+
+    // Test with all params
+    unselectFeature(
+      { services },
+      { featureId: 'f1', layerId: 'layer-abc', idProperty: 'objectId' }
+    )
+
+    expect(emit).toHaveBeenCalledTimes(1)
+    expect(emit).toHaveBeenCalledWith('interact:unselectFeature', {
+      featureId: 'f1',
+      layerId: 'layer-abc',
+      idProperty: 'objectId'
+    })
+
+    emit.mockClear()
+
+    // Test missing optional params
+    unselectFeature({ services }, { featureId: 'f2' })
+
+    expect(emit).toHaveBeenCalledTimes(1)
+    expect(emit).toHaveBeenCalledWith('interact:unselectFeature', {
+      featureId: 'f2',
+      layerId: undefined,
+      idProperty: undefined
+    })
+  })
+})

package/plugins/interact/src/defaults.js

@@ -1,6 +1,8 @@
 export const DEFAULTS = {
+  tolerance: 10, // Used for cross hair and click events
   interactionMode: 'marker',
   multiSelect: false,
+  contiguous: false,
   markerColor: 'rgba(212,53,28,1)',
   selectedStroke: 'rgba(212,53,28,1)',
   selectedFill: 'rgba(255, 0, 0, 0.1)',

package/plugins/interact/src/events.js

@@ -1,3 +1,16 @@
+// Helper for feature toggling logic
+const createFeatureHandler = (mapState, pluginState) => (args, addToExisting) => {
+  mapState.markers.remove('location')
+  pluginState.dispatch({
+    type: 'TOGGLE_SELECTED_FEATURES',
+    payload: {
+      multiSelect: pluginState.multiSelect,
+      addToExisting,
+      ...args
+    }
+  })
+}
+
 export function attachEvents ({
   appState,
   mapState,
@@ -8,41 +21,24 @@ export function attachEvents ({
   handleInteraction,
   closeApp
 }) {
-  const {
-    selectDone,
-    selectAtTarget,
-    selectCancel
-  } = buttonConfig
-
+  const { selectDone, selectAtTarget, selectCancel } = buttonConfig
   const { viewportRef } = appState.layoutRefs
 
+  // Keyboard Logic
   let enterOnViewport = false
-  const handleKeydown = (e) => {
-    enterOnViewport = e.key === 'Enter' && viewportRef.current === e.target
-  }
-  document.addEventListener('keydown', handleKeydown)
-
+  const handleKeydown = (e) => { enterOnViewport = e.key === 'Enter' && viewportRef.current === e.target }
   const handleKeyup = (e) => {
-    if (e.key !== 'Enter' || !enterOnViewport) {
-      return
+    if (e.key === 'Enter' && enterOnViewport) {
+      e.preventDefault()
+      handleSelectAtTarget()
     }
-    e.preventDefault()
-    handleSelectAtTarget()
   }
-  document.addEventListener('keyup', handleKeyup)
 
-  // Allow tapping on touch devices as well as accurate placement
-  const handleMapClick = (e) => {
-    handleInteraction(e)
-  }
-  eventBus.on(events.MAP_CLICK, handleMapClick)
+  // Interaction Handlers
+  const handleMapClick = (e) => handleInteraction(e)
+  const handleSelectAtTarget = () => handleInteraction(mapState.crossHair.getDetail())
 
-  const handleSelectAtTarget = () => {
-    handleInteraction(mapState.crossHair.getDetail())
-  }
-  selectAtTarget.onClick = handleSelectAtTarget
-  
-  const handleSelectDone = (e) => {
+  const handleSelectDone = () => {
     const marker = mapState.markers.getMarker('location')
     const { coords } = marker || {}
     const { selectionBounds, selectedFeatures } = pluginState
@@ -57,43 +53,32 @@ export function attachEvents ({
       ...(!coords && selectionBounds && { selectionBounds })
     })
 
-    if (!(pluginState.closeOnAction ?? true)) {
-      return
+    if (pluginState.closeOnAction ?? true) {
+      closeApp()
     }
-
-    closeApp()
   }
-  selectDone.onClick = handleSelectDone
 
   const handleSelectCancel = () => {
     eventBus.emit('interact:cancel')
-
-    if (!(pluginState.closeOnAction ?? true)) {
-      return
+    if (pluginState.closeOnAction ?? true) {
+      closeApp()
     }
-
-    closeApp()
   }
-  selectCancel.onClick = handleSelectCancel
 
-  const handleToggleFeature = (args, addToExisting) => {
-    mapState.markers.remove('location')
+  const toggleFeature = createFeatureHandler(mapState, pluginState)
+  const handleSelect = (args) => toggleFeature(args, true)
+  const handleUnselect = (args) => toggleFeature(args, false)
 
-    pluginState.dispatch({
-      type: 'TOGGLE_SELECTED_FEATURES',
-      payload: {
-        multiSelect: pluginState.multiSelect,
-        addToExisting,
-        ...args
-      }
-    })
-  }
-  const handleSelect = (args) => handleToggleFeature(args, true)
-  const handleUnselect = (args) => handleToggleFeature(args, false)
+  // Attach Listeners
+  document.addEventListener('keydown', handleKeydown)
+  document.addEventListener('keyup', handleKeyup)
+  eventBus.on(events.MAP_CLICK, handleMapClick)
   eventBus.on('interact:selectFeature', handleSelect)
   eventBus.on('interact:unselectFeature', handleUnselect)
+  selectAtTarget.onClick = handleSelectAtTarget
+  selectDone.onClick = handleSelectDone
+  selectCancel.onClick = handleSelectCancel
 
-  // Return cleanup function
   return () => {
     selectDone.onClick = null
     selectAtTarget.onClick = null

package/plugins/interact/src/events.test.js

@@ -0,0 +1,186 @@
+import { attachEvents } from './events.js'
+
+describe('attachEvents', () => {
+  let createParams, cleanup
+
+  beforeEach(() => {
+    // factory function to create fresh params for each test
+    createParams = () => ({
+      appState: { layoutRefs: { viewportRef: { current: document.body } }, disabledButtons: new Set() },
+      mapState: {
+        markers: { remove: jest.fn(), getMarker: jest.fn(() => null) },
+        crossHair: { getDetail: jest.fn(() => ({ point: { x: 0, y: 0 }, coords: [0,0] })) }
+      },
+      pluginState: { dispatch: jest.fn(), selectionBounds: null, selectedFeatures: [], closeOnAction: true, multiSelect: false },
+      buttonConfig: { selectDone: {}, selectAtTarget: {}, selectCancel: {} },
+      events: { MAP_CLICK: 'map:click' },
+      eventBus: { on: jest.fn(), off: jest.fn(), emit: jest.fn() },
+      handleInteraction: jest.fn(),
+      closeApp: jest.fn()
+    })
+  })
+
+  afterEach(() => cleanup?.())
+
+  it('keyboard Enter triggers only on viewport', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    const keydown = new KeyboardEvent('keydown', { key: 'Enter' })
+    Object.defineProperty(keydown, 'target', { value: document.body })
+    document.dispatchEvent(keydown)
+
+    const keyup = new KeyboardEvent('keyup', { key: 'Enter' })
+    Object.defineProperty(keyup, 'target', { value: document.body })
+    document.dispatchEvent(keyup)
+
+    expect(params.handleInteraction).toHaveBeenCalled()
+  })
+
+  it('ignores Enter outside viewport or other keys', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+    const input = document.createElement('input')
+
+    // Enter outside viewport
+    let kd = new KeyboardEvent('keydown', { key: 'Enter' })
+    Object.defineProperty(kd, 'target', { value: input })
+    document.dispatchEvent(kd)
+    let ku = new KeyboardEvent('keyup', { key: 'Enter' })
+    Object.defineProperty(ku, 'target', { value: input })
+    document.dispatchEvent(ku)
+
+    // other key
+    kd = new KeyboardEvent('keydown', { key: 'Space' })
+    Object.defineProperty(kd, 'target', { value: document.body })
+    document.dispatchEvent(kd)
+    ku = new KeyboardEvent('keyup', { key: 'Space' })
+    Object.defineProperty(ku, 'target', { value: document.body })
+    document.dispatchEvent(ku)
+
+    expect(params.handleInteraction).not.toHaveBeenCalled()
+  })
+
+  it('map click triggers interaction', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    const handler = params.eventBus.on.mock.calls.find(c => c[0]==='map:click')[1]
+    const clickData = { point:{x:1,y:2}, coords:[3,4] }
+    handler(clickData)
+
+    expect(params.handleInteraction).toHaveBeenCalledWith(clickData)
+  })
+
+  it('selectAtTarget triggers crosshair interaction', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    const crossDetail = { point:{x:1,y:2}, coords:[3,4] }
+    params.mapState.crossHair.getDetail.mockReturnValue(crossDetail)
+
+    params.buttonConfig.selectAtTarget.onClick()
+    expect(params.handleInteraction).toHaveBeenCalledWith(crossDetail)
+  })
+
+  it('selectDone emits correct payload and respects closeOnAction', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    // closeOnAction = true (already covered)
+    params.mapState.markers.getMarker.mockReturnValue({ coords:[1,2] })
+    params.buttonConfig.selectDone.onClick()
+    expect(params.closeApp).toHaveBeenCalled()
+
+    // cover closeOnAction = false
+    params.closeApp.mockClear()
+    params.pluginState.closeOnAction = false
+    params.mapState.markers.getMarker.mockReturnValue({ coords:[3,4] })
+    params.buttonConfig.selectDone.onClick()
+    expect(params.closeApp).not.toHaveBeenCalled()
+  })
+
+  it('selectCancel emits cancel and respects closeOnAction', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    // closeOnAction = true
+    params.buttonConfig.selectCancel.onClick()
+    expect(params.closeApp).toHaveBeenCalled()
+
+    // cover closeOnAction = false
+    cleanup()
+    const params2 = createParams()
+    cleanup = attachEvents(params2)
+    params2.pluginState.closeOnAction = false
+    params2.buttonConfig.selectCancel.onClick()
+    expect(params2.closeApp).not.toHaveBeenCalled()
+  })
+
+  it('does not emit or closeApp if selectDone button is disabled', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    params.appState.disabledButtons.add('selectDone')
+    params.buttonConfig.selectDone.onClick()
+
+    expect(params.eventBus.emit).not.toHaveBeenCalled()
+    expect(params.closeApp).not.toHaveBeenCalled()
+  })
+
+  it('programmatic select/unselect dispatches and removes location', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    const selectHandler = params.eventBus.on.mock.calls.find(c => c[0]==='interact:selectFeature')[1]
+    const unselectHandler = params.eventBus.on.mock.calls.find(c => c[0]==='interact:unselectFeature')[1]
+
+    selectHandler({ featureId:'F1' })
+    unselectHandler({ featureId:'F2' })
+
+    expect(params.pluginState.dispatch).toHaveBeenCalledTimes(2)
+    expect(params.mapState.markers.remove).toHaveBeenCalledTimes(2)
+  })
+
+  it('cleanup removes all handlers', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+    cleanup()
+    Object.values(params.buttonConfig).forEach(btn => expect(btn.onClick).toBeNull())
+  })
+
+  it('selectDone handles emission when no marker/coords exist', () => {
+    const params = createParams()
+    cleanup = attachEvents(params)
+
+    // Ensure marker returns null (no coords)
+    params.mapState.markers.getMarker.mockReturnValue(null)
+    
+    // Set up features and bounds
+    params.pluginState.selectedFeatures = [{ id: 'f1' }]
+    params.pluginState.selectionBounds = { sw: [0, 0], ne: [1, 1] }
+
+    params.buttonConfig.selectDone.onClick()
+
+    expect(params.eventBus.emit).toHaveBeenCalledWith('interact:done', {
+      selectedFeatures: [{ id: 'f1' }],
+      selectionBounds: { sw: [0, 0], ne: [1, 1] }
+    })
+  })
+
+  it('respects default closeOnAction when value is undefined (fallback to true)', () => {
+    const params = createParams()
+    // Explicitly set to undefined to trigger the ?? fallback
+    params.pluginState.closeOnAction = undefined 
+    cleanup = attachEvents(params)
+
+    // Test for selectDone
+    params.buttonConfig.selectDone.onClick()
+    expect(params.closeApp).toHaveBeenCalledTimes(1)
+
+    // Test for selectCancel
+    params.closeApp.mockClear()
+    params.buttonConfig.selectCancel.onClick()
+    expect(params.closeApp).toHaveBeenCalledTimes(1)
+  })
+})

package/plugins/interact/src/hooks/useHighlightSync.js

@@ -32,7 +32,7 @@ export const useHighlightSync = ({
 
   useEffect(() => {
     if (!mapProvider || !selectedFeatures || !stylesMap) {
-      return
+      return undefined // Explicit return to match the cleanup function return below
     }
 
     // Update updateHighlightedFeatures on interaction

package/plugins/interact/src/hooks/useHighlightSync.test.js

@@ -0,0 +1,212 @@
+import { renderHook, act } from '@testing-library/react'
+import { useHighlightSync } from './useHighlightSync.js'
+import { buildStylesMap } from '../utils/buildStylesMap.js'
+
+jest.mock('../utils/buildStylesMap.js', () => ({
+  buildStylesMap: jest.fn(() => ({ layer1: { stroke: 'red', fill: 'blue' } }))
+}))
+
+describe('useHighlightSync', () => {
+  let mockDeps
+  let capturedEventHandler
+
+  const render = (overrides = {}) =>
+    renderHook(() => useHighlightSync({ ...mockDeps, ...overrides }))
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    capturedEventHandler = null
+
+    mockDeps = {
+      mapProvider: {
+        updateHighlightedFeatures: jest.fn(() => ({ sw: [0, 0], ne: [1, 1] }))
+      },
+      mapStyle: { id: 'default-style' },
+      pluginState: {
+        dataLayers: [{ layerId: 'layer1' }]
+      },
+      selectedFeatures: [],
+      dispatch: jest.fn(),
+      events: { MAP_DATA_CHANGE: 'map:datachange' },
+      eventBus: {
+        on: jest.fn((event, handler) => {
+          if (event === 'map:datachange') {
+            capturedEventHandler = handler
+          }
+        }),
+        off: jest.fn()
+      }
+    }
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Highlighting                                                       */
+  /* ------------------------------------------------------------------ */
+
+  it('updates map highlights and dispatches bounds', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    render()
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
+      mockDeps.selectedFeatures,
+      expect.any(Object)
+    )
+
+    expect(mockDeps.dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_SELECTED_BOUNDS',
+      payload: { sw: [0, 0], ne: [1, 1] }
+    })
+  })
+
+  it('dispatches null bounds when provider returns null', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1' }]
+    mockDeps.mapProvider.updateHighlightedFeatures.mockReturnValue(null)
+
+    render()
+
+    expect(mockDeps.dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_SELECTED_BOUNDS',
+      payload: null
+    })
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Styles memoization                                                 */
+  /* ------------------------------------------------------------------ */
+
+  it('rebuilds styles when mapStyle changes', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1' }]
+
+    const { rerender } = renderHook(
+      ({ mapStyle }) => useHighlightSync({ ...mockDeps, mapStyle }),
+      { initialProps: { mapStyle: { id: 'light' } } }
+    )
+
+    buildStylesMap.mockClear()
+
+    rerender({ mapStyle: { id: 'satellite' } })
+
+    expect(buildStylesMap).toHaveBeenCalledWith(
+      expect.anything(),
+      { id: 'satellite' }
+    )
+  })
+
+  it('rebuilds styles when dataLayers change', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1' }]
+
+    const { rerender } = renderHook(
+      ({ dataLayers }) =>
+        useHighlightSync({
+          ...mockDeps,
+          pluginState: { dataLayers }
+        }),
+      { initialProps: { dataLayers: [{ layerId: 'layer1' }] } }
+    )
+
+    buildStylesMap.mockClear()
+
+    rerender({ dataLayers: [{ layerId: 'layer1' }, { layerId: 'layer2' }] })
+
+    expect(buildStylesMap).toHaveBeenCalled()
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Map data change events                                             */
+  /* ------------------------------------------------------------------ */
+
+  it('refreshes highlights on MAP_DATA_CHANGE', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    render()
+
+    mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
+
+    act(() => capturedEventHandler())
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalled()
+  })
+
+  it('unsubscribes on unmount', () => {
+    mockDeps.selectedFeatures = [{ featureId: 'F1', layerId: 'layer1' }]
+
+    const { unmount } = render()
+
+    unmount()
+
+    expect(mockDeps.eventBus.off).toHaveBeenCalledWith(
+      'map:datachange',
+      expect.any(Function)
+    )
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Guards                                                            */
+  /* ------------------------------------------------------------------ */
+
+  it('does nothing when mapProvider is null', () => {
+    mockDeps.mapProvider = null
+    mockDeps.selectedFeatures = [{ featureId: 'F1' }]
+
+    render()
+
+    expect(mockDeps.dispatch).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when selectedFeatures is null', () => {
+    mockDeps.selectedFeatures = null
+
+    render()
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when mapStyle is null', () => {
+    mockDeps.mapStyle = null
+    mockDeps.selectedFeatures = [{ featureId: 'F1' }]
+
+    render()
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).not.toHaveBeenCalled()
+    expect(buildStylesMap).not.toHaveBeenCalled()
+  })
+
+  /* ------------------------------------------------------------------ */
+  /* Selection updates                                                  */
+  /* ------------------------------------------------------------------ */
+
+  it('updates highlights when selection changes', () => {
+    const { rerender } = renderHook(
+      ({ selectedFeatures }) =>
+        useHighlightSync({ ...mockDeps, selectedFeatures }),
+      { initialProps: { selectedFeatures: [{ featureId: 'F1' }] } }
+    )
+
+    mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
+
+    rerender({ selectedFeatures: [{ featureId: 'F1' }, { featureId: 'F2' }] })
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
+      [{ featureId: 'F1' }, { featureId: 'F2' }],
+      expect.anything()
+    )
+  })
+
+  it('clears highlights when selection becomes empty', () => {
+    const { rerender } = renderHook(
+      ({ selectedFeatures }) =>
+        useHighlightSync({ ...mockDeps, selectedFeatures }),
+      { initialProps: { selectedFeatures: [{ featureId: 'F1' }] } }
+    )
+
+    mockDeps.mapProvider.updateHighlightedFeatures.mockClear()
+
+    rerender({ selectedFeatures: [] })
+
+    expect(mockDeps.mapProvider.updateHighlightedFeatures).toHaveBeenCalledWith(
+      [],
+      expect.anything()
+    )
+  })
+})