@defra/interactive-map 0.0.15-alpha → 0.0.16-alpha

package/src/App/store/appDispatchMiddleware.test.js

@@ -10,227 +10,255 @@ const run = (action, state, panelConfig = {}) =>
 
 const flushMicrotasks = () => new Promise(queueMicrotask)
 
-describe('appDispatchMiddleware', () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  describe('CLOSE_PANEL', () => {
-    it('emits panel closed event', async () => {
-      run(
-        { type: 'CLOSE_PANEL', payload: 'testPanel' },
-        { openPanels: {} }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'testPanel' }
-      )
-    })
-  })
-
-  describe('CLOSE_ALL_PANELS', () => {
-    it('emits closed event for each panel', async () => {
-      run(
-        { type: 'CLOSE_ALL_PANELS' },
-        { openPanels: { panel1: {}, panel2: {} } }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledTimes(2)
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'panel1' }
-      )
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'panel2' }
-      )
-    })
-  })
-
-  describe('OPEN_PANEL', () => {
-    it('emits panel opened event for regular panel', async () => {
-      run(
-        {
-          type: 'OPEN_PANEL',
-          payload: { panelId: 'newPanel', props: { foo: 'bar' } }
-        },
-        { openPanels: {}, breakpoint: 'md' },
-        { newPanel: { md: { exclusive: false, modal: false } } }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'newPanel', props: { foo: 'bar' } }
-      )
-    })
-
-    it('closes all non-exclusive panels when opening exclusive non-modal panel', async () => {
-      run(
-        {
-          type: 'OPEN_PANEL',
-          payload: { panelId: 'exclusivePanel', props: {} }
-        },
-        {
-          openPanels: {
-            regularPanel1: {},
-            regularPanel2: {},
-            exclusivePanel2: {}
-          },
-          breakpoint: 'md'
-        },
-        {
-          exclusivePanel: { md: { exclusive: true, modal: false } },
-          regularPanel1: { md: { exclusive: false, modal: false } },
-          regularPanel2: { md: { exclusive: false, modal: false } },
-          exclusivePanel2: { md: { exclusive: true, modal: false } }
-        }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledTimes(3)
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'regularPanel1' }
-      )
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'regularPanel2' }
-      )
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'exclusivePanel', props: {} }
-      )
-    })
-
-    it('closes all exclusive non-modal panels when opening regular panel', async () => {
-      run(
-        {
-          type: 'OPEN_PANEL',
-          payload: { panelId: 'regularPanel', props: {} }
-        },
-        {
-          openPanels: {
-            exclusivePanel1: {},
-            exclusivePanel2: {},
-            exclusiveModalPanel: {},
-            regularPanel2: {}
-          },
-          breakpoint: 'md'
-        },
-        {
-          regularPanel: { md: { exclusive: false, modal: false } },
-          exclusivePanel1: { md: { exclusive: true, modal: false } },
-          exclusivePanel2: { md: { exclusive: true, modal: false } },
-          exclusiveModalPanel: { md: { exclusive: true, modal: true } },
-          regularPanel2: { md: { exclusive: false, modal: false } }
-        }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledTimes(3)
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'exclusivePanel1' }
-      )
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_CLOSED,
-        { panelId: 'exclusivePanel2' }
-      )
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'regularPanel', props: {} }
-      )
-    })
-
-    it('does not close any panels when opening modal', async () => {
-      run(
-        {
-          type: 'OPEN_PANEL',
-          payload: { panelId: 'modalPanel', props: {} }
-        },
-        {
-          openPanels: { regularPanel: {}, exclusivePanel: {} },
-          breakpoint: 'md'
-        },
-        {
-          modalPanel: { md: { modal: true } },
-          regularPanel: { md: { exclusive: false, modal: false } },
-          exclusivePanel: { md: { exclusive: true, modal: false } }
-        }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledTimes(1)
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'modalPanel', props: {} }
-      )
-    })
-  })
-
-  describe('ADD_PANEL', () => {
-    it('emits APP_PANEL_OPENED with slot when panel opens by default', async () => {
-      run(
-        { type: 'ADD_PANEL', payload: { id: 'newPanel', config: {} } },
-        { breakpoint: 'desktop' }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'newPanel', slot: 'left-top' }
-      )
-    })
-
-    it('emits APP_PANEL_OPENED with visibleGeometry when provided in config', async () => {
-      const visibleGeometry = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 2] }, properties: {} }
-      run(
-        { type: 'ADD_PANEL', payload: { id: 'geoPanel', config: { visibleGeometry } } },
-        { breakpoint: 'desktop' }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'geoPanel', slot: 'left-top', visibleGeometry }
-      )
-    })
-
-    it('does not emit APP_PANEL_OPENED when breakpoint config sets open: false', async () => {
-      run(
-        { type: 'ADD_PANEL', payload: { id: 'hiddenPanel', config: { desktop: { open: false } } } },
-        { breakpoint: 'desktop' }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).not.toHaveBeenCalled()
-    })
-
-    it('emits APP_PANEL_OPENED with slot for mobile breakpoint', async () => {
-      run(
-        { type: 'ADD_PANEL', payload: { id: 'mobilePanel', config: {} } },
-        { breakpoint: 'mobile' }
-      )
-
-      await flushMicrotasks()
-
-      expect(eventBus.emit).toHaveBeenCalledWith(
-        events.APP_PANEL_OPENED,
-        { panelId: 'mobilePanel', slot: 'bottom' }
-      )
-    })
+const INVALID_SLOT = 'invalid-slot'
+const LOG_PREFIX = '[interactive-map]'
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('CLOSE_PANEL', () => {
+  it('emits panel closed event', async () => {
+    run(
+      { type: 'CLOSE_PANEL', payload: 'testPanel' },
+      { openPanels: {} }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_CLOSED,
+      { panelId: 'testPanel' }
+    )
+  })
+})
+
+describe('CLOSE_ALL_PANELS', () => {
+  it('emits closed event for each panel', async () => {
+    run(
+      { type: 'CLOSE_ALL_PANELS' },
+      { openPanels: { panel1: {}, panel2: {} } }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledTimes(2)
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_CLOSED,
+      { panelId: 'panel1' }
+    )
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_CLOSED,
+      { panelId: 'panel2' }
+    )
+  })
+})
+
+describe('OPEN_PANEL — regular panel', () => {
+  it('emits panel opened event', async () => {
+    run(
+      {
+        type: 'OPEN_PANEL',
+        payload: { panelId: 'newPanel', props: { foo: 'bar' } }
+      },
+      { openPanels: {}, breakpoint: 'md' },
+      { newPanel: { md: { exclusive: false, modal: false } } }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_OPENED,
+      { panelId: 'newPanel', props: { foo: 'bar' } }
+    )
+  })
+})
+
+const CLOSED_PLUS_OPENED = 3
+
+describe('OPEN_PANEL — opening exclusive closes non-exclusive', () => {
+  it('closes all non-exclusive panels', async () => {
+    run(
+      { type: 'OPEN_PANEL', payload: { panelId: 'exclusivePanel', props: {} } },
+      { openPanels: { regularPanel1: {}, regularPanel2: {}, exclusivePanel2: {} }, breakpoint: 'md' },
+      {
+        exclusivePanel: { md: { exclusive: true, modal: false } },
+        regularPanel1: { md: { exclusive: false, modal: false } },
+        regularPanel2: { md: { exclusive: false, modal: false } },
+        exclusivePanel2: { md: { exclusive: true, modal: false } }
+      }
+    )
+    await flushMicrotasks()
+    expect(eventBus.emit).toHaveBeenCalledTimes(CLOSED_PLUS_OPENED)
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_CLOSED, { panelId: 'regularPanel1' })
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_CLOSED, { panelId: 'regularPanel2' })
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_OPENED, { panelId: 'exclusivePanel', props: {} })
+  })
+})
+
+describe('OPEN_PANEL — opening regular closes exclusive non-modal', () => {
+  it('closes all exclusive non-modal panels', async () => {
+    run(
+      { type: 'OPEN_PANEL', payload: { panelId: 'regularPanel', props: {} } },
+      { openPanels: { exclusivePanel1: {}, exclusivePanel2: {}, exclusiveModalPanel: {}, regularPanel2: {} }, breakpoint: 'md' },
+      {
+        regularPanel: { md: { exclusive: false, modal: false } },
+        exclusivePanel1: { md: { exclusive: true, modal: false } },
+        exclusivePanel2: { md: { exclusive: true, modal: false } },
+        exclusiveModalPanel: { md: { exclusive: true, modal: true } },
+        regularPanel2: { md: { exclusive: false, modal: false } }
+      }
+    )
+    await flushMicrotasks()
+    expect(eventBus.emit).toHaveBeenCalledTimes(CLOSED_PLUS_OPENED)
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_CLOSED, { panelId: 'exclusivePanel1' })
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_CLOSED, { panelId: 'exclusivePanel2' })
+    expect(eventBus.emit).toHaveBeenCalledWith(events.APP_PANEL_OPENED, { panelId: 'regularPanel', props: {} })
+  })
+})
+
+describe('OPEN_PANEL — modal panel', () => {
+  it('does not close any panels when opening modal', async () => {
+    run(
+      {
+        type: 'OPEN_PANEL',
+        payload: { panelId: 'modalPanel', props: {} }
+      },
+      {
+        openPanels: { regularPanel: {}, exclusivePanel: {} },
+        breakpoint: 'md'
+      },
+      {
+        modalPanel: { md: { modal: true } },
+        regularPanel: { md: { exclusive: false, modal: false } },
+        exclusivePanel: { md: { exclusive: true, modal: false } }
+      }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledTimes(1)
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_OPENED,
+      { panelId: 'modalPanel', props: {} }
+    )
+  })
+})
+
+describe('ADD_BUTTON', () => {
+  beforeEach(() => jest.spyOn(console, 'warn').mockImplementation(() => {}))
+  afterEach(() => jest.restoreAllMocks())
+
+  it('warns when button has an invalid slot', () => {
+    run(
+      { type: 'ADD_BUTTON', payload: { id: 'myBtn', config: { desktop: { slot: INVALID_SLOT } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).toHaveBeenCalledWith(LOG_PREFIX, expect.stringContaining(INVALID_SLOT))
+  })
+
+  it('does not warn when button has a valid slot', () => {
+    run(
+      { type: 'ADD_BUTTON', payload: { id: 'myBtn', config: { mobile: { slot: 'top-left' }, tablet: { slot: 'top-left' }, desktop: { slot: 'top-left' } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).not.toHaveBeenCalled()
+  })
+})
+
+describe('ADD_CONTROL', () => {
+  beforeEach(() => jest.spyOn(console, 'warn').mockImplementation(() => {}))
+  afterEach(() => jest.restoreAllMocks())
+
+  it('warns when control has an invalid slot', () => {
+    run(
+      { type: 'ADD_CONTROL', payload: { id: 'myCtrl', config: { desktop: { slot: INVALID_SLOT } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).toHaveBeenCalledWith(LOG_PREFIX, expect.stringContaining(INVALID_SLOT))
+  })
+
+  it('does not warn when control has a valid slot', () => {
+    run(
+      { type: 'ADD_CONTROL', payload: { id: 'myCtrl', config: { mobile: { slot: 'bottom' }, tablet: { slot: 'top-left' }, desktop: { slot: 'top-left' } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).not.toHaveBeenCalled()
+  })
+})
+
+describe('ADD_PANEL', () => {
+  it('emits APP_PANEL_OPENED with slot when panel opens by default', async () => {
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'newPanel', config: {} } },
+      { breakpoint: 'desktop' }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_OPENED,
+      { panelId: 'newPanel', slot: 'left-top' }
+    )
+  })
+
+  it('emits APP_PANEL_OPENED with visibleGeometry when provided in config', async () => {
+    const visibleGeometry = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 2] }, properties: {} }
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'geoPanel', config: { visibleGeometry } } },
+      { breakpoint: 'desktop' }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_OPENED,
+      { panelId: 'geoPanel', slot: 'left-top', visibleGeometry }
+    )
+  })
+
+  it('does not emit APP_PANEL_OPENED when breakpoint config sets open: false', async () => {
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'hiddenPanel', config: { desktop: { open: false } } } },
+      { breakpoint: 'desktop' }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).not.toHaveBeenCalled()
+  })
+
+  it('emits APP_PANEL_OPENED with slot for mobile breakpoint', async () => {
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'mobilePanel', config: {} } },
+      { breakpoint: 'mobile' }
+    )
+
+    await flushMicrotasks()
+
+    expect(eventBus.emit).toHaveBeenCalledWith(
+      events.APP_PANEL_OPENED,
+      { panelId: 'mobilePanel', slot: 'bottom' }
+    )
+  })
+
+  it('warns when panel has an invalid slot', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'badPanel', config: { desktop: { slot: INVALID_SLOT, open: false } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).toHaveBeenCalledWith(LOG_PREFIX, expect.stringContaining(INVALID_SLOT))
+    jest.restoreAllMocks()
+  })
+
+  it('does not warn for a panel with a button-adjacent slot', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    run(
+      { type: 'ADD_PANEL', payload: { id: 'btnPanel', config: { desktop: { slot: 'left-top-button', open: false } } } },
+      { breakpoint: 'desktop' }
+    )
+    expect(console.warn).not.toHaveBeenCalled()
+    jest.restoreAllMocks()
   })
 })

package/src/config/appConfig.js

@@ -144,10 +144,10 @@ export const defaultControlConfig = {
     slot: 'bottom'
   },
   tablet: {
-    slot: 'left-top'
+    slot: 'top-left'
   },
   desktop: {
-    slot: 'left-top'
+    slot: 'top-left'
   }
 }
 

package/src/utils/logger.js

@@ -0,0 +1,6 @@
+const PREFIX = '[interactive-map]'
+
+export const logger = {
+  warn: (...args) => console.warn(PREFIX, ...args),
+  error: (...args) => console.error(PREFIX, ...args)
+}

package/src/utils/logger.test.js

@@ -0,0 +1,32 @@
+import { logger } from './logger.js'
+
+beforeEach(() => {
+  jest.spyOn(console, 'warn').mockImplementation(() => {})
+  jest.spyOn(console, 'error').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  jest.restoreAllMocks()
+})
+
+describe('logger', () => {
+  it('logger.warn calls console.warn with the [interactive-map] prefix', () => {
+    logger.warn('something went wrong')
+    expect(console.warn).toHaveBeenCalledWith('[interactive-map]', 'something went wrong')
+  })
+
+  it('logger.error calls console.error with the [interactive-map] prefix', () => {
+    logger.error('critical failure')
+    expect(console.error).toHaveBeenCalledWith('[interactive-map]', 'critical failure')
+  })
+
+  it('logger.warn forwards multiple arguments', () => {
+    logger.warn('slot', 'invalid', { detail: true })
+    expect(console.warn).toHaveBeenCalledWith('[interactive-map]', 'slot', 'invalid', { detail: true })
+  })
+
+  it('logger.error forwards multiple arguments', () => {
+    logger.error('code', 42, null)
+    expect(console.error).toHaveBeenCalledWith('[interactive-map]', 'code', 42, null)
+  })
+})

package/webpack.dev.mjs

@@ -12,6 +12,10 @@ dotenv.config({ path: path.join(__dirname, './.env'), quiet: true })
 export default {
   mode: 'development',
   target: ['web', 'es5'],
+  devtool: [
+    // produce a source-map to aid debugging
+    { type: 'javascript', use: 'source-map' }
+  ],
   entry: {
     index: path.join(__dirname, 'demo/js/index.js'),
     forms: path.join(__dirname, 'demo/js/forms.js'),
@@ -21,7 +25,7 @@ export default {
   output: {
     path: path.resolve(__dirname, 'public'),
     filename: '[name].js',
-    clean: true,
+    clean: true
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],
@@ -84,28 +88,28 @@ export default {
         test: /\.jsx?$/,
         loader: 'babel-loader',
         exclude: /node_modules/
-      },{
+      }, {
         test: /\.s[ac]ss$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
-      },{
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+      }, {
         test: /\.css$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, 'css-loader']
       }
-    ],
+    ]
   },
   devServer: {
     static: [
-    {
-      directory: path.join(__dirname, 'demo'),
-    },
-    {
-      directory: path.join(__dirname, 'public'),
-    },
-    {
-      directory: path.join(__dirname, 'assets'),
-      publicPath: '/assets' // Images served from here as used in both demo and prototype kit plugin
-    }
-  ],
+      {
+        directory: path.join(__dirname, 'demo')
+      },
+      {
+        directory: path.join(__dirname, 'public')
+      },
+      {
+        directory: path.join(__dirname, 'assets'),
+        publicPath: '/assets' // Images served from here as used in both demo and prototype kit plugin
+      }
+    ],
     compress: true,
     port: 8080,
     open: true,
@@ -120,4 +124,4 @@ export default {
       }
     }
   }
-}
+}

package/docs/govuk-prototype.md

@@ -1,23 +0,0 @@
-# GOV.UK Prototype Kit
-
-This guide explains how to use the Interactive Map component in a GOV.UK Prototype Kit project.
-
-## Installation
-
-Install the package in your prototype kit project:
-
-```shell
-npm install @defra/interactive-map
-```
-
-The InteractiveMap plugin will be automatically added to your prototype.
-
-## Usage
-
-For detailed usage instructions, see the [GOV.UK Prototype Kit documentation](https://prototype-kit.service.gov.uk/docs/install-and-use-plugins).
-
-## Next Steps
-
-- [Getting Started](./getting-started.md) - Learn the basics
-- [API Reference](./api.md) - Explore the full API
-- [Plugins](./plugins.md) - Extend functionality

package/docs/index.md

@@ -1,19 +0,0 @@
-## What's Inside
-
-- **[Getting Started](getting-started)** - Installation and basic usage
-- **[API Reference](api)** - Complete API documentation
-- **[Plugins](plugins)** - Extend functionality with plugins
-- **[Architecture](architecture)** - Learn about the design and structure
-- **[GOV.UK Prototype](govuk-prototype)** - Use with GOV.UK Prototype Kit
-
-## Features
-
-- ✅ Accessible and keyboard navigable
-- 🗺️ Multiple map provider support (MapLibre, ESRI)
-- 🔌 Extensible plugin system
-- 🎨 Customizable styling and behaviors
-- 📱 Responsive design
-
-## Support
-
-For issues and feature requests, visit our [GitHub repository](https://github.com/DEFRA/interactive-map).