diff --git a/plugins/beta/datasets/src/components/LayersMenu/LayersMenuGroupWrapper.test.jsx b/plugins/beta/datasets/src/components/LayersMenu/LayersMenuGroupWrapper.test.jsx
new file mode 100644
index 00000000..45865a3e
--- /dev/null
+++ b/plugins/beta/datasets/src/components/LayersMenu/LayersMenuGroupWrapper.test.jsx
@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react'
+import { LayersMenuGroupWrapper } from './LayersMenuGroupWrapper'
+
+const child =
Child content
+
+describe('LayersMenuGroupWrapper', () => {
+ describe('without a groupLabel', () => {
+ it('renders children directly without a wrapping div', () => {
+ const { getByTestId, container } = render(
+
{child}
+ )
+ expect(getByTestId('child')).toBeTruthy()
+ expect(container.querySelector('.govuk-form-group')).toBeNull()
+ })
+
+ it('does not render a fieldset when groupLabel is absent', () => {
+ const { container } = render(
+
{child}
+ )
+ expect(container.querySelector('fieldset')).toBeNull()
+ })
+
+ it('does not render a fieldset when groupLabel is an empty string', () => {
+ const { container } = render(
+
{child}
+ )
+ expect(container.querySelector('fieldset')).toBeNull()
+ })
+ })
+
+ describe('with a groupLabel', () => {
+ it('renders the outer wrapper with the correct classes', () => {
+ const { container } = render(
+
{child}
+ )
+ const wrapper = container.querySelector('.govuk-form-group.im-c-datasets-layers-group')
+ expect(wrapper).toBeTruthy()
+ })
+
+ it('renders a fieldset with the correct class', () => {
+ const { container } = render(
+
{child}
+ )
+ expect(container.querySelector('fieldset.im-c-datasets-layers-group__fieldset')).toBeTruthy()
+ })
+
+ it('renders the groupLabel as the legend text', () => {
+ render(
+
{child}
+ )
+ expect(screen.getByText('My Group')).toBeTruthy()
+ })
+
+ it('renders the legend with the correct class', () => {
+ const { container } = render(
+
{child}
+ )
+ expect(container.querySelector('legend.im-c-datasets-layers-group__legend')).toBeTruthy()
+ })
+
+ it('renders children inside the fieldset', () => {
+ const { getByTestId } = render(
+
{child}
+ )
+ expect(getByTestId('child')).toBeTruthy()
+ })
+ })
+})
diff --git a/plugins/beta/datasets/src/components/LayersMenu/LayersMenuRadio.jsx b/plugins/beta/datasets/src/components/LayersMenu/LayersMenuRadio.jsx
new file mode 100644
index 00000000..2b74090e
--- /dev/null
+++ b/plugins/beta/datasets/src/components/LayersMenu/LayersMenuRadio.jsx
@@ -0,0 +1,28 @@
+import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
+
+export const LayersMenuRadio = ({ menuState, menuGroupItem, checked, name, onChange }) => {
+ const itemClass = 'im-c-datasets-layers__item govuk-radios govuk-radios--small"'
+ const { visibleWhen } = menuGroupItem
+ const visible = visibleWhen ? isVisibleWhen(visibleWhen) : true
+ if (!visible) {
+ return null
+ }
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/plugins/beta/datasets/src/components/LayersMenu/LayersMenuRadio.test.jsx b/plugins/beta/datasets/src/components/LayersMenu/LayersMenuRadio.test.jsx
new file mode 100644
index 00000000..55b2c15a
--- /dev/null
+++ b/plugins/beta/datasets/src/components/LayersMenu/LayersMenuRadio.test.jsx
@@ -0,0 +1,105 @@
+import { render, screen, act } from '@testing-library/react'
+import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
+import { LayersMenuRadio } from './LayersMenuRadio'
+
+jest.mock('../../registry/isVisibleWhen.js', () => ({
+ isVisibleWhen: jest.fn()
+}))
+
+const onChange = jest.fn()
+const baseItem = { id: 'radio-1', label: 'Option One' }
+
+beforeEach(() => {
+ isVisibleWhen.mockReturnValue(true)
+ onChange.mockReset()
+})
+
+describe('LayersMenuRadio', () => {
+ describe('visibility', () => {
+ it('renders when visibleWhen is not set', () => {
+ const { container } = render(
+
+ )
+ expect(container.querySelector('input[type="radio"]')).toBeTruthy()
+ })
+
+ it('does not call isVisibleWhen when visibleWhen is not set', () => {
+ render(
)
+ expect(isVisibleWhen).not.toHaveBeenCalled()
+ })
+
+ it('calls isVisibleWhen with the visibleWhen value', () => {
+ const visibleWhen = { menu: ['someValue'] }
+ render(
)
+ expect(isVisibleWhen).toHaveBeenCalledWith(visibleWhen)
+ })
+
+ it('returns null when isVisibleWhen resolves to false', () => {
+ isVisibleWhen.mockReturnValue(false)
+ const { container } = render(
+
+ )
+ expect(container.firstChild).toBeNull()
+ })
+
+ it('renders when isVisibleWhen resolves to true', () => {
+ isVisibleWhen.mockReturnValue(true)
+ const { container } = render(
+
+ )
+ expect(container.querySelector('input[type="radio"]')).toBeTruthy()
+ })
+ })
+
+ describe('rendered output', () => {
+ it('renders the item label text', () => {
+ render(
)
+ expect(screen.getByText('Option One')).toBeTruthy()
+ })
+
+ it('sets the name attribute on the input', () => {
+ const { container } = render(
+
+ )
+ expect(container.querySelector('input').name).toBe('my-radio-group')
+ })
+
+ it('sets checked to true when checked prop is true', () => {
+ const { container } = render(
+
+ )
+ expect(container.querySelector('input').checked).toBe(true)
+ })
+
+ it('sets checked to false when checked prop is false', () => {
+ const { container } = render(
+
+ )
+ expect(container.querySelector('input').checked).toBe(false)
+ })
+
+ it('sets the input value to the item id', () => {
+ const { container } = render(
+
+ )
+ expect(container.querySelector('input').value).toBe('radio-1')
+ })
+
+ it('associates the label with the input via htmlFor', () => {
+ const { container } = render(
+
+ )
+ expect(container.querySelector('label').htmlFor).toBe('radio-1')
+ })
+
+ it('calls onChange when the radio input changes', () => {
+ const { container } = render(
+
+ )
+ const input = container.querySelector('input')
+ const propsKey = Object.keys(input).find(k => k.startsWith('__reactProps'))
+ act(() => { input[propsKey].onChange({ target: { value: 'radio-1' } }) })
+ expect(onChange).toHaveBeenCalledTimes(1)
+ })
+ })
+})
diff --git a/plugins/beta/datasets/src/components/LayersMenu/LayersRadioGroupWrapper.jsx b/plugins/beta/datasets/src/components/LayersMenu/LayersRadioGroupWrapper.jsx
new file mode 100644
index 00000000..493d5143
--- /dev/null
+++ b/plugins/beta/datasets/src/components/LayersMenu/LayersRadioGroupWrapper.jsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
+import { LayersMenuRadio } from './LayersMenuRadio.jsx'
+
+export const LayersRadioGroupWrapper = ({ pluginState, menuGroup }) => {
+ const { id, items, visibleWhen } = menuGroup
+ const visible = visibleWhen ? isVisibleWhen(visibleWhen) : true
+ if (!visible) {
+ return null
+ }
+
+ const { menuState, dispatch } = pluginState
+ const [value, setValue] = useState(menuState[id])
+ const handleChange = (event) => {
+ setValue(event.target.value)
+ dispatch({ type: 'UPDATE_MENU_STATE', payload: { [id]: event.target.value } })
+ }
+
+ const wrapperClass = 'govuk-form-group im-c-datasets-layers-group'
+ return (
+
+
+
+ )
+}
diff --git a/plugins/beta/datasets/src/components/LayersMenu/LayersRadioGroupWrapper.test.jsx b/plugins/beta/datasets/src/components/LayersMenu/LayersRadioGroupWrapper.test.jsx
new file mode 100644
index 00000000..24095d3e
--- /dev/null
+++ b/plugins/beta/datasets/src/components/LayersMenu/LayersRadioGroupWrapper.test.jsx
@@ -0,0 +1,136 @@
+import { render, screen, act } from '@testing-library/react'
+import { isVisibleWhen } from '../../registry/isVisibleWhen.js'
+import { LayersRadioGroupWrapper } from './LayersRadioGroupWrapper'
+
+jest.mock('../../registry/isVisibleWhen.js', () => ({
+ isVisibleWhen: jest.fn()
+}))
+
+let capturedOnChange = null
+
+jest.mock('./LayersMenuRadio.jsx', () => ({
+ LayersMenuRadio: ({ menuGroupItem, checked, name, onChange }) => {
+ capturedOnChange = onChange
+ return (
+
+ )
+ }
+}))
+
+const makePluginState = (menuState = {}) => ({
+ menuState,
+ dispatch: jest.fn()
+})
+
+const baseGroup = {
+ id: 'group-1',
+ label: 'My Group',
+ items: [{ id: 'opt-a' }, { id: 'opt-b' }]
+}
+
+beforeEach(() => {
+ isVisibleWhen.mockClear()
+ isVisibleWhen.mockReturnValue(true)
+ capturedOnChange = null
+})
+
+describe('LayersRadioGroupWrapper', () => {
+ describe('visibility', () => {
+ it('returns null when isVisibleWhen resolves to false', () => {
+ isVisibleWhen.mockReturnValue(false)
+ const { container } = render(
+
+ )
+ expect(container.firstChild).toBeNull()
+ })
+
+ it('renders when visibleWhen is not set', () => {
+ const { container } = render(
+
+ )
+ expect(container.querySelector('.govuk-form-group')).toBeTruthy()
+ })
+
+ it('does not call isVisibleWhen when visibleWhen is not set', () => {
+ render(
)
+ expect(isVisibleWhen).not.toHaveBeenCalled()
+ })
+
+ it('calls isVisibleWhen with the visibleWhen value', () => {
+ const visibleWhen = { menu: ['someValue'] }
+ render(
)
+ expect(isVisibleWhen).toHaveBeenCalledWith(visibleWhen)
+ })
+ })
+
+ describe('rendered output', () => {
+ it('renders the group label as the legend', () => {
+ render(
)
+ expect(screen.getByText('My Group')).toBeTruthy()
+ })
+
+ it('renders a LayersMenuRadio for each item', () => {
+ const { getAllByTestId } = render(
+
+ )
+ expect(getAllByTestId('layers-menu-radio')).toHaveLength(2)
+ })
+
+ it('passes the group id as the name to each radio item', () => {
+ const { getAllByTestId } = render(
+
+ )
+ getAllByTestId('layers-menu-radio').forEach(radio => {
+ expect(radio.dataset.name).toBe('group-1')
+ })
+ })
+ })
+
+ describe('checked state', () => {
+ it('marks the item matching menuState as checked', () => {
+ const { getAllByTestId } = render(
+
+ )
+ const radios = getAllByTestId('layers-menu-radio')
+ expect(radios[0].dataset.checked).toBe('true')
+ expect(radios[1].dataset.checked).toBe('false')
+ })
+
+ it('marks no item as checked when menuState has no value for the group', () => {
+ const { getAllByTestId } = render(
+
+ )
+ getAllByTestId('layers-menu-radio').forEach(radio => {
+ expect(radio.dataset.checked).toBe('false')
+ })
+ })
+ })
+
+ describe('handleChange', () => {
+ it('dispatches UPDATE_MENU_STATE with the selected item id', () => {
+ const pluginState = makePluginState({ 'group-1': 'opt-a' })
+ render(
)
+ act(() => { capturedOnChange({ target: { value: 'opt-b' } }) })
+ expect(pluginState.dispatch).toHaveBeenCalledWith({
+ type: 'UPDATE_MENU_STATE',
+ payload: { 'group-1': 'opt-b' }
+ })
+ })
+
+ it('dispatches using the group id as the payload key', () => {
+ const group = { ...baseGroup, id: 'another-group' }
+ const pluginState = makePluginState({ 'another-group': 'opt-a' })
+ render(
)
+ act(() => { capturedOnChange({ target: { value: 'opt-b' } }) })
+ expect(pluginState.dispatch).toHaveBeenCalledWith({
+ type: 'UPDATE_MENU_STATE',
+ payload: { 'another-group': 'opt-b' }
+ })
+ })
+ })
+})
diff --git a/plugins/beta/datasets/src/initialise/DatasetsInit.jsx b/plugins/beta/datasets/src/initialise/DatasetsInit.jsx
index 36964be1..81f88be4 100755
--- a/plugins/beta/datasets/src/initialise/DatasetsInit.jsx
+++ b/plugins/beta/datasets/src/initialise/DatasetsInit.jsx
@@ -3,6 +3,7 @@ import { useEffect, useRef } from 'react'
import { EVENTS } from '../../../../../src/config/events.js'
import { initialiseDatasets } from './initialiseDatasets.js'
import { datasetRegistry } from '../registry/datasetRegistry.js'
+import { setMenuState } from '../registry/isVisibleWhen.js'
import { attachGlobalState } from '../registry/globalDataset.js'
import { loadLayerAdapter, layerAdapter } from '../adapters/loadLayerAdapter.js'
@@ -49,6 +50,8 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m
initDatasets()
}, [isBaseMapReady, appState.mode])
+ useEffect(() => setMenuState(pluginState.menuState), [pluginState.menuState])
+
useEffect(() => datasetRegistry.attach(pluginState.mappedDatasets, pluginState.orderedDatasets),
[pluginState.mappedDatasets, pluginState.orderedDatasets])
diff --git a/plugins/beta/datasets/src/initialise/defaults.js b/plugins/beta/datasets/src/initialise/defaults.js
index 7153f2dd..62b6e66e 100644
--- a/plugins/beta/datasets/src/initialise/defaults.js
+++ b/plugins/beta/datasets/src/initialise/defaults.js
@@ -7,7 +7,6 @@ const datasetDefaults = {
style: {
stroke: '#d4351c',
strokeWidth: 2,
- fill: 'transparent',
symbolDescription: 'red outline'
}
}
diff --git a/plugins/beta/datasets/src/initialise/defaults.test.js b/plugins/beta/datasets/src/initialise/defaults.test.js
index 626add11..6e25a271 100644
--- a/plugins/beta/datasets/src/initialise/defaults.test.js
+++ b/plugins/beta/datasets/src/initialise/defaults.test.js
@@ -15,7 +15,6 @@ describe('datasetDefaults', () => {
expect(datasetDefaults.style).toMatchObject({
stroke: '#d4351c',
strokeWidth: 2,
- fill: 'transparent',
symbolDescription: 'red outline'
})
})
diff --git a/plugins/beta/datasets/src/initialise/initialiseDatasets.js b/plugins/beta/datasets/src/initialise/initialiseDatasets.js
index ecd97f1f..cda72920 100644
--- a/plugins/beta/datasets/src/initialise/initialiseDatasets.js
+++ b/plugins/beta/datasets/src/initialise/initialiseDatasets.js
@@ -3,6 +3,9 @@ import { createDynamicSource } from '../fetch/createDynamicSource.js'
import { applyDatasetDefaults, datasetDefaults } from './defaults.js'
import { mappedDatasetsReducer } from '../reducers/mappedDatasetsReducer.js'
import { datasetRegistry } from '../registry/datasetRegistry.js'
+import { setMenuState } from '../registry/isVisibleWhen.js'
+import { buildMenuState } from '../reducers/menuStateReducer.js'
+import { datasetsToMenu } from '../reducers/datasetsToMenu.js'
export const initialiseDatasets = ({
adapter,
@@ -28,7 +31,10 @@ export const initialiseDatasets = ({
datasetRegistry.attachCreateDataset(adapter.createDataset)
}
datasetRegistry.attach(mappedDatasets, orderedDatasets, mapStyle)
- adapter.init(mapStyle).then(() => {
+ const menu = pluginConfig.menu || datasetsToMenu({ datasets: processedDatasets })
+ setMenuState(buildMenuState(menu)) // Must be called before adapter.init so that menuState is set before any datasets are checked for visibility
+
+ adapter.init().then(() => {
datasetRegistry.forEachDataset(registryDataset => {
if (!registryDataset.hasDynamicGeoJSON) {
return
@@ -43,6 +49,7 @@ export const initialiseDatasets = ({
})
adapter.attachDynamicSources(dynamicSources)
// TODO - apply dynamic source defaults here, and include in mappedDatasets
+ dispatch({ type: 'SET_MENU', payload: { menu } })
dispatch({ type: 'SET_DATASETS', payload: { datasets: processedDatasets, mappedDatasets, orderedDatasets } })
eventBus.emit('datasets:ready')
})
diff --git a/plugins/beta/datasets/src/initialise/initialiseDatasets.test.js b/plugins/beta/datasets/src/initialise/initialiseDatasets.test.js
index 78302805..9b1005dc 100644
--- a/plugins/beta/datasets/src/initialise/initialiseDatasets.test.js
+++ b/plugins/beta/datasets/src/initialise/initialiseDatasets.test.js
@@ -61,7 +61,7 @@ describe('initialiseDatasets', () => {
it('calls adapter.init with mapStyle', () => {
const args = makeArgs()
initialiseDatasets(args)
- expect(args.adapter.init).toHaveBeenCalledWith(args.mapStyle)
+ expect(args.adapter.init).toHaveBeenCalledWith()
})
it('attaches mappedDatasets to datasetRegistry', () => {
diff --git a/plugins/beta/datasets/src/reducers/menuStateReducer.js b/plugins/beta/datasets/src/reducers/menuStateReducer.js
new file mode 100644
index 00000000..839e771b
--- /dev/null
+++ b/plugins/beta/datasets/src/reducers/menuStateReducer.js
@@ -0,0 +1,9 @@
+export const buildMenuState = (menu) => {
+ const menuState = {}
+ menu.forEach(menuGroup => {
+ if (menuGroup.type === 'radio') {
+ menuState[menuGroup.id] = menuGroup.value || menuGroup.items?.[0].value
+ }
+ })
+ return menuState
+}
diff --git a/plugins/beta/datasets/src/reducers/pluginState.js b/plugins/beta/datasets/src/reducers/pluginState.js
index cee81ca7..33f894a7 100755
--- a/plugins/beta/datasets/src/reducers/pluginState.js
+++ b/plugins/beta/datasets/src/reducers/pluginState.js
@@ -1,4 +1,5 @@
-import { datasetsToMenu, addDatasetToMenu, removeDatasetsFromMenu } from './datasetsToMenu.js'
+import { addDatasetToMenu, removeDatasetsFromMenu } from './datasetsToMenu.js'
+import { buildMenuState } from './menuStateReducer.js'
import { mappedDatasetsReducer } from './mappedDatasetsReducer.js'
import { logger } from '../../../../../src/services/logger.js'
@@ -15,7 +16,9 @@ const initialState = {
items: [],
hasGroups: false
},
- actionsArray: []
+ actionsArray: [],
+ menu: [],
+ menuState: {}
}
const validateDatasetExists = (state, datasetId, prefix, suffix = 'not found') => {
@@ -41,14 +44,31 @@ const setGlobalState = (state, payload) => {
})
}
+const updateMenuState = (state, payload) => {
+ return addAction('applyGlobalVisibility', [], {
+ ...state,
+ menuState: { ...state.menuState, ...payload }
+ })
+}
+
+const setMenu = (state, payload) => {
+ const { menu } = payload
+ // build the initial menuState for radios from the menu
+ const menuState = buildMenuState(menu)
+ return {
+ ...state,
+ menu,
+ menuState
+ }
+}
+
const setDatasets = (state, payload) => {
- const { datasets, mappedDatasets, orderedDatasets } = payload
- const menu = payload.menu || datasetsToMenu({ datasets })
+ const { mappedDatasets, orderedDatasets } = payload
+
return {
...state,
mappedDatasets,
- orderedDatasets,
- menu
+ orderedDatasets
}
}
@@ -93,6 +113,9 @@ const setDatasetVisibility = (state, payload) => {
if (!validateDatasetExists(state, datasetId, 'setDatasetVisibility')) {
return state
}
+ if (state.mappedDatasets[datasetId].visible === visible) {
+ return state
+ }
return addAction('applyDatasetVisibility', [datasetId, visible], {
...state,
@@ -197,7 +220,9 @@ const actions = {
HIDE_FEATURES: hideFeatures,
SHOW_FEATURES: showFeatures,
REMOVE_ADAPTER_ACTIONS: removeAdapterActions,
- SET_GLOBAL_STATE: setGlobalState
+ SET_GLOBAL_STATE: setGlobalState,
+ SET_MENU: setMenu,
+ UPDATE_MENU_STATE: updateMenuState
}
export {
diff --git a/plugins/beta/datasets/src/reducers/pluginState.test.js b/plugins/beta/datasets/src/reducers/pluginState.test.js
index 9a608ef8..c0d92753 100644
--- a/plugins/beta/datasets/src/reducers/pluginState.test.js
+++ b/plugins/beta/datasets/src/reducers/pluginState.test.js
@@ -54,13 +54,12 @@ describe('SET_DATASETS', () => {
const payload = {
datasets: [{ id: 'parks', label: 'Parks', showInMenu: true }],
mappedDatasets: { parks: { id: 'parks', label: 'Parks' } },
- orderedDatasets: ['parks'],
- menu: [{ id: 'parks', label: 'Parks', type: 'item' }]
+ orderedDatasets: ['parks']
}
const result = actions.SET_DATASETS(state, payload)
expect(result.mappedDatasets).toEqual(payload.mappedDatasets)
expect(result.orderedDatasets).toEqual(payload.orderedDatasets)
- expect(result.menu).toEqual(payload.menu)
+ expect(result.menu).toEqual([])
})
it('derives menu from datasets when menu is not in payload', () => {
diff --git a/plugins/beta/datasets/src/registry/dataset.js b/plugins/beta/datasets/src/registry/dataset.js
index a8bd7423..36d1122d 100644
--- a/plugins/beta/datasets/src/registry/dataset.js
+++ b/plugins/beta/datasets/src/registry/dataset.js
@@ -1,4 +1,5 @@
import { datasetRegistry } from './datasetRegistry.js'
+import { isVisibleWhen } from './isVisibleWhen.js'
import { hasCustomVisualStyle } from '../initialise/defaults.js'
import { hasPattern } from '../../../../../src/utils/patternUtils.js'
import { DynamicGeoJson } from './dynamicGeoJson.js'
@@ -96,9 +97,9 @@ export class Dataset {
get esriStyleLayerId () { return this._datasetDefinition.esriStyleLayerId }
get visibility () {
- const visible = this.visible
- if (visible && this.visibleWhen?.mapStyleId) {
- return this.visibleWhen?.mapStyleId.includes(datasetRegistry.mapStyle.id) ? 'visible' : 'none'
+ const { visible, visibleWhen } = this
+ if (visible && visibleWhen) {
+ return isVisibleWhen(visibleWhen) ? 'visible' : 'none'
}
return visible ? 'visible' : 'none'
}
diff --git a/plugins/beta/datasets/src/registry/isVisibleWhen.js b/plugins/beta/datasets/src/registry/isVisibleWhen.js
new file mode 100644
index 00000000..b2fd1cb9
--- /dev/null
+++ b/plugins/beta/datasets/src/registry/isVisibleWhen.js
@@ -0,0 +1,55 @@
+import { datasetRegistry } from './datasetRegistry.js'
+
+let _menuState = {}
+export const setMenuState = (menuState) => (_menuState = menuState)
+
+const _isVisibleWhenMenuCheck = (menuVisibleWhen) => {
+ for (const [key, valueArray] of Object.entries(menuVisibleWhen)) {
+ const menuValue = _menuState[key]
+ if (!valueArray.includes(menuValue)) {
+ return false
+ }
+ }
+ return true
+}
+
+const _isVisibleWhenMapStyleCheck = (visibleWhenValue) => {
+ const mapStylesArray = Array.isArray(visibleWhenValue) ? visibleWhenValue : [visibleWhenValue]
+ return mapStylesArray.includes(_getMapStyleId())
+}
+
+// exported so it can be mocked and overridden when testing
+export const _getMapStyleId = () => datasetRegistry.mapStyle.id
+
+/**
+ * receives a visibleWhen boolean or object
+ * and returns a boolean indicating whether the dataset should be visible
+ * if visibleWhen is undefined, it returns true
+ * if visibleWhen is a boolean, it returns that boolean
+ * if visibleWhen is an object, it checks the properties of the object, against the relevant pluginState properties,
+ * and returns true if all properties are satisfied:
+ * @param {boolean|object} visibleWhen - the visibleWhen property of a dataset
+ * @returns {boolean} - true if the dataset should be visible, false otherwise
+ */
+export const isVisibleWhen = (visibleWhen) => {
+ if (visibleWhen === undefined || visibleWhen === null) {
+ return true
+ }
+ if (typeof visibleWhen === 'boolean') {
+ return visibleWhen
+ }
+ if (typeof visibleWhen === 'object') {
+ // check each property of the visibleWhen object against the relevant pluginState property
+ for (const [visibleWhenKey, visibleWhenValue] of Object.entries(visibleWhen)) {
+ if (visibleWhenKey === 'mapStyleId' && !_isVisibleWhenMapStyleCheck(visibleWhenValue)) {
+ return false
+ }
+ if (visibleWhenKey === 'menu' && !_isVisibleWhenMenuCheck(visibleWhenValue)) {
+ return false
+ }
+ }
+ return true
+ }
+ // Fallback to true if visibleWhen is incorrectly configured
+ return true
+}
diff --git a/plugins/beta/datasets/src/registry/isVisibleWhen.test.js b/plugins/beta/datasets/src/registry/isVisibleWhen.test.js
new file mode 100644
index 00000000..8d35bdd0
--- /dev/null
+++ b/plugins/beta/datasets/src/registry/isVisibleWhen.test.js
@@ -0,0 +1,67 @@
+import { isVisibleWhen, setMenuState } from './isVisibleWhen.js'
+import { datasetRegistry } from './datasetRegistry.js'
+
+describe('isVisibleWhen', () => {
+ beforeEach(() => {
+ // reset menu state before each test
+ setMenuState({})
+ })
+
+ it('returns true if visibleWhen is undefined', () => {
+ expect(isVisibleWhen(undefined)).toBe(true)
+ })
+
+ it('returns true if visibleWhen is null', () => {
+ expect(isVisibleWhen(null)).toBe(true)
+ })
+
+ it('returns the boolean value if visibleWhen is a boolean', () => {
+ expect(isVisibleWhen(true)).toBe(true)
+ expect(isVisibleWhen(false)).toBe(false)
+ })
+
+ it('returns true if all properties of visibleWhen object are satisfied', () => {
+ setMenuState({ datasets: 'floodZones', timeframe: 'climateChange' })
+ const visibleWhen = { menu: { datasets: ['floodZones'], timeframe: ['climateChange'] } }
+ expect(isVisibleWhen(visibleWhen)).toBe(true)
+ })
+
+ it('returns false if any property of visibleWhen object is not satisfied', () => {
+ setMenuState({ datasets: 'floodZones', timeframe: 'climateChange' })
+ const visibleWhen = { menu: { datasets: ['floodZones'], timeframe: ['presentDay'] } }
+ expect(isVisibleWhen(visibleWhen)).toBe(false)
+ })
+
+ it('returns true if mapStyleId is satisfied', () => {
+ const mapStyleId = 'outdoor'
+ datasetRegistry.attach([], [], { id: mapStyleId })
+ const visibleWhen = { mapStyleId }
+ expect(isVisibleWhen(visibleWhen)).toBe(true)
+ })
+
+ it('returns false if mapStyleId is not satisfied', () => {
+ const mapStyleId = 'outdoor'
+ datasetRegistry.attach([], [], { id: mapStyleId })
+ const visibleWhen = { mapStyleId: 'dark' }
+ expect(isVisibleWhen(visibleWhen)).toBe(false)
+ })
+
+ it('returns true if mapStyleId is an array and one of the values is satisfied', () => {
+ const mapStyleId = 'outdoor'
+ datasetRegistry.attach([], [], { id: mapStyleId })
+ const visibleWhen = { mapStyleId: ['dark', mapStyleId] }
+ expect(isVisibleWhen(visibleWhen)).toBe(true)
+ })
+
+ it('returns false if mapStyleId is an array and none of the values are satisfied', () => {
+ const mapStyleId = 'outdoor'
+ datasetRegistry.attach([], [], { id: mapStyleId })
+ const visibleWhen = { mapStyleId: ['dark', 'black-and-white'] }
+ expect(isVisibleWhen(visibleWhen)).toBe(false)
+ })
+
+ it('returns true if visibleWhen is incorrectly configured', () => {
+ const visibleWhen = 'incorrectly-configured'
+ expect(isVisibleWhen(visibleWhen)).toBe(true)
+ })
+})