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

package/src/App/components/PopupMenu/usePopupMenu.js

@@ -0,0 +1,258 @@
+import { useState, useMemo, useEffect } from 'react'
+import { stringToKebab } from '../../../utils/stringToKebab.js'
+
+/**
+ * Computes the position and alignment style for the popup menu based on the
+ * triggering button's bounding rect. Positions above/below and left/center/right
+ * depending on which third of the screen the button centre falls in.
+ *
+ * @param {DOMRect|null} buttonRect - Bounding rect of the trigger button, or null.
+ * @returns {{ style: object, direction: string, halign: string }}
+ */
+const getMenuStyle = (buttonRect) => {
+  if (!buttonRect) {
+    return { style: {}, direction: 'below' }
+  }
+  const style = {}
+  let direction
+  if (buttonRect.top >= window.innerHeight / 2) {
+    style.bottom = `${window.innerHeight - buttonRect.top}px`
+    direction = 'above'
+  } else {
+    style.top = `${buttonRect.bottom}px`
+    direction = 'below'
+  }
+  const buttonCenterX = (buttonRect.left + buttonRect.right) / 2
+  let halign
+  if (buttonCenterX > (window.innerWidth * 2) / 3) { // NOSONAR, third of a page width
+    style.right = `${window.innerWidth - buttonRect.right}px`
+    halign = 'right'
+  } else if (buttonCenterX < window.innerWidth / 3) { // NOSONAR, third of a page width
+    style.left = `${buttonRect.left}px`
+    halign = 'left'
+  } else {
+    style.left = `${buttonCenterX}px`
+    halign = 'center'
+  }
+  return { style, direction, halign }
+}
+
+/**
+ * Invokes an item's action via buttonConfig.onClick (if configured) or item.onClick.
+ * For keyboard-triggered activations also dispatches a synthetic MouseEvent so that
+ * any window-level click listeners (e.g. editVertexMode) fire as expected.
+ * The synthetic event is marked _fromKeyboardActivation so handleItemClick can
+ * ignore it and avoid double-activation.
+ *
+ * @param {React.SyntheticEvent} e   - The triggering React event.
+ * @param {object}               item - The item being activated.
+ * @param {object}               ctx  - Dependencies: { buttonConfig, evaluateProp, pluginId, id }.
+ */
+const activateItem = (e, item, { buttonConfig, evaluateProp, pluginId, id }) => {
+  const menuItemConfig = buttonConfig[item.id]
+  if (typeof menuItemConfig?.onClick === 'function') {
+    menuItemConfig.onClick(e, evaluateProp(ctx => ctx, pluginId))
+  } else if (typeof item.onClick === 'function') {
+    item.onClick(e.nativeEvent)
+  } else {
+    // No action
+  }
+  if (e.nativeEvent instanceof KeyboardEvent) {
+    const el = document.getElementById(`${id}-${stringToKebab(item.id)}`)
+    if (el) {
+      const click = new MouseEvent('click', { bubbles: true, cancelable: true })
+      click._fromKeyboardActivation = true
+      el.dispatchEvent(click)
+    }
+  }
+}
+
+/**
+ * Builds the keydown handler for the menu UL. Handles Escape/Tab (close & focus),
+ * ArrowDown/Up (navigate visible items), Home/End (jump to ends),
+ * Enter (activate and close), Space (activate; close only for non-checkbox items).
+ *
+ * @param {object}   p
+ * @param {Array}    p.items           - All menu item descriptors.
+ * @param {number[]} p.visibleIndices  - Indices of non-hidden items.
+ * @param {number}   p.index           - Currently highlighted index.
+ * @param {Function} p.setIndex        - State setter for highlighted index.
+ * @param {Set}      p.disabledButtons - IDs of disabled items.
+ * @param {object}   p.instigator      - DOM node of the trigger button.
+ * @param {Function} p.setIsOpen       - Callback to close the menu.
+ * @param {object}   p.activateCtx     - Context passed through to activateItem.
+ * @returns {Function} onKeyDown handler for the menu element.
+ */
+const createMenuKeyDownHandler = ({ items, visibleIndices, index, setIndex, disabledButtons, instigator, setIsOpen, activateCtx }) => {
+  const closeAndFocus = (e, preventDefault = false) => {
+    if (preventDefault && e?.preventDefault) {
+      e.preventDefault()
+    }
+    instigator.focus()
+    setIsOpen(false)
+  }
+
+  const navigateVisible = (e) => {
+    e.preventDefault()
+    const n = visibleIndices.length
+    if (n === 0) {
+      return
+    }
+    const pos = visibleIndices.indexOf(index)
+    let nextPos
+    if (e.key === 'ArrowDown') {
+      nextPos = pos === -1 ? 0 : (pos + 1) % n
+    } else if (pos === -1) {
+      nextPos = n - 1
+    } else {
+      nextPos = (pos - 1 + n) % n
+    }
+    setIndex(visibleIndices[nextPos])
+  }
+
+  const handleEnter = (e) => {
+    e.preventDefault()
+    const item = items[index]
+    if (item && !disabledButtons.has(item.id)) {
+      activateItem(e, item, activateCtx)
+    }
+    instigator.focus()
+    setIsOpen(false)
+  }
+
+  const handleSpace = (e) => {
+    e.preventDefault()
+    const item = items[index]
+    if (!item || disabledButtons.has(item.id)) {
+      return
+    }
+    activateItem(e, item, activateCtx)
+    if (!(item.isPressed !== undefined || item.pressedWhen)) {
+      instigator.focus()
+      setIsOpen(false)
+    }
+  }
+
+  return (e) => {
+    if (['Escape', 'Esc'].includes(e.key)) {
+      closeAndFocus(e, true)
+      return
+    }
+    if (e.key === 'Tab') {
+      closeAndFocus(e)
+      return
+    }
+    if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+      navigateVisible(e)
+      return
+    }
+    if (e.key === 'Home' && visibleIndices.length) {
+      setIndex(visibleIndices[0])
+      return
+    }
+    if (e.key === 'End' && visibleIndices.length) {
+      setIndex(visibleIndices[visibleIndices.length - 1])
+      return
+    }
+    if (e.key === 'Enter') {
+      handleEnter(e)
+    }
+    if (e.key === ' ') {
+      handleSpace(e)
+    }
+  }
+}
+
+/**
+ * Custom hook encapsulating all state and event-handler logic for PopupMenu.
+ *
+ * @param {object}   params
+ * @param {Array}    params.items            - Menu item descriptors.
+ * @param {Set}      params.hiddenButtons    - IDs of items that should not be visible.
+ * @param {number}   [params.startIndex]     - Exact index to select on mount; takes precedence over startPos.
+ * @param {string}   [params.startPos]       - 'first' | 'last' — initial selection strategy.
+ * @param {object}   params.instigator       - DOM node of the button that opened the menu.
+ * @param {string}   params.instigatorKey    - Key used to look up instigator in buttonRefs.
+ * @param {object}   params.buttonRefs       - Ref map of all registered button DOM nodes.
+ * @param {object}   params.buttonConfig     - Config map that may override item onClick handlers.
+ * @param {Set}      params.disabledButtons  - IDs of currently disabled items.
+ * @param {string}   params.pluginId         - Plugin context passed to evaluateProp.
+ * @param {Function} params.evaluateProp     - Context evaluator from useEvaluateProp.
+ * @param {string}   params.id               - App-level ID prefix for DOM element IDs.
+ * @param {object}   params.menuRef          - Ref to the menu UL element.
+ * @param {Function} params.setIsOpen        - Callback to open/close the menu.
+ * @param {DOMRect}  params.buttonRect       - Bounding rect of the trigger button for positioning.
+ * @returns {{ index: number, handleMenuKeyDown: Function, handleItemClick: Function,
+ *             menuStyle: object, menuDirection: string, menuHAlign: string }}
+ */
+export const usePopupMenu = ({
+  items, hiddenButtons, startIndex, startPos, instigator, instigatorKey,
+  buttonRefs, buttonConfig, disabledButtons, pluginId, evaluateProp, id, menuRef, setIsOpen, buttonRect
+}) => {
+  const visibleIndices = useMemo(() => {
+    const visible = []
+    items.forEach((item, idx) => {
+      if (!hiddenButtons.has(item.id)) {
+        visible.push(idx)
+      }
+    })
+    return visible
+  }, [items, hiddenButtons])
+
+  const [index, setIndex] = useState(() => {
+    if (typeof startIndex === 'number') {
+      return startIndex
+    }
+    if (startPos === 'first') {
+      return visibleIndices[0] ?? -1
+    }
+    if (startPos === 'last') {
+      return visibleIndices[visibleIndices.length - 1] ?? -1
+    }
+    return -1
+  })
+
+  const activateCtx = { buttonConfig, evaluateProp, pluginId, id }
+
+  const handleMenuKeyDown = createMenuKeyDownHandler({
+    items, visibleIndices, index, setIndex, disabledButtons, instigator, setIsOpen, activateCtx
+  })
+
+  const handleOutside = (e) => {
+    if (menuRef.current?.contains(e.target) || buttonRefs.current[instigatorKey]?.contains(e.target)) {
+      return
+    }
+    setIsOpen(false)
+  }
+
+  const handleItemClick = (e, item) => {
+    if (e.nativeEvent._fromKeyboardActivation || disabledButtons.has(item.id)) {
+      return
+    }
+    setIsOpen(false)
+    activateItem(e, item, activateCtx)
+  }
+
+  useEffect(() => {
+    menuRef.current?.focus()
+    if (startPos === 'first') {
+      setIndex(visibleIndices[0] ?? -1)
+    } else if (startPos === 'last') {
+      setIndex(visibleIndices[visibleIndices.length - 1] ?? -1)
+    } else {
+      // No action
+    }
+    const handleResize = () => setIsOpen(false)
+    document.addEventListener('focusin', handleOutside)
+    document.addEventListener('pointerdown', handleOutside)
+    window.addEventListener('resize', handleResize)
+    return () => {
+      document.removeEventListener('focusin', handleOutside)
+      document.removeEventListener('pointerdown', handleOutside)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  const { style: menuStyle, direction: menuDirection, halign: menuHAlign } = getMenuStyle(buttonRect)
+  return { index, handleMenuKeyDown, handleItemClick, menuStyle, menuDirection, menuHAlign }
+}

package/src/App/hooks/useButtonStateEvaluator.js

@@ -1,4 +1,3 @@
-// src/core/hooks/useButtonStateEvaluator.js
 import { useLayoutEffect, useContext } from 'react'
 import { useApp } from '../store/appContext.js'
 import { useConfig } from '../store/configContext.js'
@@ -61,6 +60,12 @@ export function useButtonStateEvaluator (evaluateProp) {
     }
 
     const { dispatch } = appState
+    let dispatchCount = 0
+
+    const trackingDispatch = (action) => {
+      dispatchCount++
+      dispatch(action)
+    }
 
     pluginRegistry.registeredPlugins.forEach(plugin => {
       const buttons = (plugin?.manifest?.buttons ?? []).flatMap(b => [b, ...(b.menuItems ?? [])])
@@ -70,10 +75,15 @@ export function useButtonStateEvaluator (evaluateProp) {
           btn,
           pluginId: plugin.id,
           appState,
-          dispatch,
+          dispatch: trackingDispatch,
           evaluateProp
         })
       )
     })
+
+    if (dispatchCount === 0 && !appState.arePluginsEvaluated) {
+      // No changes and flag not yet set — all button states have settled.
+      dispatch({ type: 'PLUGINS_EVALUATED' })
+    }
   }, [appState, pluginContext, evaluateProp])
 }

package/src/App/hooks/useButtonStateEvaluator.test.js

@@ -22,6 +22,7 @@ describe('useButtonStateEvaluator', () => {
       hiddenButtons: new Set(),
       pressedButtons: new Set(),
       expandedButtons: new Set(),
+      arePluginsEvaluated: true, // stable by default; override in settlement tests
       dispatch: mockDispatch
     }
     useApp.mockReturnValue(mockAppState)
@@ -149,8 +150,6 @@ describe('useButtonStateEvaluator', () => {
   })
 
   it('covers fallback to empty array when manifest or buttons is missing', () => {
-    // Branch 1: Plugin exists but manifest is missing
-    // Branch 2: Manifest exists but buttons is missing
     mockPluginRegistry.registeredPlugins = [
       { id: 'p1' },
       { id: 'p2', manifest: {} },
@@ -158,9 +157,44 @@ describe('useButtonStateEvaluator', () => {
     ]
 
     renderHook(() => useButtonStateEvaluator((fn) => fn()))
+    expect(mockDispatch).not.toHaveBeenCalled()
+  })
+
+  // --- Plugin evaluation settlement ---
+
+  it('dispatches PLUGINS_EVALUATED when no button states changed and arePluginsEvaluated is false', () => {
+    mockAppState.arePluginsEvaluated = false
+    renderHook(() => useButtonStateEvaluator((fn) => fn()))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'PLUGINS_EVALUATED' })
+  })
 
-    // If the fallback (|| []) works, the code continues to the next plugin
-    // without throwing a "cannot read property forEach of undefined" error.
+  it('does not dispatch PLUGINS_EVALUATED when arePluginsEvaluated is already true', () => {
+    mockAppState.arePluginsEvaluated = true
+    renderHook(() => useButtonStateEvaluator((fn) => fn()))
     expect(mockDispatch).not.toHaveBeenCalled()
   })
+
+  it('does not dispatch CLEAR_PLUGINS_EVALUATED or PLUGINS_EVALUATED when button states change', () => {
+    mockAppState.arePluginsEvaluated = false
+    mockPluginRegistry.registeredPlugins = [{
+      id: 'p1',
+      manifest: { buttons: [{ id: 'btn1', hiddenWhen: () => true }] }
+    }]
+
+    renderHook(() => useButtonStateEvaluator((fn) => fn()))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'TOGGLE_BUTTON_HIDDEN', payload: { id: 'btn1', isHidden: true } })
+    expect(mockDispatch).not.toHaveBeenCalledWith({ type: 'CLEAR_PLUGINS_EVALUATED' })
+    expect(mockDispatch).not.toHaveBeenCalledWith({ type: 'PLUGINS_EVALUATED' })
+  })
+
+  it('does not dispatch CLEAR_PLUGINS_EVALUATED when button states change and already evaluated', () => {
+    mockAppState.arePluginsEvaluated = true
+    mockPluginRegistry.registeredPlugins = [{
+      id: 'p1',
+      manifest: { buttons: [{ id: 'btn1', hiddenWhen: () => true }] }
+    }]
+
+    renderHook(() => useButtonStateEvaluator((fn) => fn()))
+    expect(mockDispatch).not.toHaveBeenCalledWith({ type: 'CLEAR_PLUGINS_EVALUATED' })
+  })
 })

package/src/App/hooks/useInterfaceAPI.js

@@ -54,12 +54,16 @@ export const useInterfaceAPI = () => {
       }
     }
 
+    const handleAppVisible = () => dispatchRef.current({ type: 'TOGGLE_APP_VISIBLE', payload: true })
+    const handleAppHidden = () => dispatchRef.current({ type: 'TOGGLE_APP_VISIBLE', payload: false })
     const handleAddPanel = ({ id, config }) => dispatchRef.current({ type: 'ADD_PANEL', payload: { id, config } })
     const handleRemovePanel = (id) => dispatchRef.current({ type: 'REMOVE_PANEL', payload: id })
     const handleShowPanel = (id) => dispatchRef.current({ type: 'OPEN_PANEL', payload: { panelId: id } })
     const handleHidePanel = (id) => dispatchRef.current({ type: 'CLOSE_PANEL', payload: id })
     const handleAddControl = ({ id, config }) => dispatchRef.current({ type: 'ADD_CONTROL', payload: { id, config } })
 
+    eventBus.on(events.APP_VISIBLE, handleAppVisible)
+    eventBus.on(events.APP_HIDDEN, handleAppHidden)
     eventBus.on(events.APP_ADD_BUTTON, handleAddButton)
     eventBus.on(events.APP_TOGGLE_BUTTON_STATE, handleToggleButtonState)
     eventBus.on(events.APP_ADD_PANEL, handleAddPanel)
@@ -69,6 +73,8 @@ export const useInterfaceAPI = () => {
     eventBus.on(events.APP_ADD_CONTROL, handleAddControl)
 
     return () => {
+      eventBus.off(events.APP_VISIBLE, handleAppVisible)
+      eventBus.off(events.APP_HIDDEN, handleAppHidden)
       eventBus.off(events.APP_ADD_BUTTON, handleAddButton)
       eventBus.off(events.APP_TOGGLE_BUTTON_STATE, handleToggleButtonState)
       eventBus.off(events.APP_ADD_PANEL, handleAddPanel)

package/src/App/hooks/useInterfaceAPI.test.js

@@ -0,0 +1,156 @@
+import { renderHook, act } from '@testing-library/react'
+import { useInterfaceAPI } from './useInterfaceAPI.js'
+import { useApp } from '../store/appContext.js'
+import { useService } from '../store/serviceContext.js'
+
+jest.mock('../store/appContext.js')
+jest.mock('../store/serviceContext.js')
+
+const makeEventBus = () => {
+  const handlers = {}
+  return {
+    on: jest.fn((event, handler) => { handlers[event] = handler }),
+    off: jest.fn(),
+    emit: (event, payload) => handlers[event]?.(payload),
+    _handlers: handlers
+  }
+}
+
+describe('useInterfaceAPI', () => {
+  let mockDispatch, mockEventBus, mockState
+
+  beforeEach(() => {
+    mockDispatch = jest.fn()
+    mockEventBus = makeEventBus()
+    mockState = {
+      hiddenButtons: new Set(),
+      disabledButtons: new Set(),
+      pressedButtons: new Set(),
+      expandedButtons: new Set()
+    }
+
+    useApp.mockReturnValue({ dispatch: mockDispatch, ...mockState })
+    useService.mockReturnValue({ eventBus: mockEventBus })
+  })
+
+  it('dispatches ADD_BUTTON on app:addbutton', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:addbutton', { id: 'btn1', config: { label: 'Test' } }))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_BUTTON', payload: { id: 'btn1', config: { label: 'Test' } } })
+  })
+
+  it('also dispatches ADD_BUTTON for each menuItem', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:addbutton', {
+      id: 'btn1',
+      config: {
+        label: 'Parent',
+        menuItems: [
+          { id: 'item1', label: 'Item 1' },
+          { id: 'item2', label: 'Item 2' }
+        ]
+      }
+    }))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_BUTTON', payload: { id: 'btn1', config: expect.objectContaining({ label: 'Parent' }) } })
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_BUTTON', payload: { id: 'item1', config: { id: 'item1', label: 'Item 1', isMenuItem: true } } })
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_BUTTON', payload: { id: 'item2', config: { id: 'item2', label: 'Item 2', isMenuItem: true } } })
+  })
+
+  it('dispatches TOGGLE_APP_VISIBLE true on app:visible', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:visible'))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'TOGGLE_APP_VISIBLE', payload: true })
+  })
+
+  it('dispatches TOGGLE_APP_VISIBLE false on app:hidden', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:hidden'))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'TOGGLE_APP_VISIBLE', payload: false })
+  })
+
+  it('dispatches ADD_PANEL on app:addpanel', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:addpanel', { id: 'panel1', config: { title: 'My Panel' } }))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_PANEL', payload: { id: 'panel1', config: { title: 'My Panel' } } })
+  })
+
+  it('dispatches REMOVE_PANEL on app:removepanel', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:removepanel', 'panel1'))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'REMOVE_PANEL', payload: 'panel1' })
+  })
+
+  it('dispatches OPEN_PANEL on app:showpanel', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:showpanel', 'panel1'))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'OPEN_PANEL', payload: { panelId: 'panel1' } })
+  })
+
+  it('dispatches CLOSE_PANEL on app:hidepanel', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:hidepanel', 'panel1'))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'CLOSE_PANEL', payload: 'panel1' })
+  })
+
+  it('dispatches ADD_CONTROL on app:addcontrol', () => {
+    renderHook(() => useInterfaceAPI())
+    act(() => mockEventBus.emit('app:addcontrol', { id: 'ctrl1', config: { position: 'top-left' } }))
+    expect(mockDispatch).toHaveBeenCalledWith({ type: 'ADD_CONTROL', payload: { id: 'ctrl1', config: { position: 'top-left' } } })
+  })
+
+  describe('handleToggleButtonState', () => {
+    it.each([
+      ['hidden', 'TOGGLE_BUTTON_HIDDEN', 'isHidden'],
+      ['disabled', 'TOGGLE_BUTTON_DISABLED', 'isDisabled'],
+      ['pressed', 'TOGGLE_BUTTON_PRESSED', 'isPressed'],
+      ['expanded', 'TOGGLE_BUTTON_EXPANDED', 'isExpanded']
+    ])('sets %s to explicit boolean value when provided', (prop, actionType, payloadKey) => {
+      renderHook(() => useInterfaceAPI())
+      act(() => mockEventBus.emit('app:togglebuttonstate', { id: 'btn1', prop, value: true }))
+      expect(mockDispatch).toHaveBeenCalledWith({ type: actionType, payload: { id: 'btn1', [payloadKey]: true } })
+
+      mockDispatch.mockClear()
+      act(() => mockEventBus.emit('app:togglebuttonstate', { id: 'btn1', prop, value: false }))
+      expect(mockDispatch).toHaveBeenCalledWith({ type: actionType, payload: { id: 'btn1', [payloadKey]: false } })
+    })
+
+    it.each([
+      ['hidden', 'TOGGLE_BUTTON_HIDDEN', 'isHidden', 'hiddenButtons'],
+      ['disabled', 'TOGGLE_BUTTON_DISABLED', 'isDisabled', 'disabledButtons'],
+      ['pressed', 'TOGGLE_BUTTON_PRESSED', 'isPressed', 'pressedButtons'],
+      ['expanded', 'TOGGLE_BUTTON_EXPANDED', 'isExpanded', 'expandedButtons']
+    ])('toggles %s when no boolean value provided', (prop, actionType, payloadKey, stateKey) => {
+      renderHook(() => useInterfaceAPI())
+
+      // Not in set → toggles to true
+      act(() => mockEventBus.emit('app:togglebuttonstate', { id: 'btn1', prop }))
+      expect(mockDispatch).toHaveBeenCalledWith({ type: actionType, payload: { id: 'btn1', [payloadKey]: true } })
+
+      // Already in set → toggles to false
+      mockDispatch.mockClear()
+      mockState[stateKey].add('btn1')
+      act(() => mockEventBus.emit('app:togglebuttonstate', { id: 'btn1', prop }))
+      expect(mockDispatch).toHaveBeenCalledWith({ type: actionType, payload: { id: 'btn1', [payloadKey]: false } })
+    })
+
+    it('does nothing for unknown prop', () => {
+      renderHook(() => useInterfaceAPI())
+      act(() => mockEventBus.emit('app:togglebuttonstate', { id: 'btn1', prop: 'unknown', value: true }))
+      expect(mockDispatch).not.toHaveBeenCalled()
+    })
+  })
+
+  it('removes all event listeners on unmount', () => {
+    const { unmount } = renderHook(() => useInterfaceAPI())
+    unmount()
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:visible', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:hidden', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:addbutton', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:togglebuttonstate', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:addpanel', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:removepanel', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:showpanel', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:hidepanel', expect.any(Function))
+    expect(mockEventBus.off).toHaveBeenCalledWith('app:addcontrol', expect.any(Function))
+  })
+})