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

package/plugins/search/src/components/Form/Form.jsx

@@ -1,6 +1,20 @@
 // src/plugins/search/Form.jsx
+import { useEffect } from 'react'
 import { Suggestions } from '../Suggestions/Suggestions'
 
+const getResultMessage = (count) => {
+  if (count === 0) {
+    return 'No results available'
+  }
+  const plural = count === 1 ? 'result' : 'results'
+  return `${count} ${plural} available`
+}
+
+const getFormStyle = (pluginConfig, pluginState, appState) => ({
+  display: pluginConfig.expanded || pluginState.isExpanded ? 'flex' : undefined,
+  ...(appState.breakpoint !== 'mobile' && pluginConfig?.width && { width: pluginConfig.width }),
+})
+
 export const Form = ({
   id,
   pluginState,
@@ -8,24 +22,34 @@ export const Form = ({
   appState,
   inputRef,
   events,
+  services,
   children, // For SearchClose
 }) => {
+  const { areSuggestionsVisible, hasFetchedSuggestions, suggestions = [] } = pluginState
+
+  // Announce when a fetch has completed (hasFetchedSuggestions flips to true),
+  // not when the input is merely focused/clicked (SHOW_SUGGESTIONS resets it to false).
+  useEffect(() => {
+    if (!areSuggestionsVisible || !hasFetchedSuggestions) {
+      return
+    }
+    services.announce(getResultMessage(suggestions.length))
+  }, [suggestions, hasFetchedSuggestions])
 
   const classNames = [
     'im-c-search-form',
-    pluginConfig.isExpanded && 'im-c-search-form--default-expanded',
+    pluginConfig.expanded && 'im-c-search-form--default-expanded',
     'im-c-panel'
   ].filter(Boolean).join(' ')
 
+  const showNoResults = areSuggestionsVisible && hasFetchedSuggestions && !suggestions.length
+
   return (
     <form
       id={`${id}-search-form`}
       role="search"
       className={classNames}
-      style={{
-        display: pluginConfig.isExpanded || pluginState.isExpanded ? 'flex' : undefined,
-        ...(appState.breakpoint !== 'mobile' && pluginConfig?.width && { width: pluginConfig.width }),
-      }}
+      style={getFormStyle(pluginConfig, pluginState, appState)}
       aria-controls={`${id}-viewport`}
       onSubmit={(e) => events.handleSubmit(e, appState, pluginState)}
     >
@@ -65,7 +89,11 @@ export const Form = ({
         {/* Close button passed as child */}
         {children}
       </div>
-
+      {showNoResults && (
+        <div className="im-c-search__status" aria-hidden="true">
+          No results available
+        </div>
+      )}
       <Suggestions
         id={id}
         appState={appState}
@@ -74,4 +102,4 @@ export const Form = ({
       />
     </form>
   )
-}
+}

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

@@ -6,6 +6,7 @@
   
   &:before {
     border-radius: 0;
+    box-shadow: none;
   }
 }
 
@@ -15,15 +16,41 @@
   top: 0;
   right: 0;
   height: auto;
+  overflow: visible;
+  filter: var(--search-drop-shadow);
 }
 
 .im-o-app--tablet .im-c-search-form,
 .im-o-app--desktop .im-c-search-form {
+  position: relative;
+  overflow: visible;
   border-radius: var(--button-border-radius);
+  box-shadow: none;
+  filter: var(--search-drop-shadow);
 
   &:before {
     border-radius: var(--button-border-radius);
   }
+
+  .im-c-search-suggestions {
+    position: absolute;
+    top: calc(100% + 1px);
+    left: 0;
+    right: 0;
+    z-index: 1;
+  }
+}
+
+// Status
+.im-c-search__status {
+  position: absolute;
+  top: calc(100% + 1px);
+  left: 0;
+  right: 0;
+  padding: var(--divider-gap) calc(var(--divider-gap) + 2px);
+  background-color: var(--background-color);
+  border-bottom-left-radius: var(--button-border-radius);
+  border-bottom-right-radius: var(--button-border-radius);
 }
 
 // Default expanded

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

@@ -0,0 +1,255 @@
+// src/plugins/search/Form.test.jsx
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Form } from './Form'
+
+// Mock Suggestions to simulate user interactions
+jest.mock('../Suggestions/Suggestions', () => ({
+  Suggestions: ({ handleSuggestionClick, id }) => (
+    <button
+      data-testid="suggestion"
+      onClick={() => handleSuggestionClick('clicked-suggestion')}
+      id={`${id}-search-suggestions`}
+    >
+      Suggestion
+    </button>
+  ),
+}))
+
+describe('Form', () => {
+  const baseProps = {
+    id: 'test',
+    inputRef: { current: null },
+    pluginState: {
+      isExpanded: false,
+      value: '',
+      suggestionsVisible: false,
+      areSuggestionsVisible: false,
+      hasFetchedSuggestions: false,
+      suggestions: [],
+      selectedIndex: -1,
+      hasKeyboardFocusWithin: false,
+    },
+    pluginConfig: {
+      expanded: false,
+      width: '400px',
+    },
+    appState: {
+      breakpoint: 'desktop',
+      interfaceType: 'keyboard',
+    },
+    events: {
+      handleSubmit: jest.fn(),
+      handleInputClick: jest.fn(),
+      handleInputChange: jest.fn(),
+      handleInputFocus: jest.fn(),
+      handleInputBlur: jest.fn(),
+      handleInputKeyDown: jest.fn(),
+      handleSuggestionClick: jest.fn(),
+    },
+    services: {
+      announce: jest.fn(),
+    },
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders without error when suggestions is undefined (uses default empty array)', () => {
+    const { suggestions: _omit, ...pluginStateWithoutSuggestions } = baseProps.pluginState
+    render(<Form {...baseProps} pluginState={pluginStateWithoutSuggestions} />)
+    expect(screen.getByRole('search')).toBeInTheDocument()
+  })
+
+  it('renders the form element with correct role, ID, and base classes', () => {
+    render(<Form {...baseProps} />)
+    const form = screen.getByRole('search')
+    expect(form).toHaveAttribute('id', 'test-search-form')
+    expect(form.className).toContain('im-c-search-form')
+    expect(form.className).toContain('im-c-panel')
+  })
+
+  it('applies expanded styles and width when the pluginConfig is expanded', () => {
+    render(
+      <Form
+        {...baseProps}
+        pluginConfig={{ ...baseProps.pluginConfig, expanded: true }}
+      />
+    )
+    const form = screen.getByRole('search')
+    expect(form).toHaveStyle({ display: 'flex', width: '400px' })
+    expect(form.className).toContain('im-c-search-form--default-expanded')
+  })
+
+  it('calls handleSubmit with the event, appState, and pluginState when form is submitted', () => {
+    render(<Form {...baseProps} />)
+    const form = screen.getByRole('search')
+    fireEvent.submit(form)
+    expect(baseProps.events.handleSubmit).toHaveBeenCalledTimes(1)
+    expect(baseProps.events.handleSubmit.mock.calls[0][1]).toBe(baseProps.appState)
+    expect(baseProps.events.handleSubmit.mock.calls[0][2]).toBe(baseProps.pluginState)
+  })
+
+  it('renders the search input with correct ARIA attributes when suggestions are visible and an item is selected', () => {
+    render(
+      <Form
+        {...baseProps}
+        pluginState={{
+          ...baseProps.pluginState,
+          suggestionsVisible: true,
+          selectedIndex: 2,
+        }}
+      />
+    )
+    const input = screen.getByRole('combobox')
+    expect(input).toHaveAttribute('aria-expanded', 'true')
+    expect(input).toHaveAttribute('aria-activedescendant', 'test-search-suggestion-2')
+    expect(input).toHaveAttribute('aria-controls', 'test-search-suggestions')
+  })
+
+  it('adds keyboard focus class when the input container has focus within', () => {
+    render(
+      <Form
+        {...baseProps}
+        pluginState={{ ...baseProps.pluginState, hasKeyboardFocusWithin: true }}
+      />
+    )
+    const container = screen.getByRole('search').querySelector('.im-c-search__input-container')
+    expect(container.className).toContain('im-c-search__input-container--keyboard-focus-within')
+  })
+
+  it('does not set aria-describedby when the search input has a value', () => {
+    render(
+      <Form
+        {...baseProps}
+        pluginState={{ ...baseProps.pluginState, value: 'something' }}
+      />
+    )
+    const input = screen.getByRole('combobox')
+    expect(input).not.toHaveAttribute('aria-describedby')
+  })
+
+  it('wires input event handlers correctly (click, change, focus, blur, keydown)', () => {
+    render(<Form {...baseProps} />)
+    const input = screen.getByRole('combobox')
+    fireEvent.click(input)
+    fireEvent.change(input, { target: { value: 'abc' } })
+    fireEvent.focus(input)
+    fireEvent.blur(input)
+    fireEvent.keyDown(input, { key: 'ArrowDown' })
+    expect(baseProps.events.handleInputClick).toHaveBeenCalled()
+    expect(baseProps.events.handleInputChange).toHaveBeenCalled()
+    expect(baseProps.events.handleInputFocus).toHaveBeenCalledWith('keyboard')
+    expect(baseProps.events.handleInputBlur).toHaveBeenCalledWith('keyboard')
+    expect(baseProps.events.handleInputKeyDown).toHaveBeenCalled()
+  })
+
+  it('renders children passed into the input container (e.g., CloseButton)', () => {
+    render(
+      <Form {...baseProps}>
+        <div data-testid="close-button" />
+      </Form>
+    )
+    expect(screen.getByTestId('close-button')).toBeInTheDocument()
+  })
+
+  it('renders the Suggestions component', () => {
+    render(<Form {...baseProps} />)
+    expect(screen.getByTestId('suggestion')).toBeInTheDocument()
+  })
+
+  it('calls events.handleSuggestionClick when a suggestion is clicked', () => {
+    render(<Form {...baseProps} />)
+    fireEvent.click(screen.getByTestId('suggestion'))
+    expect(baseProps.events.handleSuggestionClick).toHaveBeenCalledWith(
+      'clicked-suggestion',
+      baseProps.appState
+    )
+  })
+
+  describe('status element and announce', () => {
+    // Helper: pluginState representing a completed fetch (hasFetchedSuggestions: true)
+    const searchedState = { areSuggestionsVisible: true, hasFetchedSuggestions: true }
+
+    it('hides the status element when suggestions are not visible', () => {
+      const { container } = render(<Form {...baseProps} />)
+      expect(container.querySelector('.im-c-search__status')).toBeNull()
+    })
+
+    it('shows the status element when a search returned no results', () => {
+      render(
+        <Form
+          {...baseProps}
+          pluginState={{ ...baseProps.pluginState, ...searchedState, suggestions: [] }}
+        />
+      )
+      expect(screen.getByText('No results available')).toBeInTheDocument()
+    })
+
+    it('hides the status element when there are results', () => {
+      const { container } = render(
+        <Form
+          {...baseProps}
+          pluginState={{ ...baseProps.pluginState, ...searchedState, suggestions: [{ text: 'London' }] }}
+        />
+      )
+      expect(container.querySelector('.im-c-search__status')).toBeNull()
+    })
+
+    it('hides the status element when the fetch has not yet completed', () => {
+      const { container } = render(
+        <Form
+          {...baseProps}
+          pluginState={{ ...baseProps.pluginState, areSuggestionsVisible: true, hasFetchedSuggestions: false, suggestions: [] }}
+        />
+      )
+      expect(container.querySelector('.im-c-search__status')).toBeNull()
+    })
+
+    it('announces "No results available" when a search returned no results', () => {
+      render(
+        <Form
+          {...baseProps}
+          pluginState={{ ...baseProps.pluginState, ...searchedState, suggestions: [] }}
+        />
+      )
+      expect(baseProps.services.announce).toHaveBeenCalledWith('No results available')
+    })
+
+    it('announces result count when suggestions are visible and populated', () => {
+      render(
+        <Form
+          {...baseProps}
+          pluginState={{ ...baseProps.pluginState, ...searchedState, suggestions: [{ text: 'A' }, { text: 'B' }] }}
+        />
+      )
+      expect(baseProps.services.announce).toHaveBeenCalledWith('2 results available')
+    })
+
+    it('uses singular "result" for a single result', () => {
+      render(
+        <Form
+          {...baseProps}
+          pluginState={{ ...baseProps.pluginState, ...searchedState, suggestions: [{ text: 'A' }] }}
+        />
+      )
+      expect(baseProps.services.announce).toHaveBeenCalledWith('1 result available')
+    })
+
+    it('does not announce when suggestions are not visible', () => {
+      render(<Form {...baseProps} />)
+      expect(baseProps.services.announce).not.toHaveBeenCalled()
+    })
+
+    it('does not announce when the fetch has not yet completed', () => {
+      render(
+        <Form
+          {...baseProps}
+          pluginState={{ ...baseProps.pluginState, areSuggestionsVisible: true, hasFetchedSuggestions: false, suggestions: [] }}
+        />
+      )
+      expect(baseProps.services.announce).not.toHaveBeenCalled()
+    })
+  })
+})

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/SubmitButton/SubmitButton.jsx

@@ -0,0 +1,28 @@
+// src/plugins/search/SubmitButton.jsx
+export const SubmitButton = ({ defaultExpanded, submitIcon }) => {
+  return (
+    <button
+      aria-label="Search"
+      className="im-c-map-button im-c-search-submit-button"
+      type="submit"
+      style={defaultExpanded ? undefined : { display: 'none' }}
+    >
+      {submitIcon && (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+          focusable="false"
+          dangerouslySetInnerHTML={{ __html: submitIcon }}
+          />
+      )}
+    </button>
+  )
+}

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

@@ -0,0 +1,8 @@
+.im-c-search-submit-button {
+  &:before {
+    box-shadow: none;
+  }
+  &[data-focus-visible="true"] {
+    z-index: 1;
+  }
+}

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

@@ -0,0 +1,33 @@
+// src/plugins/search/components/SubmitButton/SubmitButton.test.jsx
+
+import { render, screen } from '@testing-library/react'
+import { SubmitButton } from './SubmitButton'
+
+describe('SubmitButton', () => {
+  it('renders a submit button with the correct aria-label', () => {
+    render(<SubmitButton defaultExpanded />)
+    const button = screen.getByRole('button', { name: 'Search' })
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveAttribute('type', 'submit')
+  })
+
+  it('hides the button when defaultExpanded is false', () => {
+    const { container } = render(<SubmitButton defaultExpanded={false} />)
+    expect(container.querySelector('button')).toHaveStyle({ display: 'none' })
+  })
+
+  it('shows the button when defaultExpanded is true', () => {
+    render(<SubmitButton defaultExpanded />)
+    expect(screen.getByRole('button', { name: 'Search' })).not.toHaveStyle({ display: 'none' })
+  })
+
+  it('renders an svg when submitIcon is provided', () => {
+    const { container } = render(<SubmitButton defaultExpanded submitIcon="<path d='M1 1'/>" />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('does not render an svg when submitIcon is not provided', () => {
+    const { container } = render(<SubmitButton defaultExpanded />)
+    expect(container.querySelector('svg')).toBeNull()
+  })
+})

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.js

@@ -1,15 +1,19 @@
 // src/plugins/search/datasets.js
 import { parseOsNamesResults } from './utils/parseOsNamesResults.js'
 
-export function createDatasets({ customDatasets = [], osNamesURL, crs }) {
-  
-  const defaultDatasets = [{
-    name: 'osNames',
-    urlTemplate: osNamesURL,
-    parseResults: (json, query) => parseOsNamesResults(json, query, crs),
-    includeRegex: /^[a-zA-Z0-9\s,-]+$/,
-    excludeRegex: /^(?:[a-z]{2}\s*(?:\d{3}\s*\d{3}|\d{4}\s*\d{4}|\d{5}\s*\d{5})|\d+\s*,?\s*\d+)$/i // NOSONAR - complexity unavoidable for gridref/coordinate matching
-  }]
-
-  return [...defaultDatasets, ...customDatasets]
+export function createDatasets({ customDatasets = [], osNamesURL, crs, regions = ['england', 'scotland', 'wales'] }) {
+
+    if (!osNamesURL) {
+      return customDatasets
+    }
+
+    const defaultDatasets = [{
+      name: 'osNames',
+      urlTemplate: osNamesURL,
+      parseResults: (json, query) => parseOsNamesResults(json, query, regions, crs),
+      includeRegex: /[a-zA-Z0-9]/,
+      excludeRegex: /^(?:[a-z]{2}\s*(?:\d{3}\s*\d{3}|\d{4}\s*\d{4}|\d{5}\s*\d{5})|\d+\s*,?\s*\d+)$/i // NOSONAR - complexity unavoidable for gridref/coordinate matching
+    }]
+
+    return [...defaultDatasets, ...customDatasets]
 }

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

@@ -0,0 +1,61 @@
+// 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 only customDatasets if osNamesURL is not provided', () => {
+    const custom = [
+      { name: 'custom1', urlTemplate: 'https://custom.com' },
+      { name: 'custom2', urlTemplate: 'https://custom2.com' }
+    ]
+    const datasets = createDatasets({ customDatasets: custom, crs })
+    expect(datasets).toHaveLength(2)
+    expect(datasets).toEqual(custom)
+  })
+
+  it('returns empty array if neither osNamesURL nor customDatasets are provided', () => {
+    const datasets = createDatasets({ crs })
+    expect(datasets).toEqual([])
+  })
+
+  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]/)
+    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, ['england', 'scotland', 'wales'], crs)
+    expect(result).toBe('parsed')
+    parseMock.mockRestore()
+  })
+})

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

@@ -42,7 +42,7 @@ export const fetchSuggestions = async (value, datasets, dispatch, transformReque
   const sanitisedValue = sanitiseQuery(value)
 
   const activeDatasets = datasets.filter(ds => {
-    const include = ds.includeRegex ? ds.includeRegex.test(sanitisedValue) : true
+    const include = ds.includeRegex ? ds.includeRegex.test(value) : true
     const exclude = ds.excludeRegex ? ds.excludeRegex.test(sanitisedValue) : false
     return include && !exclude
   })