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

package/plugins/search/src/components/OpenButton/OpenButton.test.jsx

@@ -0,0 +1,47 @@
+// src/plugins/search/OpenButton.test.jsx
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { OpenButton } from './OpenButton'
+
+describe('OpenButton', () => {
+  const baseProps = {
+    id: 'test',
+    isExpanded: false,
+    onClick: jest.fn(),
+    buttonRef: { current: null },
+    searchIcon: null,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders the button with correct ARIA attributes and calls onClick', () => {
+    render(<OpenButton {...baseProps} />)
+    const button = screen.getByRole('button', { name: /open search/i })
+    expect(button).toHaveAttribute('aria-controls', 'test-search-form')
+    fireEvent.click(button)
+    expect(baseProps.onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('applies display:none when isExpanded is true', () => {
+    render(<OpenButton {...baseProps} isExpanded />)
+    const button = screen.getByLabelText('Open search')
+    expect(button).toHaveStyle({ display: 'none' })
+  })
+
+  it('renders the search icon SVG when searchIcon is provided', () => {
+    const svgContent = '<path d="M1 1L23 23" />'
+    const { container } = render(
+      <OpenButton {...baseProps} searchIcon={svgContent} />
+    )
+    const svg = container.querySelector('svg')
+    expect(svg).toBeTruthy()
+    expect(svg.innerHTML).toContain('M1 1L23 23')
+  })
+
+  it('does not render an SVG when searchIcon is not provided', () => {
+    const { container } = render(<OpenButton {...baseProps} />)
+    expect(container.querySelector('svg')).toBeNull()
+  })
+})

package/plugins/search/src/components/Suggestions/Suggestions.module.scss

@@ -1,4 +1,4 @@
-@use '/src/scss/tools/index' as tools;
+@use '../../../../../src/scss/tools/index' as tools;
 
 // Suggestions
 .im-c-search-suggestions {

package/plugins/search/src/components/Suggestions/Suggestions.test.jsx

@@ -0,0 +1,79 @@
+// src/plugins/search/Suggestions.test.jsx
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Suggestions } from './Suggestions'
+
+describe('Suggestions', () => {
+  const baseProps = {
+    id: 'test',
+    pluginState: {
+      areSuggestionsVisible: true,
+      suggestions: [
+        { id: '1', marked: 'First' },
+        { id: '2', marked: 'Second' },
+      ],
+      selectedIndex: 0,
+    },
+    handleSuggestionClick: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders the listbox with correct attributes', () => {
+    render(<Suggestions {...baseProps} />)
+    const listbox = screen.getByRole('listbox')
+    expect(listbox).toHaveAttribute('id', 'test-search-suggestions')
+    expect(listbox).toHaveAttribute('aria-labelledby', 'test-search')
+    expect(listbox.className).toContain('im-c-search-suggestions')
+  })
+
+  it('hides the listbox when suggestions are not visible', () => {
+    render(
+      <Suggestions
+        {...baseProps}
+        pluginState={{ ...baseProps.pluginState, areSuggestionsVisible: false }}
+      />
+    )
+    const listbox = screen.getByRole('listbox', { hidden: true })
+    expect(listbox).toHaveStyle({ display: 'none' })
+  })
+
+  it('hides the listbox when suggestions array is empty', () => {
+    render(
+      <Suggestions
+        {...baseProps}
+        pluginState={{ ...baseProps.pluginState, suggestions: [] }}
+      />
+    )
+    const listbox = screen.getByRole('listbox', { hidden: true })
+    expect(listbox).toHaveStyle({ display: 'none' })
+  })
+
+  it('renders all suggestion items with correct ARIA attributes', () => {
+    render(<Suggestions {...baseProps} />)
+    const items = screen.getAllByRole('option')
+    expect(items).toHaveLength(2)
+
+    items.forEach((item, i) => {
+      expect(item).toHaveAttribute('id', `test-search-suggestion-${i}`)
+      expect(item).toHaveClass('im-c-search-suggestions__item')
+      expect(item).toHaveAttribute('aria-setsize', '2')
+      expect(item).toHaveAttribute('aria-posinset', `${i + 1}`)
+    })
+
+    // First item should be selected
+    expect(items[0]).toHaveAttribute('aria-selected', 'true')
+    expect(items[1]).toHaveAttribute('aria-selected', 'false')
+  })
+
+  it('calls handleSuggestionClick when a suggestion is clicked', () => {
+    render(<Suggestions {...baseProps} />)
+    const items = screen.getAllByRole('option')
+    fireEvent.click(items[1])
+    expect(baseProps.handleSuggestionClick).toHaveBeenCalledWith(
+      baseProps.pluginState.suggestions[1]
+    )
+  })
+})

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

@@ -0,0 +1,46 @@
+// src/plugins/search/datasets.test.js
+
+import { createDatasets } from './datasets'
+import * as parseModule from './utils/parseOsNamesResults.js'
+
+describe('createDatasets', () => {
+  const osNamesURL = 'https://example.com/osnames'
+  const crs = 'EPSG:4326'
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('returns default dataset with correct properties', () => {
+    const datasets = createDatasets({ osNamesURL, crs })
+    expect(datasets).toHaveLength(1)
+    const ds = datasets[0]
+
+    expect(ds.name).toBe('osNames')
+    expect(ds.urlTemplate).toBe(osNamesURL)
+    expect(ds.includeRegex).toEqual(/^[a-zA-Z0-9\s,-]+$/)
+    expect(ds.excludeRegex).toEqual(
+      /^(?:[a-z]{2}\s*(?:\d{3}\s*\d{3}|\d{4}\s*\d{4}|\d{5}\s*\d{5})|\d+\s*,?\s*\d+)$/i
+    )
+    expect(typeof ds.parseResults).toBe('function')
+  })
+
+  it('merge custom datasets with default dataset', () => {
+    const custom = [{ name: 'custom1', urlTemplate: 'https://custom.com' }]
+    const datasets = createDatasets({ osNamesURL, crs, customDatasets: custom })
+    expect(datasets).toHaveLength(2)
+    expect(datasets[1]).toEqual(custom[0])
+  })
+
+  it('parseResults calls parseOsNamesResults with correct arguments', () => {
+    const parseMock = jest.spyOn(parseModule, 'parseOsNamesResults').mockReturnValue('parsed')
+    const datasets = createDatasets({ osNamesURL, crs })
+    const json = { some: 'data' }
+    const query = 'test query'
+
+    const result = datasets[0].parseResults(json, query)
+    expect(parseMock).toHaveBeenCalledWith(json, query, crs)
+    expect(result).toBe('parsed')
+    parseMock.mockRestore()
+  })
+})

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)
+  })
+})