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

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

@@ -0,0 +1,212 @@
+/**
+ * @jest-environment jsdom
+ */
+import { fetchSuggestions, sanitiseQuery } from './fetchSuggestions.js'
+
+describe('fetchSuggestions', () => {
+  const dispatch = jest.fn()
+
+  beforeEach(() => {
+    dispatch.mockClear()
+    global.fetch = jest.fn()
+    jest.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  test('sanitiseQuery strips invalid chars and trims', () => {
+    expect(sanitiseQuery('  he!!llo@ ')).toBe('hello')
+  })
+
+  test('fetches results, applies parsing, and dispatches', async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({ items: ['a', 'b'] })
+    })
+
+    const datasets = [
+      {
+        urlTemplate: '/api?q={query}',
+        parseResults: (json) => json.items
+      }
+    ]
+
+    const result = await fetchSuggestions('test', datasets, dispatch)
+
+    expect(fetch).toHaveBeenCalledWith('/api?q=test', { method: 'GET' })
+    expect(result.results).toEqual(['a', 'b'])
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_SUGGESTIONS',
+      payload: ['a', 'b']
+    })
+  })
+
+  test('respects includeRegex and excludeRegex', async () => {
+    const datasets = [
+      {
+        includeRegex: /^ok/,
+        excludeRegex: /bad/,
+        urlTemplate: '/x?q={query}',
+        parseResults: () => ['x']
+      }
+    ]
+
+    const result = await fetchSuggestions('bad', datasets, dispatch)
+
+    expect(fetch).not.toHaveBeenCalled()
+    expect(result.results).toEqual([])
+  })
+
+  test('uses buildRequest when provided', async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({})
+    })
+
+    const datasets = [
+      {
+        buildRequest: (query) => ({
+          url: `/custom/${query}`,
+          options: { method: 'POST' }
+        }),
+        parseResults: () => ['y']
+      }
+    ]
+
+    const result = await fetchSuggestions('abc', datasets, dispatch)
+
+    expect(fetch).toHaveBeenCalledWith('/custom/abc', { method: 'POST' })
+    expect(result.results).toEqual(['y'])
+  })
+
+  test('uses transformRequest when provided', async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({})
+    })
+
+    const transformRequest = (req) => ({
+      ...req,
+      options: { method: 'PUT' }
+    })
+
+    const datasets = [
+      {
+        urlTemplate: '/t?q={query}',
+        parseResults: () => ['z']
+      }
+    ]
+
+    await fetchSuggestions('x', datasets, dispatch, transformRequest)
+
+    expect(fetch).toHaveBeenCalledWith('/t?q=x', { method: 'PUT' })
+  })
+
+  test('handles fetch HTTP error', async () => {
+    global.fetch.mockResolvedValueOnce({ ok: false, status: 500 })
+
+    const datasets = [
+      {
+        label: 'test-ds',
+        urlTemplate: '/fail?q={query}',
+        parseResults: () => ['nope']
+      }
+    ]
+
+    const result = await fetchSuggestions('err', datasets, dispatch)
+
+    expect(result.results).toEqual([])
+    expect(console.error).toHaveBeenCalled()
+  })
+
+  test('uses fallback dataset label on fetch HTTP error', async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: false,
+      status: 404
+    })
+
+    const datasets = [
+      {
+        // no label on purpose
+        urlTemplate: '/missing?q={query}',
+        parseResults: () => []
+      }
+    ]
+
+    await fetchSuggestions('oops', datasets, dispatch)
+
+    expect(console.error).toHaveBeenCalledWith(
+      'Fetch error for dataset: 404'
+    )
+  })
+
+  test('handles network error', async () => {
+    global.fetch.mockRejectedValueOnce(new Error('network'))
+
+    const datasets = [
+      {
+        urlTemplate: '/net?q={query}',
+        parseResults: () => ['nope']
+      }
+    ]
+
+    const result = await fetchSuggestions('err', datasets, dispatch)
+
+    expect(result.results).toEqual([])
+    expect(console.error).toHaveBeenCalled()
+  })
+
+  test('stops processing when exclusive dataset returns results', async () => {
+    global.fetch
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({})
+      })
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({})
+      })
+
+    const datasets = [
+      {
+        exclusive: true,
+        urlTemplate: '/first?q={query}',
+        parseResults: () => ['first']
+      },
+      {
+        urlTemplate: '/second?q={query}',
+        parseResults: () => ['second']
+      }
+    ]
+
+    const result = await fetchSuggestions('go', datasets, dispatch)
+
+    expect(result.results).toEqual(['first'])
+    expect(fetch).toHaveBeenCalledTimes(1)
+  })
+
+  test('buildRequest can call default request builder', async () => {
+    global.fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({})
+    })
+
+    const datasets = [
+      {
+        buildRequest: (query, getDefault) => {
+          // 👇 THIS is the missing function call
+          return getDefault()
+        },
+        urlTemplate: '/default?q={query}',
+        parseResults: () => ['ok']
+      }
+    ]
+
+    const result = await fetchSuggestions('hi', datasets, dispatch)
+
+    expect(fetch).toHaveBeenCalledWith('/default?q=hi', { method: 'GET' })
+    expect(result.results).toEqual(['ok'])
+  })
+})

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

@@ -0,0 +1,232 @@
+/**
+ * @jest-environment jsdom
+ */
+import { createFormHandlers } from './formHandlers.js'
+import { fetchSuggestions } from './fetchSuggestions.js'
+import { updateMap } from '../utils/updateMap.js'
+import { DEFAULTS } from '../defaults.js'
+
+jest.mock('./fetchSuggestions.js')
+jest.mock('../utils/updateMap.js')
+
+describe('createFormHandlers', () => {
+  let dispatch
+  let services
+  let viewportRef
+  let markers
+  let handlers
+
+  beforeEach(() => {
+    dispatch = jest.fn()
+
+    services = {
+      eventBus: { emit: jest.fn() }
+    }
+
+    viewportRef = {
+      current: { focus: jest.fn() }
+    }
+
+    markers = {
+      remove: jest.fn()
+    }
+
+    handlers = createFormHandlers({
+      dispatch,
+      services,
+      viewportRef,
+      mapProvider: 'map',
+      markers,
+      datasets: [],
+      transformRequest: jest.fn(),
+      showMarker: true,
+      markerColor: 'red'
+    })
+
+    jest.clearAllMocks()
+  })
+
+  test('handleOpenClick dispatches and emits', () => {
+    handlers.handleOpenClick()
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_EXPANDED',
+      payload: true
+    })
+    expect(services.eventBus.emit).toHaveBeenCalledWith('search:open')
+  })
+
+  test('handleCloseClick resets state and focuses button', () => {
+    jest.useFakeTimers()
+    const buttonRef = { current: { focus: jest.fn() } }
+
+    handlers.handleCloseClick(null, buttonRef)
+
+    expect(dispatch).toHaveBeenCalledWith({ type: 'TOGGLE_EXPANDED', payload: false })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'UPDATE_SUGGESTIONS', payload: [] })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_VALUE', payload: '' })
+    expect(markers.remove).toHaveBeenCalledWith('search')
+
+    jest.runAllTimers()
+    expect(buttonRef.current.focus).toHaveBeenCalled()
+
+    expect(services.eventBus.emit).toHaveBeenCalledWith('search:clear')
+    expect(services.eventBus.emit).toHaveBeenCalledWith('search:close')
+
+    jest.useRealTimers()
+  })
+
+  test('handleSubmit uses selected suggestion when selectedIndex >= 0', async () => {
+    const suggestion = {
+      text: 'Paris',
+      bounds: 'b',
+      point: 'p'
+    }
+
+    await handlers.handleSubmit(
+      { preventDefault: jest.fn() },
+      {},
+      {
+        suggestions: [suggestion],
+        selectedIndex: 0,
+        value: 'x'
+      }
+    )
+
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_SELECTED', payload: -1 })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'HIDE_SUGGESTIONS' })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_VALUE', payload: 'Paris' })
+
+    expect(updateMap).toHaveBeenCalledWith(
+      expect.objectContaining({ bounds: 'b', point: 'p' })
+    )
+
+    expect(services.eventBus.emit).toHaveBeenCalledWith(
+      'search:match',
+      expect.objectContaining({ query: 'Paris' })
+    )
+  })
+
+  test('handleSubmit returns early for short input', async () => {
+    await handlers.handleSubmit(
+      { preventDefault: jest.fn() },
+      {},
+      {
+        suggestions: [],
+        selectedIndex: -1,
+        value: 'a'.repeat(DEFAULTS.minSearchLength - 1)
+      }
+    )
+
+    expect(fetchSuggestions).not.toHaveBeenCalled()
+    expect(updateMap).not.toHaveBeenCalled()
+  })
+
+  test('handleSubmit fetches suggestions and updates map (keyboard)', async () => {
+    fetchSuggestions.mockResolvedValueOnce({
+      sanitisedValue: 'rome',
+      results: [
+        { text: 'Rome', bounds: 'b', point: 'p' }
+      ]
+    })
+
+    await handlers.handleSubmit(
+      { preventDefault: jest.fn() },
+      { interfaceType: 'keyboard' },
+      {
+        suggestions: [],
+        selectedIndex: -1,
+        value: 'rome'
+      }
+    )
+
+    expect(fetchSuggestions).toHaveBeenCalled()
+    expect(viewportRef.current.focus).toHaveBeenCalled()
+    expect(updateMap).toHaveBeenCalled()
+    expect(services.eventBus.emit).toHaveBeenCalledWith(
+      'search:match',
+      expect.objectContaining({ query: 'rome' })
+    )
+  })
+
+  test('handleSubmit mobile closes search', async () => {
+    fetchSuggestions.mockResolvedValueOnce({
+      sanitisedValue: 'berlin',
+      results: [
+        { text: 'Berlin', bounds: 'b', point: 'p' }
+      ]
+    })
+
+    await handlers.handleSubmit(
+      { preventDefault: jest.fn() },
+      { breakpoint: 'mobile' },
+      {
+        suggestions: [],
+        selectedIndex: -1,
+        value: 'berlin'
+      }
+    )
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_EXPANDED',
+      payload: false
+    })
+    expect(services.eventBus.emit).toHaveBeenCalledWith('search:close')
+  })
+
+  test('handleSubmit does nothing when no suggestions are returned', async () => {
+    fetchSuggestions.mockResolvedValueOnce({
+      sanitisedValue: 'none',
+      results: []
+    })
+
+    await handlers.handleSubmit(
+      { preventDefault: jest.fn() },
+      {},
+      {
+        suggestions: [],
+        selectedIndex: -1,
+        value: 'none'
+      }
+    )
+
+    // Fetch happens
+    expect(fetchSuggestions).toHaveBeenCalled()
+
+    // But nothing downstream runs
+    expect(updateMap).not.toHaveBeenCalled()
+    expect(services.eventBus.emit).not.toHaveBeenCalledWith(
+      'search:match',
+      expect.anything()
+    )
+  })
+
+  test('does not refetch when value matches lastFetchedValue', async () => {
+    fetchSuggestions.mockResolvedValueOnce({
+      sanitisedValue: 'same',
+      results: [{ text: 'Same', bounds: 'b', point: 'p' }]
+    })
+
+    await handlers.handleSubmit(
+      { preventDefault: jest.fn() },
+      {},
+      {
+        suggestions: [],
+        selectedIndex: -1,
+        value: 'same'
+      }
+    )
+
+    await handlers.handleSubmit(
+      { preventDefault: jest.fn() },
+      {},
+      {
+        suggestions: [{ text: 'Same', bounds: 'b', point: 'p' }],
+        selectedIndex: -1,
+        value: 'same'
+      }
+    )
+
+    expect(fetchSuggestions).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -0,0 +1,118 @@
+/**
+ * @jest-environment jsdom
+ */
+import { attachEvents } from './index.js'
+import { fetchSuggestions } from './fetchSuggestions.js'
+import { createFormHandlers } from './formHandlers.js'
+import { createInputHandlers } from './inputHandlers.js'
+import { createSuggestionHandlers } from './suggestionHandlers.js'
+import { debounce } from '../../../../src/utils/debounce.js'
+
+jest.mock('./fetchSuggestions.js')
+jest.mock('./formHandlers.js')
+jest.mock('./inputHandlers.js')
+jest.mock('./suggestionHandlers.js')
+jest.mock('../../../../src/utils/debounce.js')
+
+describe('attachEvents', () => {
+  let dispatch
+  let services
+  let searchContainerRef
+  let args
+
+  beforeEach(() => {
+    dispatch = jest.fn()
+
+    services = {
+      eventBus: { emit: jest.fn() }
+    }
+
+    searchContainerRef = {
+      current: {
+        contains: jest.fn()
+      }
+    }
+
+    // Mock debounce to return the function immediately
+    debounce.mockImplementation(fn => fn)
+
+    createFormHandlers.mockReturnValue({ formHandler: jest.fn() })
+    createInputHandlers.mockReturnValue({ inputHandler: jest.fn() })
+    createSuggestionHandlers.mockReturnValue({ suggestionHandler: jest.fn() })
+
+    args = {
+      dispatch,
+      services,
+      searchContainerRef,
+      datasets: [],
+      transformRequest: jest.fn()
+    }
+
+    jest.clearAllMocks()
+  })
+
+  test('composes handlers from all handler factories', () => {
+    const handlers = attachEvents(args)
+
+    expect(createFormHandlers).toHaveBeenCalledWith(args)
+    expect(createSuggestionHandlers).toHaveBeenCalledWith(args)
+
+    expect(createInputHandlers).toHaveBeenCalledWith(
+      expect.objectContaining({
+        debouncedFetchSuggestions: expect.any(Function)
+      })
+    )
+
+    expect(handlers.formHandler).toBeDefined()
+    expect(handlers.inputHandler).toBeDefined()
+    expect(handlers.suggestionHandler).toBeDefined()
+  })
+
+  test('debouncedFetchSuggestions calls fetchSuggestions with correct args', () => {
+    const handlers = attachEvents(args)
+
+    // grab the debounced function passed to input handlers
+    const { debouncedFetchSuggestions } =
+      createInputHandlers.mock.calls[0][0]
+
+    debouncedFetchSuggestions('query')
+
+    expect(fetchSuggestions).toHaveBeenCalledWith(
+      'query',
+      args.datasets,
+      dispatch,
+      args.transformRequest
+    )
+
+    expect(debounce).toHaveBeenCalledWith(
+      expect.any(Function),
+      350
+    )
+  })
+
+  test('handleOutside does nothing when click is inside container', () => {
+    searchContainerRef.current.contains.mockReturnValue(true)
+
+    const handlers = attachEvents(args)
+
+    handlers.handleOutside({ target: 'inside' })
+
+    expect(dispatch).not.toHaveBeenCalled()
+    expect(services.eventBus.emit).not.toHaveBeenCalled()
+  })
+
+  test('handleOutside collapses search when click is outside container', () => {
+    searchContainerRef.current.contains.mockReturnValue(false)
+
+    const handlers = attachEvents(args)
+
+    handlers.handleOutside({ target: 'outside' })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'TOGGLE_EXPANDED',
+      payload: false
+    })
+
+    expect(services.eventBus.emit).toHaveBeenCalledWith('search:close')
+  })
+})

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

@@ -0,0 +1,104 @@
+/**
+ * @jest-environment jsdom
+ */
+import { createInputHandlers } from './inputHandlers.js'
+import { DEFAULTS } from '../defaults.js'
+
+describe('createInputHandlers', () => {
+  let dispatch
+  let debouncedFetchSuggestions
+  let handlers
+
+  beforeEach(() => {
+    dispatch = jest.fn()
+
+    debouncedFetchSuggestions = jest.fn()
+    debouncedFetchSuggestions.cancel = jest.fn()
+
+    handlers = createInputHandlers({
+      dispatch,
+      debouncedFetchSuggestions
+    })
+  })
+
+  test('handleInputClick shows suggestions', () => {
+    handlers.handleInputClick()
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SHOW_SUGGESTIONS'
+    })
+  })
+
+  test('handleInputFocus sets keyboard focus when interface is keyboard', () => {
+    handlers.handleInputFocus('keyboard')
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_KEYBOARD_FOCUS_WITHIN',
+      payload: true
+    })
+  })
+
+  test('handleInputFocus clears keyboard focus when interface is not keyboard', () => {
+    handlers.handleInputFocus('mouse')
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_KEYBOARD_FOCUS_WITHIN',
+      payload: false
+    })
+  })
+
+  test('handleInputBlur dispatches blur event', () => {
+    handlers.handleInputBlur('keyboard')
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'INPUT_BLUR',
+      payload: 'keyboard'
+    })
+  })
+
+  test('handleInputChange below min length cancels debounce and hides suggestions', () => {
+    const value = 'a'.repeat(DEFAULTS.minSearchLength - 1)
+
+    handlers.handleInputChange({
+      target: { value }
+    })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_VALUE',
+      payload: value
+    })
+
+    expect(debouncedFetchSuggestions.cancel).toHaveBeenCalled()
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'UPDATE_SUGGESTIONS',
+      payload: []
+    })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'HIDE_SUGGESTIONS'
+    })
+
+    expect(debouncedFetchSuggestions).not.toHaveBeenCalled()
+  })
+
+  test('handleInputChange at or above min length shows suggestions and fetches', () => {
+    const value = 'a'.repeat(DEFAULTS.minSearchLength)
+
+    handlers.handleInputChange({
+      target: { value }
+    })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_VALUE',
+      payload: value
+    })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SHOW_SUGGESTIONS'
+    })
+
+    expect(debouncedFetchSuggestions).toHaveBeenCalledWith(value)
+    expect(debouncedFetchSuggestions.cancel).not.toHaveBeenCalled()
+  })
+})