@defra/interactive-map 0.0.9-alpha → 0.0.10-alpha

package/plugins/search/src/events/suggestionHandlers.test.js

@@ -0,0 +1,166 @@
+/**
+ * @jest-environment jsdom
+ */
+import { createSuggestionHandlers } from './suggestionHandlers.js'
+import { updateMap } from '../utils/updateMap.js'
+
+jest.mock('../utils/updateMap.js')
+
+describe('createSuggestionHandlers', () => {
+  let dispatch
+  let services
+  let handlers
+
+  beforeEach(() => {
+    dispatch = jest.fn()
+
+    services = {
+      eventBus: { emit: jest.fn() },
+      announce: jest.fn()
+    }
+
+    handlers = createSuggestionHandlers({
+      dispatch,
+      services,
+      mapProvider: 'map',
+      markers: 'markers',
+      showMarker: true,
+      markerColor: 'blue'
+    })
+
+    jest.clearAllMocks()
+  })
+
+  // ---------- Suggestion click ----------
+
+  test('handleSuggestionClick (desktop)', () => {
+    const suggestion = { text: 'Paris', bounds: 'b', point: 'p' }
+
+    handlers.handleSuggestionClick(suggestion, { breakpoint: 'desktop' })
+
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_VALUE', payload: 'Paris' })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'HIDE_SUGGESTIONS' })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SELECTED', payload: -1 })
+    expect(updateMap).toHaveBeenCalledWith(expect.objectContaining({ bounds: 'b', point: 'p' }))
+    expect(services.eventBus.emit).toHaveBeenCalledWith(
+      'search:match',
+      expect.objectContaining({ query: 'Paris' })
+    )
+  })
+
+  test('handleSuggestionClick (mobile closes search)', () => {
+    const suggestion = { text: 'Berlin', bounds: 'b', point: 'p' }
+
+    handlers.handleSuggestionClick(suggestion, { breakpoint: 'mobile' })
+
+    expect(dispatch).toHaveBeenCalledWith({ type: 'TOGGLE_EXPANDED', payload: false })
+    expect(services.eventBus.emit).toHaveBeenCalledWith('search:close')
+  })
+
+  // ---------- ArrowDown ----------
+
+  test('ArrowDown selects next suggestion', () => {
+    const e = { key: 'ArrowDown', preventDefault: jest.fn() }
+
+    handlers.handleInputKeyDown(e, {
+      suggestions: [{ text: 'A' }, { text: 'B' }],
+      selectedIndex: 0
+    })
+
+    expect(e.preventDefault).toHaveBeenCalled()
+    expect(services.announce).toHaveBeenCalledWith('B. 2 of 2 is highlighted')
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SELECTED', payload: 1 })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_KEYBOARD_FOCUS_WITHIN', payload: false })
+  })
+
+  test('ArrowDown does nothing when no suggestions', () => {
+    const e = { key: 'ArrowDown', preventDefault: jest.fn() }
+
+    handlers.handleInputKeyDown(e, { suggestions: [], selectedIndex: 0 })
+
+    expect(e.preventDefault).not.toHaveBeenCalled()
+    expect(dispatch).not.toHaveBeenCalled()
+    expect(services.announce).not.toHaveBeenCalled()
+  })
+
+  test('ArrowDown does nothing when at last suggestion', () => {
+    const e = { key: 'ArrowDown', preventDefault: jest.fn() }
+
+    handlers.handleInputKeyDown(e, {
+      suggestions: [{ text: 'A' }, { text: 'B' }],
+      selectedIndex: 1 // last index
+    })
+
+    expect(e.preventDefault).toHaveBeenCalled()
+    expect(dispatch).not.toHaveBeenCalled()
+    expect(services.announce).not.toHaveBeenCalled()
+  })
+
+  // ---------- ArrowUp ----------
+
+  test('ArrowUp moves selection up and resets to -1', () => {
+    const e = { key: 'ArrowUp', preventDefault: jest.fn() }
+
+    handlers.handleInputKeyDown(e, {
+      suggestions: [{ text: 'A' }, { text: 'B' }],
+      selectedIndex: 0
+    })
+
+    expect(e.preventDefault).toHaveBeenCalled()
+    expect(services.announce).toHaveBeenCalledWith('2 suggestions available')
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SELECTED', payload: -1 })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_KEYBOARD_FOCUS_WITHIN', payload: true })
+  })
+
+  test('ArrowUp moves selection up normally when selectedIndex > 0', () => {
+    const e = { key: 'ArrowUp', preventDefault: jest.fn() }
+
+    handlers.handleInputKeyDown(e, {
+      suggestions: [{ text: 'A' }, { text: 'B' }, { text: 'C' }],
+      selectedIndex: 2
+    })
+
+    expect(e.preventDefault).toHaveBeenCalled()
+    expect(services.announce).toHaveBeenCalledWith('B. 2 of 3 is highlighted')
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SELECTED', payload: 1 })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_KEYBOARD_FOCUS_WITHIN', payload: false })
+  })
+
+  test('ArrowUp does nothing when no suggestions', () => {
+    const e = { key: 'ArrowUp', preventDefault: jest.fn() }
+
+    handlers.handleInputKeyDown(e, { suggestions: [], selectedIndex: 0 })
+
+    expect(e.preventDefault).not.toHaveBeenCalled()
+    expect(dispatch).not.toHaveBeenCalled()
+    expect(services.announce).not.toHaveBeenCalled()
+  })
+
+  // ---------- Escape & default ----------
+
+  test('Escape hides suggestions and clears selection', () => {
+    const e = { key: 'Escape', preventDefault: jest.fn() }
+
+    handlers.handleInputKeyDown(e, {
+      suggestions: [{ text: 'A' }],
+      selectedIndex: 0
+    })
+
+    expect(e.preventDefault).toHaveBeenCalled()
+    expect(dispatch).toHaveBeenCalledWith({ type: 'HIDE_SUGGESTIONS' })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SELECTED', payload: -1 })
+  })
+
+  test('Other keys do nothing', () => {
+    const e = { key: 'Enter', preventDefault: jest.fn() }
+
+    handlers.handleInputKeyDown(e, {
+      suggestions: [{ text: 'A' }],
+      selectedIndex: 0
+    })
+
+    expect(e.preventDefault).not.toHaveBeenCalled()
+    expect(dispatch).not.toHaveBeenCalled()
+    expect(services.announce).not.toHaveBeenCalled()
+  })
+})

package/plugins/search/src/index.test.js

@@ -0,0 +1,47 @@
+// /plugins/search/index.test.js
+
+// Mock SCSS import so Jest can run without parsing errors
+jest.mock('./search.scss', () => {})
+
+import createPlugin from './index'
+
+describe('createPlugin', () => {
+  beforeEach(() => {
+    jest.resetModules()
+  })
+
+  it('returns default plugin structure with showMarker and id', async () => {
+    const plugin = createPlugin()
+    expect(plugin.showMarker).toBe(true)
+    expect(plugin.id).toBe('search')
+    expect(typeof plugin.load).toBe('function')
+  })
+
+  it('overrides manifest when isExpanded is true', () => {
+    const plugin = createPlugin({ isExpanded: true })
+    expect(plugin.isExpanded).toBe(true)
+    expect(plugin.manifest).toEqual({
+      controls: [{ id: 'search', mobile: { slot: 'banner' } }]
+    })
+  })
+
+  it('spreads custom options correctly', () => {
+    const custom = { foo: 'bar', isExpanded: false }
+    const plugin = createPlugin(custom)
+    expect(plugin.foo).toBe('bar')
+    expect(plugin.showMarker).toBe(true)
+    expect(plugin.id).toBe('search')
+  })
+
+  it('load function dynamically imports the manifest and returns it', async () => {
+    // Mock the dynamic import for './manifest.js'
+    const manifestMock = { data: 'test-manifest' }
+    jest.mock('./manifest.js', () => ({
+      manifest: manifestMock
+    }), { virtual: true })
+
+    const plugin = createPlugin()
+    const result = await plugin.load()
+    expect(result).toEqual(manifestMock)
+  })
+})

package/plugins/search/src/reducer.test.js

@@ -0,0 +1,80 @@
+// /plugins/search/reducer.test.js
+
+import { initialState, actions } from './reducer'
+
+describe('search state actions', () => {
+  it('TOGGLE_EXPANDED sets isExpanded and areSuggestionsVisible', () => {
+    const state = { ...initialState }
+    const newState = actions.TOGGLE_EXPANDED(state, true)
+    expect(newState.isExpanded).toBe(true)
+    expect(newState.areSuggestionsVisible).toBe(true)
+
+    const collapsed = actions.TOGGLE_EXPANDED(state, false)
+    expect(collapsed.isExpanded).toBe(false)
+    expect(collapsed.areSuggestionsVisible).toBe(false)
+  })
+
+  it('SET_KEYBOARD_FOCUS_WITHIN sets focus and shows suggestions', () => {
+    const state = { ...initialState }
+    const newState = actions.SET_KEYBOARD_FOCUS_WITHIN(state, true)
+    expect(newState.hasKeyboardFocusWithin).toBe(true)
+    expect(newState.areSuggestionsVisible).toBe(true)
+
+    const removedFocus = actions.SET_KEYBOARD_FOCUS_WITHIN(state, false)
+    expect(removedFocus.hasKeyboardFocusWithin).toBe(false)
+    expect(removedFocus.areSuggestionsVisible).toBe(true) // always true
+  })
+
+  it('INPUT_BLUR removes focus and updates areSuggestionsVisible correctly', () => {
+    const state = { ...initialState, areSuggestionsVisible: true, hasKeyboardFocusWithin: true }
+
+    // Non-keyboard blur
+    const newStateMouse = actions.INPUT_BLUR(state, 'mouse')
+    expect(newStateMouse.hasKeyboardFocusWithin).toBe(false)
+    expect(newStateMouse.areSuggestionsVisible).toBe(true) // still true
+    expect(newStateMouse.selectedIndex).toBe(-1)
+
+    // Keyboard blur hides suggestions
+    const newStateKeyboard = actions.INPUT_BLUR(state, 'keyboard')
+    expect(newStateKeyboard.hasKeyboardFocusWithin).toBe(false)
+    expect(newStateKeyboard.areSuggestionsVisible).toBe(false) // now false
+    expect(newStateKeyboard.selectedIndex).toBe(-1)
+  })
+
+  it('SET_VALUE updates the input value', () => {
+    const state = { ...initialState }
+    const newState = actions.SET_VALUE(state, 'test')
+    expect(newState.value).toBe('test')
+  })
+
+  it('UPDATE_SUGGESTIONS updates the suggestions array', () => {
+    const state = { ...initialState }
+    const suggestions = [{ id: 1 }, { id: 2 }]
+    const newState = actions.UPDATE_SUGGESTIONS(state, suggestions)
+    expect(newState.suggestions).toEqual(suggestions)
+  })
+
+  it('SHOW_SUGGESTIONS sets areSuggestionsVisible to true', () => {
+    const state = { ...initialState, areSuggestionsVisible: false }
+    const newState = actions.SHOW_SUGGESTIONS(state)
+    expect(newState.areSuggestionsVisible).toBe(true)
+  })
+
+  it('HIDE_SUGGESTIONS sets areSuggestionsVisible to false', () => {
+    const state = { ...initialState, areSuggestionsVisible: true }
+    const newState = actions.HIDE_SUGGESTIONS(state)
+    expect(newState.areSuggestionsVisible).toBe(false)
+  })
+
+  it('SET_SELECTED updates selectedIndex and visibility', () => {
+    const state = { ...initialState, areSuggestionsVisible: false }
+    
+    const selected = actions.SET_SELECTED(state, 1)
+    expect(selected.selectedIndex).toBe(1)
+    expect(selected.areSuggestionsVisible).toBe(true)
+
+    const deselected = actions.SET_SELECTED(state, -1)
+    expect(deselected.selectedIndex).toBe(-1)
+    expect(deselected.areSuggestionsVisible).toBe(false)
+  })
+})

package/plugins/search/src/utils/parseOsNamesResults.js

@@ -105,5 +105,6 @@ const parseOsNamesResults = (json, query, crs) => {
 }
 
 export {
-  parseOsNamesResults
+  parseOsNamesResults,
+  point
 }

package/plugins/search/src/utils/parseOsNamesResults.test.js

@@ -0,0 +1,140 @@
+/**
+ * @jest-environment jsdom
+ */
+import { parseOsNamesResults, point } from './parseOsNamesResults.js'
+import OsGridRef from 'geodesy/osgridref.js'
+
+// Mock OsGridRef so we can control toLatLon outputs
+jest.mock('geodesy/osgridref.js', () => {
+  return jest.fn().mockImplementation((x, y) => ({
+    x,
+    y,
+    toLatLon: () => ({ lat: y / 1e5, lon: x / 1e5 }) // deterministic lat/lon
+  }))
+})
+
+describe('osNamesUtils', () => {
+  const sampleEntry = {
+    GAZETTEER_ENTRY: {
+      ID: 1,
+      NAME1: 'London',
+      COUNTY_UNITARY: 'Greater London',
+      DISTRICT_BOROUGH: 'Camden',
+      POSTCODE_DISTRICT: 'WC1',
+      LOCAL_TYPE: 'Town',
+      MBR_XMIN: 1000,
+      MBR_YMIN: 2000,
+      MBR_XMAX: 3000,
+      MBR_YMAX: 4000,
+      GEOMETRY_X: 1500,
+      GEOMETRY_Y: 2500
+    }
+  }
+
+  test('returns empty array for null/invalid/error results', () => {
+    expect(parseOsNamesResults(null, 'x', 'EPSG:27700')).toEqual([])
+    expect(parseOsNamesResults({ error: true }, 'x', 'EPSG:27700')).toEqual([])
+    expect(parseOsNamesResults({ header: { totalresults: 0 } }, 'x', 'EPSG:27700')).toEqual([])
+  })
+
+  test('removes tenuous results when query does not match', () => {
+    const results = [
+      { GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY, NAME1: 'Bristol', ID: 2 } }
+    ]
+    const json = { results }
+    const output = parseOsNamesResults(json, 'London', 'EPSG:27700')
+    expect(output).toHaveLength(0)
+  })
+
+  test('removes duplicate IDs', () => {
+    const dup = { ...sampleEntry, GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY } }
+    const json = { results: [sampleEntry, dup] }
+    const output = parseOsNamesResults(json, 'London', 'EPSG:27700')
+    expect(output).toHaveLength(1)
+  })
+
+  test('limits results to MAX_RESULTS', () => {
+    const manyResults = Array.from({ length: 10 }, (_, i) => ({
+      GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY, ID: i }
+    }))
+    const json = { results: manyResults }
+    const output = parseOsNamesResults(json, 'London', 'EPSG:27700')
+    expect(output).toHaveLength(8)
+  })
+
+  test('bounds returns raw OSGB values for EPSG:27700', () => {
+    const json = { results: [sampleEntry] }
+    const output = parseOsNamesResults(json, 'London', 'EPSG:27700')
+    expect(output[0].bounds).toEqual([
+      sampleEntry.GAZETTEER_ENTRY.MBR_XMIN,
+      sampleEntry.GAZETTEER_ENTRY.MBR_YMIN,
+      sampleEntry.GAZETTEER_ENTRY.MBR_XMAX,
+      sampleEntry.GAZETTEER_ENTRY.MBR_YMAX
+    ])
+    expect(output[0].point).toEqual([
+      sampleEntry.GAZETTEER_ENTRY.GEOMETRY_X,
+      sampleEntry.GAZETTEER_ENTRY.GEOMETRY_Y
+    ])
+  })
+
+  test('bounds converts to WGS84 for EPSG:4326', () => {
+    const json = { results: [sampleEntry] }
+    const output = parseOsNamesResults(json, 'London', 'EPSG:4326')
+    const expectedBounds = [
+      Math.round(1000 / 1e5 * 1e6) / 1e6,
+      Math.round(2000 / 1e5 * 1e6) / 1e6,
+      Math.round(3000 / 1e5 * 1e6) / 1e6,
+      Math.round(4000 / 1e5 * 1e6) / 1e6
+    ]
+    expect(output[0].bounds).toEqual(expectedBounds)
+    const expectedPoint = [
+      Math.round(1500 / 1e5 * 1e6) / 1e6,
+      Math.round(2500 / 1e5 * 1e6) / 1e6
+    ]
+    expect(output[0].point).toEqual(expectedPoint)
+  })
+
+  test('label generates marked text', () => {
+    const json = { results: [sampleEntry] }
+    const output = parseOsNamesResults(json, 'London', 'EPSG:27700')
+    expect(output[0].text).toContain('London')
+    expect(output[0].marked).toContain('<mark>')
+  })
+
+  test('handles MBR_XMIN null by using buffered GEOMETRY_X/Y', () => {
+    const entry = {
+      GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY, MBR_XMIN: null, MBR_YMIN: null }
+    }
+    const json = { results: [entry] }
+    const output = parseOsNamesResults(json, 'London', 'EPSG:27700')
+    expect(output[0].bounds).toEqual([
+      entry.GAZETTEER_ENTRY.GEOMETRY_X - 500,
+      entry.GAZETTEER_ENTRY.GEOMETRY_Y - 500,
+      entry.GAZETTEER_ENTRY.GEOMETRY_X + 500,
+      entry.GAZETTEER_ENTRY.GEOMETRY_Y + 500
+    ])
+  })
+
+  test('label falls back to DISTRICT_BOROUGH when COUNTY_UNITARY is absent', () => {
+    const entry = { GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY, COUNTY_UNITARY: null } }
+    const output = parseOsNamesResults({ results: [entry] }, 'London', 'EPSG:27700')
+    expect(output[0].text).toContain(sampleEntry.GAZETTEER_ENTRY.DISTRICT_BOROUGH)
+  })
+
+  test('label omits qualifier for City type', () => {
+    const entry = { GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY, LOCAL_TYPE: 'City' } }
+    const output = parseOsNamesResults({ results: [entry] }, 'London', 'EPSG:27700')
+    expect(output[0].text).toBe('London')
+  })
+
+  test('throws error for unsupported CRS', () => {
+    const entry = { GAZETTEER_ENTRY: { ...sampleEntry.GAZETTEER_ENTRY } }
+    const json = { results: [entry] }
+    expect(() => parseOsNamesResults(json, 'London', 'EPSG:9999')).toThrow('Unsupported CRS')
+  })
+
+  test('point function throws error for unsupported CRS', () => {
+    const coords = { GEOMETRY_X: 1500, GEOMETRY_Y: 2500 }
+    expect(() => point('EPSG:9999', coords)).toThrow('Unsupported CRS: EPSG:9999')
+  })
+})

package/plugins/search/src/utils/updateMap.test.js

@@ -0,0 +1,52 @@
+// src/plugins/search/utils/updateMap.test.js
+
+import { updateMap } from './updateMap.js'
+
+describe('updateMap', () => {
+  let mapProvider
+  let markers
+  const bounds = { north: 1, south: 0 }
+  const point = { lat: 10, lng: 20 }
+
+  beforeEach(() => {
+    mapProvider = {
+      fitToBounds: jest.fn(),
+    }
+
+    markers = {
+      add: jest.fn(),
+    }
+  })
+
+  it('fits the map to bounds and adds a marker when showMarker is true', () => {
+    updateMap({
+      mapProvider,
+      bounds,
+      point,
+      markers,
+      showMarker: true,
+      markerColor: 'red',
+    })
+
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(bounds)
+    expect(markers.add).toHaveBeenCalledWith(
+      'search',
+      point,
+      { color: 'red' }
+    )
+  })
+
+  it('fits the map to bounds and does not add a marker when showMarker is false', () => {
+    updateMap({
+      mapProvider,
+      bounds,
+      point,
+      markers,
+      showMarker: false,
+      markerColor: 'blue',
+    })
+
+    expect(mapProvider.fitToBounds).toHaveBeenCalledWith(bounds)
+    expect(markers.add).not.toHaveBeenCalled()
+  })
+})