@defra/interactive-map 0.0.30-alpha → 0.0.31-alpha

package/plugins/beta/datasets/src/api/setStyle.test.js

@@ -0,0 +1,53 @@
+import { setStyle } from './setStyle.js'
+
+describe('setStyle', () => {
+  it('dispatches SET_DATASET_STYLE with datasetId, styleChanges, and mapStyle', () => {
+    const dispatch = jest.fn()
+    const mapStyle = { version: 8, layers: [] }
+    const styleChanges = { fill: 'blue' }
+
+    setStyle({ pluginState: { dispatch }, mapState: { mapStyle } }, styleChanges, { datasetId: 'my-dataset' })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_DATASET_STYLE',
+      payload: { datasetId: 'my-dataset', styleChanges, mapStyle }
+    })
+  })
+
+  it('combines datasetId and sublayerId for the dispatched datasetId', () => {
+    const dispatch = jest.fn()
+    const mapStyle = { version: 8, layers: [] }
+    const styleChanges = { stroke: 'red' }
+
+    setStyle({ pluginState: { dispatch }, mapState: { mapStyle } }, styleChanges, { datasetId: 'parent', sublayerId: 'child' })
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_DATASET_STYLE',
+      payload: { datasetId: 'parent-child', styleChanges, mapStyle }
+    })
+  })
+
+  it('passes mapState.mapStyle in the payload', () => {
+    const dispatch = jest.fn()
+    const mapStyle = { version: 8, sources: { s: {} }, layers: [{ id: 'base' }] }
+
+    setStyle({ pluginState: { dispatch }, mapState: { mapStyle } }, {}, { datasetId: 'ds' })
+
+    expect(dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({ payload: expect.objectContaining({ mapStyle }) })
+    )
+  })
+
+  it('uses undefined datasetId when options are not provided', () => {
+    const dispatch = jest.fn()
+    const mapStyle = { version: 8, layers: [] }
+    const styleChanges = { fill: 'green' }
+
+    setStyle({ pluginState: { dispatch }, mapState: { mapStyle } }, styleChanges)
+
+    expect(dispatch).toHaveBeenCalledWith({
+      type: 'SET_DATASET_STYLE',
+      payload: { datasetId: undefined, styleChanges, mapStyle }
+    })
+  })
+})

package/plugins/beta/datasets/src/components/Key/Key.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { EmptyKey } from './EmptyKey.jsx'
+import { KeyItem } from './KeyItem.jsx'
+import { KeyGroupItem } from './KeyGroupItem.jsx'
+import { datasetRegistry } from '../../registry/datasetRegistry.js'
+
+export const Key = ({
+  pluginConfig: { noKeyItemText },
+  mapState: { mapStyle },
+  pluginState: { mappedDatasets },
+  services: { symbolRegistry, patternRegistry }
+}) => {
+  const { items: keyGroups, hasGroups } = datasetRegistry.keyItems()
+
+  if (!keyGroups?.length) {
+    return (<EmptyKey text={noKeyItemText} />)
+  }
+
+  const containerClass = `im-c-datasets-key${hasGroups ? ' im-c-datasets-key--has-groups' : ''}`
+  return (
+    <div className={containerClass}>{keyGroups.map(item => {
+      const key = item.type === 'group' ? item.groupLabel.toLowerCase().replaceAll(/\s+/g, '-') : item.dataset.id
+
+      if (item.type === 'sublayers' || item.type === 'group') {
+        const datasets = item.type === 'sublayers' ? item.sublayers : item.datasets
+        const label = item.type === 'sublayers' ? item.dataset.label : item.groupLabel
+        return (
+          <KeyGroupItem
+            key={key}
+            headingId={`key-heading-${key}`}
+            label={label}
+            datasets={datasets}
+            symbolRegistry={symbolRegistry}
+            patternRegistry={patternRegistry}
+            mapStyle={mapStyle}
+          />
+        )
+      }
+      return (
+        <KeyItem
+          key={key}
+          registryDataset={item.dataset}
+          symbolRegistry={symbolRegistry}
+          patternRegistry={patternRegistry}
+          mapStyle={mapStyle}
+        />
+      )
+    })}
+    </div>
+  )
+}

package/plugins/beta/datasets/src/components/Key/KeyGroupItem.jsx

@@ -0,0 +1,18 @@
+import { KeyItem } from './KeyItem.jsx'
+
+export const KeyGroupItem = ({ headingId, label, datasets, symbolRegistry, patternRegistry, mapStyle }) => {
+  return (
+    <section className='im-c-datasets-key__group' aria-labelledby={headingId}>
+      <h3 id={headingId} className='im-c-datasets-key__group-heading'>{label}</h3>
+      {datasets.map(dataset =>
+        <KeyItem
+          key={`${dataset.id}`}
+          registryDataset={dataset}
+          symbolRegistry={symbolRegistry}
+          patternRegistry={patternRegistry}
+          mapStyle={mapStyle}
+        />
+      )}
+    </section>
+  )
+}

package/plugins/beta/datasets/src/components/Key/KeyItem.jsx

@@ -0,0 +1,20 @@
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.js'
+import { KeySvg } from './KeySvg.jsx'
+
+export const KeyItem = ({ registryDataset, symbolRegistry, patternRegistry, mapStyle }) => {
+  return (
+    <dl className='im-c-datasets-key__item'>
+      <dt className='im-c-datasets-key__item-symbol'>
+        <KeySvg registryDataset={registryDataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
+      </dt>
+      <dd className='im-c-datasets-key__item-label'>
+        {registryDataset.label}
+        {registryDataset.symbolDescription && (
+          <span className='govuk-visually-hidden'>
+            ({getValueForStyle(registryDataset.symbolDescription, mapStyle.id)})
+          </span>
+        )}
+      </dd>
+    </dl>
+  )
+}

package/plugins/beta/datasets/src/components/Key/KeySvg.jsx

@@ -0,0 +1,22 @@
+import { KeySvgPattern } from './KeySvgPattern.jsx'
+import { KeySvgSymbol } from './KeySvgSymbol.jsx'
+import { KeySvgLine } from './KeySvgLine.jsx'
+import { KeySvgRect } from './KeySvgRect.jsx'
+
+export const KeySvg = ({ symbolRegistry, registryDataset, mapStyle, patternRegistry }) => {
+  const { hasSymbol, hasPattern, style } = registryDataset
+  const symbolDef = hasSymbol && symbolRegistry.getSymbolDef(style)
+  if (symbolDef) {
+    return <KeySvgSymbol mapStyle={mapStyle} registryDataset={registryDataset} symbolRegistry={symbolRegistry} symbolDef={symbolDef} />
+  }
+
+  if (hasPattern) {
+    return <KeySvgPattern mapStyle={mapStyle} registryDataset={registryDataset} patternRegistry={patternRegistry} />
+  }
+
+  if (style.keySymbolShape === 'line') {
+    return <KeySvgLine mapStyle={mapStyle} registryDataset={registryDataset} />
+  }
+
+  return <KeySvgRect mapStyle={mapStyle} registryDataset={registryDataset} />
+}

package/plugins/beta/datasets/src/components/Key/KeySvg.test.jsx

@@ -0,0 +1,87 @@
+import { render } from '@testing-library/react'
+import { KeySvg } from './KeySvg'
+
+import { symbolRegistry } from '../../../../../../src/services/symbolRegistry.js'
+import { patternRegistry } from '../../../../../../src/services/patternRegistry.js'
+
+const getSymbolDef = jest.spyOn(symbolRegistry, 'getSymbolDef')
+
+jest.mock('./KeySvgPattern.jsx', () => ({
+  KeySvgPattern: () => <svg data-testid='key-svg-pattern' />
+}))
+
+jest.mock('./KeySvgSymbol.jsx', () => ({
+  KeySvgSymbol: () => <svg data-testid='key-svg-symbol' />
+}))
+
+jest.mock('./KeySvgLine.jsx', () => ({
+  KeySvgLine: () => <svg data-testid='key-svg-line' />
+}))
+
+jest.mock('./KeySvgRect.jsx', () => ({
+  KeySvgRect: () => <svg data-testid='key-svg-rect' />
+}))
+
+const baseRegistryDataset = {
+  hasSymbol: false,
+  hasPattern: false,
+  style: {}
+}
+
+const baseProps = {
+  symbolRegistry,
+  patternRegistry,
+  mapStyle: { id: 'default' },
+  registryDataset: baseRegistryDataset
+}
+
+beforeEach(() => {
+  getSymbolDef.mockReturnValue(null)
+})
+
+describe('KeySvg', () => {
+  it('renders KeySvgSymbol when a symbolDef is resolved', () => {
+    getSymbolDef.mockReturnValue({ id: 'marker' })
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true }} />)
+    expect(getByTestId('key-svg-symbol')).toBeTruthy()
+  })
+
+  it('renders KeySvgPattern when hasPattern is true and no symbol', () => {
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasPattern: true }} />)
+    expect(getByTestId('key-svg-pattern')).toBeTruthy()
+  })
+
+  it('renders KeySvgLine when keySymbolShape is line and no symbol or pattern', () => {
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, style: { keySymbolShape: 'line' } }} />)
+    expect(getByTestId('key-svg-line')).toBeTruthy()
+  })
+
+  it('renders KeySvgRect as the default fallback', () => {
+    const { getByTestId } = render(<KeySvg {...baseProps} />)
+    expect(getByTestId('key-svg-rect')).toBeTruthy()
+  })
+
+  it('prefers symbol over pattern when both are present', () => {
+    getSymbolDef.mockReturnValue({ id: 'marker' })
+    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true, hasPattern: true }} />)
+    expect(getByTestId('key-svg-symbol')).toBeTruthy()
+    expect(queryByTestId('key-svg-pattern')).toBeNull()
+  })
+
+  it('prefers pattern over line when both conditions are met', () => {
+    const { getByTestId, queryByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasPattern: true, style: { keySymbolShape: 'line' } }} />)
+    expect(getByTestId('key-svg-pattern')).toBeTruthy()
+    expect(queryByTestId('key-svg-line')).toBeNull()
+  })
+
+  it('renders KeySvgRect when keySymbolShape is not line and no symbol or pattern', () => {
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, style: { keySymbolShape: 'polygon' } }} />)
+    expect(getByTestId('key-svg-rect')).toBeTruthy()
+  })
+
+  it('does not render KeySvgSymbol when hasSymbol is true but getSymbolDef returns null', () => {
+    getSymbolDef.mockReturnValue(null)
+    const { getByTestId } = render(<KeySvg {...baseProps} registryDataset={{ ...baseRegistryDataset, hasSymbol: true }} />)
+    expect(getByTestId('key-svg-rect')).toBeTruthy()
+  })
+})

package/plugins/beta/datasets/src/components/Key/KeySvgLine.jsx

@@ -0,0 +1,19 @@
+import { svgProps, SVG_SIZE, SVG_CENTER } from './svgProperties.js'
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.js'
+
+export const KeySvgLine = ({ mapStyle, registryDataset }) => {
+  const { style } = registryDataset
+  return (
+    <svg {...svgProps}>
+      <line
+        x1={style.strokeWidth / 2}
+        y1={SVG_CENTER}
+        x2={SVG_SIZE - style.strokeWidth / 2}
+        y2={SVG_CENTER}
+        stroke={getValueForStyle(style.stroke, mapStyle.id)}
+        strokeWidth={style.strokeWidth}
+        strokeLinecap='round'
+      />
+    </svg>
+  )
+}

package/plugins/beta/datasets/src/components/Key/KeySvgLine.test.jsx

@@ -0,0 +1,71 @@
+import { render } from '@testing-library/react'
+import { KeySvgLine } from './KeySvgLine'
+
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle'
+
+jest.mock('../../../../../../src/utils/getValueForStyle', () => ({
+  getValueForStyle: jest.fn((value) => value)
+}))
+
+const defaultProps = {
+  registryDataset: {
+    style: {
+      stroke: '#ff0000',
+      strokeWidth: 2
+    }
+  },
+  mapStyle: { id: 'default' }
+}
+
+beforeEach(() => {
+  getValueForStyle.mockImplementation((value) => value)
+})
+
+describe('KeySvgLine', () => {
+  it('renders an svg element', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('renders a line element', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    expect(container.querySelector('line')).toBeTruthy()
+  })
+
+  it('applies the stroke color via getValueForStyle', () => {
+    render(<KeySvgLine {...defaultProps} />)
+    expect(getValueForStyle).toHaveBeenCalledWith('#ff0000', 'default')
+  })
+
+  it('sets stroke attribute on the line', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    const line = container.querySelector('line')
+    expect(line.getAttribute('stroke')).toBe('#ff0000')
+  })
+
+  it('sets strokeWidth attribute on the line', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    const line = container.querySelector('line')
+    expect(line.getAttribute('stroke-width')).toBe('2')
+  })
+
+  it('centres the line vertically', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    const line = container.querySelector('line')
+    expect(line.getAttribute('y1')).toBe('10')
+    expect(line.getAttribute('y2')).toBe('10')
+  })
+
+  it('insets the line horizontally by half the strokeWidth', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    const line = container.querySelector('line')
+    expect(line.getAttribute('x1')).toBe('1') // strokeWidth/2 = 1
+    expect(line.getAttribute('x2')).toBe('19') // 20 - 1
+  })
+
+  it('has round stroke linecap', () => {
+    const { container } = render(<KeySvgLine {...defaultProps} />)
+    const line = container.querySelector('line')
+    expect(line.getAttribute('stroke-linecap')).toBe('round')
+  })
+})

package/plugins/beta/datasets/src/components/{KeySvgPattern.jsx → Key/KeySvgPattern.jsx}

@@ -1,10 +1,9 @@
 import { svgProps } from './svgProperties.js'
 const PATTERN_INSET = 2
 
-export const KeySvgPattern = (props) => {
-  const { patternRegistry, mapStyle } = props
-
-  const paths = patternRegistry.getKeyPatternPaths(props, mapStyle.id)
+export const KeySvgPattern = ({ patternRegistry, registryDataset, mapStyle }) => {
+  const { style } = registryDataset
+  const paths = patternRegistry.getKeyPatternPaths(style, mapStyle.id)
   return (
     <svg {...svgProps}>
       <g dangerouslySetInnerHTML={{ __html: paths.border }} />

package/plugins/beta/datasets/src/components/Key/KeySvgPattern.test.jsx

@@ -0,0 +1,55 @@
+import { render } from '@testing-library/react'
+import { KeySvgPattern } from './KeySvgPattern'
+import { patternRegistry } from '../../../../../../src/services/patternRegistry.js'
+
+const getKeyPatternPaths = jest.spyOn(patternRegistry, 'getKeyPatternPaths')
+const defaultProps = {
+  registryDataset: {
+    style: {
+      fillPattern: 'dots'
+    }
+  },
+  patternRegistry,
+  mapStyle: { id: 'default' }
+}
+
+beforeEach(() => {
+  getKeyPatternPaths.mockReturnValue({ border: '<rect/>', content: '<path/>' })
+})
+
+describe('KeySvgPattern', () => {
+  it('renders an svg element', () => {
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('calls getKeyPatternPaths with props, the mapStyle id, and the patternRegistry', () => {
+    render(<KeySvgPattern {...defaultProps} />)
+    expect(getKeyPatternPaths).toHaveBeenCalledWith(defaultProps.registryDataset.style, 'default')
+  })
+
+  it('renders two g elements for border and content', () => {
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    const groups = container.querySelectorAll('g')
+    expect(groups.length).toBe(2)
+  })
+
+  it('applies a translate transform to the content group', () => {
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    const groups = container.querySelectorAll('g')
+    const contentGroup = groups[1]
+    expect(contentGroup.getAttribute('transform')).toMatch(/^translate\(/)
+  })
+
+  it('injects the border html into the first g element', () => {
+    getKeyPatternPaths.mockReturnValue({ border: '<circle id="border-el"/>', content: '' })
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    expect(container.querySelector('#border-el')).toBeTruthy()
+  })
+
+  it('injects the content html into the second g element', () => {
+    getKeyPatternPaths.mockReturnValue({ border: '', content: '<circle id="content-el"/>' })
+    const { container } = render(<KeySvgPattern {...defaultProps} />)
+    expect(container.querySelector('#content-el')).toBeTruthy()
+  })
+})

package/plugins/beta/datasets/src/components/Key/KeySvgRect.jsx

@@ -0,0 +1,22 @@
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.js'
+import { svgProps, SVG_SIZE } from './svgProperties.js'
+
+export const KeySvgRect = ({ mapStyle, registryDataset }) => {
+  const { style } = registryDataset
+  return (
+    <svg {...svgProps}>
+      <rect
+        x={style.strokeWidth / 2}
+        y={style.strokeWidth / 2}
+        width={SVG_SIZE - style.strokeWidth}
+        height={SVG_SIZE - style.strokeWidth}
+        rx={style.strokeWidth}
+        ry={style.strokeWidth}
+        fill={getValueForStyle(style.fill, mapStyle.id)}
+        stroke={getValueForStyle(style.stroke, mapStyle.id)}
+        strokeWidth={style.strokeWidth}
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

package/plugins/beta/datasets/src/components/Key/KeySvgRect.test.jsx

@@ -0,0 +1,85 @@
+import { render } from '@testing-library/react'
+import { KeySvgRect } from './KeySvgRect'
+
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle'
+
+jest.mock('../../../../../../src/utils/getValueForStyle', () => ({
+  getValueForStyle: jest.fn((value) => value)
+}))
+
+const defaultProps = {
+  registryDataset: {
+    style: {
+      fill: '#0000ff',
+      stroke: '#ff0000',
+      strokeWidth: 2
+    }
+  },
+  mapStyle: { id: 'default' }
+}
+
+beforeEach(() => {
+  getValueForStyle.mockImplementation((value) => value)
+})
+
+describe('KeySvgRect', () => {
+  it('renders an svg element', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('renders a rect element', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    expect(container.querySelector('rect')).toBeTruthy()
+  })
+
+  it('resolves fill color via getValueForStyle', () => {
+    render(<KeySvgRect {...defaultProps} />)
+    expect(getValueForStyle).toHaveBeenCalledWith('#0000ff', 'default')
+  })
+
+  it('resolves stroke color via getValueForStyle', () => {
+    render(<KeySvgRect {...defaultProps} />)
+    expect(getValueForStyle).toHaveBeenCalledWith('#ff0000', 'default')
+  })
+
+  it('sets fill attribute on the rect', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('fill')).toBe('#0000ff')
+  })
+
+  it('sets stroke attribute on the rect', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('stroke')).toBe('#ff0000')
+  })
+
+  it('sets strokeWidth attribute on the rect', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('stroke-width')).toBe('2')
+  })
+
+  it('insets the rect by half the strokeWidth', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('x')).toBe('1') // strokeWidth / 2
+    expect(rect.getAttribute('y')).toBe('1')
+    expect(rect.getAttribute('width')).toBe('18') // SVG_SIZE - strokeWidth
+    expect(rect.getAttribute('height')).toBe('18')
+  })
+
+  it('uses strokeWidth as the rx and ry for rounded corners', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('rx')).toBe('2')
+    expect(rect.getAttribute('ry')).toBe('2')
+  })
+
+  it('has round stroke linejoin', () => {
+    const { container } = render(<KeySvgRect {...defaultProps} />)
+    const rect = container.querySelector('rect')
+    expect(rect.getAttribute('stroke-linejoin')).toBe('round')
+  })
+})

package/plugins/beta/datasets/src/components/{KeySvgSymbol.jsx → Key/KeySvgSymbol.jsx}

@@ -1,13 +1,13 @@
-import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
+import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../../src/utils/symbolUtils.js'
 import { svgSymbolProps } from './svgProperties.js'
 
-export const KeySvgSymbol = (props) => {
-  const { symbolRegistry, mapStyle, symbolDef } = props
+export const KeySvgSymbol = ({ symbolRegistry, registryDataset, mapStyle, symbolDef }) => {
+  const { style } = registryDataset
   const mapColorScheme = mapStyle?.appColorScheme ?? 'light'
   const keyMapStyle = { ...mapStyle, mapColorScheme }
 
-  const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(props), keyMapStyle)
-  const viewBox = getSymbolViewBox(props, symbolDef)
+  const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(style), keyMapStyle)
+  const viewBox = getSymbolViewBox(style, symbolDef)
   return (
     <svg {...svgSymbolProps} viewBox={viewBox}>
       <g dangerouslySetInnerHTML={{ __html: resolvedSvg }} />

package/plugins/beta/datasets/src/components/Key/KeySvgSymbol.test.jsx

@@ -0,0 +1,80 @@
+import { render } from '@testing-library/react'
+import { KeySvgSymbol } from './KeySvgSymbol'
+
+import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../../src/utils/symbolUtils.js'
+
+jest.mock('../../../../../../src/utils/symbolUtils.js', () => ({
+  getSymbolStyleColors: jest.fn(() => ({ foreground: '#000', background: '#fff' })),
+  getSymbolViewBox: jest.fn(() => '0 0 38 38')
+}))
+
+const mockResolve = jest.fn(() => '<path d="M0 0"/>')
+
+const defaultProps = {
+  symbolDef: { id: 'marker' },
+  registryDataset: {
+    style: {
+      stroke: '#000000'
+    }
+  },
+  symbolRegistry: { resolve: mockResolve },
+  mapStyle: { id: 'default' }
+}
+
+beforeEach(() => {
+  mockResolve.mockClear()
+  mockResolve.mockReturnValue('<path d="M0 0"/>')
+  getSymbolStyleColors.mockReturnValue({ foreground: '#000', background: '#fff' })
+  getSymbolViewBox.mockReturnValue('0 0 38 38')
+})
+
+describe('KeySvgSymbol', () => {
+  it('renders an svg element', () => {
+    const { container } = render(<KeySvgSymbol {...defaultProps} />)
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  it('calls symbolRegistry.resolve with the symbolDef, style colors, and mapStyle', () => {
+    render(<KeySvgSymbol {...defaultProps} />)
+    expect(mockResolve).toHaveBeenCalledWith(
+      defaultProps.symbolDef,
+      { foreground: '#000', background: '#fff' },
+      expect.objectContaining({ id: 'default' })
+    )
+  })
+
+  it('calls getSymbolStyleColors with the dataset props', () => {
+    render(<KeySvgSymbol {...defaultProps} />)
+    expect(getSymbolStyleColors).toHaveBeenCalledWith(defaultProps.registryDataset.style)
+  })
+
+  it('calls getSymbolViewBox with the dataset props and symbolDef', () => {
+    render(<KeySvgSymbol {...defaultProps} />)
+    expect(getSymbolViewBox).toHaveBeenCalledWith(defaultProps.registryDataset.style, defaultProps.symbolDef)
+  })
+
+  it('sets the viewBox from getSymbolViewBox', () => {
+    getSymbolViewBox.mockReturnValue('0 0 64 64')
+    const { container } = render(<KeySvgSymbol {...defaultProps} />)
+    expect(container.querySelector('svg').getAttribute('viewBox')).toBe('0 0 64 64')
+  })
+
+  it('renders the resolved svg html inside a g element', () => {
+    mockResolve.mockReturnValue('<circle id="sym-el"/>')
+    const { container } = render(<KeySvgSymbol {...defaultProps} />)
+    expect(container.querySelector('#sym-el')).toBeTruthy()
+  })
+
+  it('defaults mapColorScheme to light when appColorScheme is not set', () => {
+    render(<KeySvgSymbol {...defaultProps} />)
+    const callArg = mockResolve.mock.calls[0][2]
+    expect(callArg.mapColorScheme).toBe('light')
+  })
+
+  it('uses the mapStyle appColorScheme when provided', () => {
+    const props = { ...defaultProps, mapStyle: { id: 'dark', appColorScheme: 'dark' } }
+    render(<KeySvgSymbol {...props} />)
+    const callArg = mockResolve.mock.calls[0][2]
+    expect(callArg.mapColorScheme).toBe('dark')
+  })
+})