@cdc/dashboard 4.24.11 → 4.24.12-2

package/src/helpers/tests/apiFilterHelpers.test.ts

@@ -3,7 +3,9 @@ import {
   getToFetch,
   getFilterValues,
   getLoadingFilterMemo,
-  getParentParams
+  getParentParams,
+  setActiveNestedDropdown,
+  setActiveMultiDropdown
 } from '../apiFilterHelpers'
 import _ from 'lodash'
 import type { APIFilterDropdowns } from '../../components/DashboardFilters'
@@ -18,7 +20,7 @@ describe('getLoadingFilterMemo', () => {
     }
     const expectedOutput: APIFilterDropdowns = {
       endpoint1: { text: 'text1', value: 'value1' },
-      endpoint2: null
+      endpoint2: undefined
     }
     expect(getLoadingFilterMemo(sharedAPIFilters, apiFilterDropdowns)).toEqual(expectedOutput)
   })
@@ -36,8 +38,8 @@ describe('getLoadingFilterMemo', () => {
     const sharedAPIFilters = ['endpoint1', 'endpoint2']
     const apiFilterDropdowns: APIFilterDropdowns = {}
     const expectedOutput: APIFilterDropdowns = {
-      endpoint1: null,
-      endpoint2: null
+      endpoint1: undefined,
+      endpoint2: undefined
     }
     expect(getLoadingFilterMemo(sharedAPIFilters, apiFilterDropdowns)).toEqual(expectedOutput)
   })
@@ -280,6 +282,85 @@ describe('getToFetch', () => {
   })
 })
 
+describe('setActiveNestedDropdown', () => {
+  const dropdownOptions = [
+    { value: 'option1', subOptions: [{ value: 'subOption1' }], label: 'Option 1' },
+    { value: 'option2', subOptions: [{ value: 'subOption2' }], label: 'Option 2' }
+  ]
+
+  const sharedFilters = [
+    {
+      key: 'filter1',
+      active: null,
+      filterStyle: FILTER_STYLE.nestedDropdown,
+      subGrouping: {},
+      queuedActive: null,
+      parents: []
+    },
+    {
+      key: 'filter2',
+      active: null,
+      setByQueryParameter: 'group',
+      filterStyle: FILTER_STYLE.nestedDropdown,
+      subGrouping: { setByQueryParameter: 'subgroup' },
+      queuedActive: null,
+      parents: ['filter1']
+    }
+  ] as SharedFilter[]
+
+  it('should set the active value for a nested dropdown', () => {
+    setActiveNestedDropdown(dropdownOptions, sharedFilters[0])
+    expect(sharedFilters[0].active).toEqual('option1')
+    expect(sharedFilters[0].subGrouping.active).toEqual('subOption1')
+  })
+  it('should set the active value for nested dropdown with query parameters', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com?group=option2&subgroup=subOption2')
+    setActiveNestedDropdown(dropdownOptions, sharedFilters[1])
+    expect(sharedFilters[1].active).toEqual('option2')
+    expect(sharedFilters[1].subGrouping.active).toEqual('subOption2')
+  })
+})
+
+describe('setActiveMultiDropdown', () => {
+  const dropdownOptions = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' }
+  ]
+
+  const sharedFilters = [
+    {
+      key: 'filter1',
+      active: null,
+      filterStyle: FILTER_STYLE.multiSelect,
+      queuedActive: null,
+      parents: []
+    },
+    {
+      key: 'filter2',
+      active: null,
+      filterStyle: FILTER_STYLE.multiSelect,
+      setByQueryParameter: 'group',
+      queuedActive: null,
+      parents: ['filter1']
+    }
+  ] as SharedFilter[]
+  it('should set the active value for a multi dropdown', () => {
+    setActiveMultiDropdown(dropdownOptions, sharedFilters[0])
+    expect(sharedFilters[0].active).toEqual(['option1'])
+  })
+  it('should set the active value for a multi dropdown with queryParameters', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com?group=option1&group=option2')
+    setActiveMultiDropdown(dropdownOptions, sharedFilters[1])
+    expect(sharedFilters[1].active).toEqual(['option1', 'option2'])
+    delete window.location
+    window.location = new URL('https://www.example.com?group=option1,option2')
+    setActiveMultiDropdown(dropdownOptions, sharedFilters[1])
+    expect(sharedFilters[1].active).toEqual(['option1', 'option2'])
+  })
+})
+
 describe('setAutoLoadDefaultValue', () => {
   const dropdownOptions = [
     { value: 'option1', label: 'Option 1' },

package/src/helpers/tests/loadAPIFiltersWrapper.test.ts

@@ -91,7 +91,7 @@ describe('loadAPIFiltersFactory', () => {
   it('loadAPIFilters() load dropdowns for children when parent is selected', async () => {
     const newSharedFilters = await loadAPIFilters(sharedFilters, apiFilterDropdowns)
     expect(dispatch).toHaveBeenCalledTimes(1)
-    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(1)
+    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(2)
 
     const expectedDropdowns = {
       'cdc.gov/filters/Quarter': [
@@ -133,7 +133,7 @@ describe('loadAPIFiltersFactory', () => {
     sharedFilters[1].active = 'Q1'
     const newSharedFilters = await loadAPIFilters(sharedFilters, apiFilterDropdowns)
     expect(dispatch).toHaveBeenCalledTimes(1)
-    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(1)
+    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(2)
 
     const expectedDropdowns = {
       'cdc.gov/filters/Quarter': [
@@ -214,8 +214,13 @@ describe('loadAPIFiltersFactory', () => {
     }
     const newSharedFilters = await loadAPIFilters(_sharedFilters, apiDropdownsLoaded)
     expect(dispatch).toHaveBeenCalledTimes(1)
-    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(1)
+    expect(setAPIFilterDropdowns).toHaveBeenCalledTimes(2)
 
     expect(newSharedFilters[2].active).toEqual(['2020', '2021'])
   })
+  it('loads All filters if loadAll is true', async () => {
+    const _sharedFilters = _.cloneDeep(sharedFilters)
+    const newSharedFilters = await loadAPIFilters(_sharedFilters, {}, true)
+    expect(newSharedFilters[2].active).toEqual([2020])
+  })
 })

package/src/helpers/tests/reloadURLHelpers.test.ts

@@ -203,30 +203,36 @@ describe('filterUsedByDataUrl', () => {
   it('should return true when filter has no usedBy property', () => {
     const filter = { datasetKey: 'dataset1' }
     const datasetKey = 'dataset1'
-    expect(filterUsedByDataUrl(filter, datasetKey, visualizations)).toBe(true)
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [])).toBe(true)
   })
 
   it('should return true when filter has an empty usedBy array', () => {
     const filter = { usedBy: [], datasetKey: 'dataset1' }
     const datasetKey = 'dataset1'
-    expect(filterUsedByDataUrl(filter, datasetKey, visualizations)).toBe(true)
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [])).toBe(true)
   })
 
   it('should return true when filter has usedBy array with visualization keys that match the datasetKey', () => {
     const filter = { usedBy: ['viz1', 'viz3'], datasetKey: 'dataset1' }
     const datasetKey = 'dataset1'
-    expect(filterUsedByDataUrl(filter, datasetKey, visualizations)).toBe(true)
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [])).toBe(true)
   })
 
   it('should return false when filter has usedBy array with visualization keys that do not match the datasetKey', () => {
     const filter = { usedBy: ['viz2'], datasetKey: 'dataset1' }
     const datasetKey = 'dataset1'
-    expect(filterUsedByDataUrl(filter, datasetKey, visualizations)).toBe(false)
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [])).toBe(false)
   })
 
   it('should return true when filter has usedBy array with a mix of matching and non-matching visualization keys', () => {
     const filter = { usedBy: ['viz1', 'viz2'], datasetKey: 'dataset1' }
     const datasetKey = 'dataset1'
-    expect(filterUsedByDataUrl(filter, datasetKey, visualizations)).toBe(true)
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [])).toBe(true)
+  })
+
+  it('should return true when used by a row', () => {
+    const filter = { usedBy: ['viz1', 'viz2', 2], datasetKey: 'dataset1' }
+    const datasetKey = 'dataset1'
+    expect(filterUsedByDataUrl(filter, datasetKey, visualizations, [{}, {}, { dataKey: 'dataset1' }])).toBe(true)
   })
 })

package/src/helpers/tests/shouldLoadAllFilters.test.ts

@@ -0,0 +1,117 @@
+import { shouldLoadAllFilters } from '../shouldLoadAllFilters'
+
+describe('shouldLoadAllFilters', () => {
+  it('returns false if not autoloading', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com')
+    expect(shouldLoadAllFilters({ rows: [], visualizations: {}, dashboard: {} })).toBe(false)
+  })
+  it('returns true if missing data', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com?cove-auto-load=true')
+    const config = {
+      dashboard: {},
+      visualizations: {
+        abc: {
+          dataKey: 'abcd'
+        }
+      },
+      rows: [],
+      datasets: {
+        abcd: {
+          data: []
+        }
+      }
+    }
+    expect(shouldLoadAllFilters(config)).toBe(true)
+    const config2 = {
+      multiDashboards: [
+        {
+          dashboard: {},
+          visualizations: {
+            abc: {
+              dataKey: 'abcd'
+            }
+          },
+          rows: [],
+          datasets: {
+            abcd: {
+              data: []
+            }
+          }
+        }
+      ],
+      datasets: {
+        abcd: {
+          data: []
+        }
+      },
+      activeDashboard: 0
+    }
+    expect(shouldLoadAllFilters(config2)).toBe(true)
+  })
+  it('returns false if no missing data', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com?cove-auto-load=true')
+    const config = {
+      dashboard: {},
+      visualizations: {
+        abc: {
+          dataKey: 'abcd'
+        }
+      },
+      rows: [],
+      datasets: {
+        abcd: {
+          data: [{}]
+        }
+      }
+    }
+    expect(shouldLoadAllFilters(config)).toBe(false)
+  })
+  it('returns true when theres an autoloading filter and no apply filters', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com')
+    const config = {
+      dashboard: {},
+      visualizations: {
+        abc: {
+          visualizationType: 'dashboardFilters',
+          dataKey: 'abcd',
+          autoLoad: true
+        }
+      },
+      rows: [],
+      datasets: {
+        abcd: { data: [] }
+      }
+    }
+    expect(shouldLoadAllFilters(config)).toBe(true)
+  })
+
+  it('returns false when theres an autoloading filter and apply filters', () => {
+    delete window.location
+    window.location = new URL('https://www.example.com')
+    const config = {
+      dashboard: {},
+      visualizations: {
+        abc: {
+          visualizationType: 'dashboardFilters',
+          dataKey: 'abcd',
+          autoLoad: true
+        },
+        abc2: {
+          visualizationType: 'dashboardFilters',
+          dataKey: 'abcde',
+          filterBehavior: 'Apply Button'
+        }
+      },
+      rows: [],
+      datasets: {
+        abcd: { data: [] },
+        abcde: { data: [] }
+      }
+    }
+    expect(shouldLoadAllFilters(config)).toBe(false)
+  })
+})

package/src/store/dashboard.reducer.ts

@@ -150,7 +150,8 @@ const reducer = (state: DashboardState, action: DashboardActions): DashboardStat
     case 'SWITCH_CONFIG': {
       const slot = action.payload
       const newConfigFields = state.config.multiDashboards[slot]
-      return { ...state, config: { ...state.config, ...newConfigFields, activeDashboard: slot } }
+      const _newDatasets = _.cloneDeep(state.data)
+      return { ...state, data: _newDatasets, config: { ...state.config, ...newConfigFields, activeDashboard: slot } }
     }
     case 'TOGGLE_ROW': {
       const { rowIndex, colIndex } = action.payload