@cdc/dashboard 4.26.3 → 4.26.5

package/src/_stories/Dashboard.Regression.stories.tsx

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, within } from 'storybook/test'
+import {
+  assertVisualizationRendered,
+  getDisplayValue,
+  performAndAssert,
+  waitForOptionsToPopulate
+} from '@cdc/core/helpers/testing'
+import Dashboard from '../CdcDashboard'
+import StaleDatasetKeysConfig from '../../examples/dashboard-stale-dataset-keys.json'
+import MissingDatasetsSingleConfig from '../../examples/dashboard-missing-datasets-single.json'
+import MissingDatasetsMultiConfig from '../../examples/dashboard-missing-datasets-multi.json'
+import TieredFilterConfig from '../../examples/dashboard-tiered-filter-regression.json'
+import MultiDashboardVersionConfig from '../../examples/dashboard-multi-dashboard-version-regression.json'
+
+const meta: Meta<typeof Dashboard> = {
+  title: 'Components/Pages/Dashboard/Regression Smoke',
+  component: Dashboard
+}
+
+export default meta
+type Story = StoryObj<typeof Dashboard>
+
+const expectNoCrashText = (canvasElement: HTMLElement) => {
+  expect(canvasElement.textContent).not.toContain('Cannot read properties of undefined')
+  expect(canvasElement.textContent).not.toContain('Something went wrong')
+}
+
+export const Stale_Dataset_Keys_Are_Skipped_Safely: Story = {
+  args: {
+    config: StaleDatasetKeysConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expectNoCrashText(canvasElement)
+    expect(canvasElement.textContent).toContain('How to use this fixture')
+    expect(canvasElement.textContent).toContain('Valid viz.dataKey')
+    expect(getDisplayValue(canvasElement)).toContain('123')
+  }
+}
+
+export const Missing_Datasets_Single_Dashboard_Loads_Safely: Story = {
+  args: {
+    config: MissingDatasetsSingleConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expectNoCrashText(canvasElement)
+    expect(canvasElement.textContent).toContain('Fixture notes')
+    expect(canvasElement.textContent).toContain('Missing dataset')
+    expect(canvasElement.textContent).toContain('Empty dataset')
+  }
+}
+
+export const Missing_Datasets_Multi_Dashboard_Loads_Safely: Story = {
+  args: {
+    config: MissingDatasetsMultiConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    await assertVisualizationRendered(canvasElement)
+    expectNoCrashText(canvasElement)
+    expect(canvasElement.textContent).toContain('This tab has no datasets object entries for its chart.')
+
+    const emptyDatasetTab = canvas.getByRole('link', { name: 'Empty Dataset' })
+    await user.click(emptyDatasetTab)
+
+    await performAndAssert(
+      'Switch to multi-dashboard tab with empty dataset',
+      () => canvasElement.textContent || '',
+      async () => {},
+      (_before, after) => after.includes('This sub-dashboard has a datasets object, but the dataset is empty.')
+    )
+
+    expectNoCrashText(canvasElement)
+    expect(canvasElement.textContent).toContain('Please complete your selection to continue.')
+  }
+}
+
+export const Tiered_Filtering_Applies_Sequentially: Story = {
+  args: {
+    config: TieredFilterConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    const regionFilter = (await canvas.findByLabelText('Region', { selector: 'select' })) as HTMLSelectElement
+    const categoryFilter = (await canvas.findByLabelText('Category', { selector: 'select' })) as HTMLSelectElement
+    const detailFilter = (await canvas.findByLabelText('Detail', { selector: 'select' })) as HTMLSelectElement
+
+    const getOptions = (select: HTMLSelectElement) =>
+      Array.from(select.options)
+        .map(option => option.value)
+        .filter(Boolean)
+
+    const getState = () => ({
+      regionSelected: regionFilter.value,
+      categorySelected: categoryFilter.value,
+      detailSelected: detailFilter.value,
+      categoryOptions: getOptions(categoryFilter),
+      detailOptions: getOptions(detailFilter),
+      svgCount: canvasElement.querySelectorAll('svg').length,
+      noDataVisible: !!canvas.queryByText('No Data Available')
+    })
+
+    await waitForOptionsToPopulate(regionFilter, 3)
+    await waitForOptionsToPopulate(categoryFilter, 3)
+    await waitForOptionsToPopulate(detailFilter, 3)
+
+    const initialState = getState()
+    expect(initialState.regionSelected).toBe('North')
+    expect(initialState.categorySelected).toBe('Alpha')
+    expect(initialState.detailSelected).toBe('One')
+    expect(initialState.svgCount).toBeGreaterThan(0)
+    expect(initialState.noDataVisible).toBe(false)
+
+    await performAndAssert(
+      'Change tier-1 filter and repopulate lower tiers',
+      getState,
+      async () => await user.selectOptions(regionFilter, ['South']),
+      (_before, after) =>
+        after.regionSelected === 'South' &&
+        after.categoryOptions.includes('Alpha') &&
+        after.categoryOptions.includes('Beta') &&
+        after.categoryOptions.includes(after.categorySelected) &&
+        after.detailOptions.includes(after.detailSelected) &&
+        after.svgCount > 0 &&
+        !after.noDataVisible
+    )
+
+    await performAndAssert(
+      'Change tier-2 filter and observe the intermediate no-data state',
+      getState,
+      async () => await user.selectOptions(categoryFilter, ['Beta']),
+      (_before, after) =>
+        after.regionSelected === 'South' &&
+        after.categorySelected === 'Beta' &&
+        after.detailSelected === 'One' &&
+        after.noDataVisible
+    )
+
+    await performAndAssert(
+      'Change tier-3 filter to restore data after tier-2 change',
+      getState,
+      async () => await user.selectOptions(detailFilter, ['Two']),
+      (_before, after) =>
+        after.regionSelected === 'South' &&
+        after.categorySelected === 'Beta' &&
+        after.detailSelected === 'Two' &&
+        after.svgCount > 0 &&
+        !after.noDataVisible
+    )
+  }
+}
+
+export const Multi_Dashboard_Versioning_Remains_Stable: Story = {
+  args: {
+    config: MultiDashboardVersionConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    await assertVisualizationRendered(canvasElement)
+    expectNoCrashText(canvasElement)
+
+    await user.click(canvas.getByRole('link', { name: 'Explicit Version' }))
+
+    await performAndAssert(
+      'Switch to explicit-version sub-dashboard',
+      () => canvasElement.textContent || '',
+      async () => {},
+      (_before, after) => after.includes('Because this sub-dashboard is already at')
+    )
+
+    await user.click(canvas.getByRole('link', { name: 'Fallback Version' }))
+
+    await performAndAssert(
+      'Switch to fallback-version sub-dashboard',
+      () => canvasElement.textContent || '',
+      async () => {},
+      (_before, after) => after.includes('This tab intentionally omits its own version.')
+    )
+
+    expectNoCrashText(canvasElement)
+    expect(canvasElement.textContent).toContain('Fallback version tab')
+  }
+}

package/src/_stories/Dashboard.Zoom.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, userEvent } from 'storybook/test'
+import cloneDeep from 'lodash/cloneDeep'
+import Dashboard from '../CdcDashboard'
+import SingleStateDashboardFilters from './_mock/single-state-dashboard-filters.json'
+import {
+  assertVisualizationRendered,
+  performAndAssert,
+  waitForOptionsToPopulate,
+  waitForPresence
+} from '@cdc/core/helpers/testing'
+
+type Story = StoryObj<typeof Dashboard>
+
+const meta: Meta<typeof Dashboard> = {
+  title: 'Components/Pages/Dashboard/Zoom',
+  component: Dashboard,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default meta
+
+const SingleStateDashboardZoomResetConfig = cloneDeep(SingleStateDashboardFilters)
+SingleStateDashboardZoomResetConfig.dashboard.title = 'Single-State Shared Filter Zoom Reset'
+SingleStateDashboardZoomResetConfig.dashboard.sharedFilters[0].key = 'State'
+SingleStateDashboardZoomResetConfig.dashboard.sharedFilters[0].active = 'California'
+SingleStateDashboardZoomResetConfig.visualizations.map1721943918271.general.title =
+  'Single-State Shared Filter Zoom Reset'
+SingleStateDashboardZoomResetConfig.visualizations.map1721943918271.general.filterControlsStatesPicked = 'State'
+SingleStateDashboardZoomResetConfig.visualizations.map1721943918271.general.statesPicked = [
+  {
+    fipsCode: '06',
+    stateName: 'California'
+  }
+]
+delete SingleStateDashboardZoomResetConfig.visualizations.map1721943918271.general.filterControlsStatePicked
+delete SingleStateDashboardZoomResetConfig.visualizations.map1721943918271.general.statePicked
+
+const readZoomTransform = (canvasElement: HTMLElement) => {
+  const zoomLayer = canvasElement.querySelector('svg > g > g[transform]') as SVGGElement | null
+  return zoomLayer?.getAttribute('transform') || ''
+}
+
+export const SingleStateSharedFilterReset: Story = {
+  args: {
+    config: SingleStateDashboardZoomResetConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Dashboard zoom regression story for DEV-13086. Zoom the single-state map, then change the shared State filter. The map should refit to the new single state instead of preserving the prior zoom.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await assertVisualizationRendered(canvasElement)
+
+    const stateFilter = canvas.getByLabelText('State', { selector: 'select' }) as HTMLSelectElement
+    await waitForOptionsToPopulate(stateFilter, 2)
+    await waitForPresence('button[aria-label="Zoom In"]', canvasElement)
+
+    const zoomInButton = canvas.getByLabelText('Zoom In')
+
+    await performAndAssert(
+      'Single-state dashboard map zooms in',
+      () => readZoomTransform(canvasElement),
+      async () => {
+        await userEvent.click(zoomInButton)
+      },
+      (before, after) => before !== after && !after.includes('scale(1)')
+    )
+
+    await performAndAssert(
+      'Shared filter change refits single-state zoom',
+      () => readZoomTransform(canvasElement),
+      async () => {
+        await userEvent.selectOptions(stateFilter, ['Florida'])
+      },
+      (before, after) => before !== after && after.includes('scale(1)')
+    )
+  }
+}

package/src/_stories/Dashboard.smoke.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+import { assertVisualizationRendered } from '@cdc/core/helpers/testing'
+import Dashboard from '../CdcDashboard'
+import MinimalExampleConfig from '../../examples/minimal-example.json'
+
+const meta: Meta<typeof Dashboard> = {
+  title: 'Components/Pages/Dashboard',
+  component: Dashboard
+}
+
+export default meta
+type Story = StoryObj<typeof Dashboard>
+
+export const Dashboard_Minimal_Config: Story = {
+  args: {
+    config: MinimalExampleConfig,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Minimum working consumer config. This story validates the source-of-truth minimal example used by the package README and CONFIG reference.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    await assertVisualizationRendered(canvasElement)
+    expect(canvasElement.textContent).toContain('Dashboard Example')
+    expect(canvasElement.textContent).toContain('Minimal dashboard example')
+  }
+}

package/src/_stories/Dashboard.stories.tsx

@@ -44,13 +44,193 @@ import GalleryDataBiteDashboard from './_mock/gallery-data-bite-dashboard.json'
 import TP5TestConfig from './_mock/tp5-test.json'
 import LineChartAnglesConfig from './_mock/dashboard-line-chart-angles.json'
 import TabSimpleFilterConfig from './_mock/tab-simple-filter.json'
+import DataDrivenColorsConfig from './_mock/dashboard-data-driven-colors.json'
 
 // Dashboard Filter Updates for Ascending, Descending, and Custom Order
 import DashboardFilterAsc from './_mock/dashboard-filter-asc.json'
 const DashboardFilterDesc = cloneDeep(DashboardFilterAsc)
 const DashboardFilterCust = cloneDeep(DashboardFilterAsc)
+const NestedParentChildFiltersSubgroupOnly = cloneDeep(NestedParentChildFilters)
 DashboardFilterDesc.dashboard.sharedFilters[0].order = 'desc'
 DashboardFilterCust.dashboard.sharedFilters[0].order = 'cust'
+NestedParentChildFiltersSubgroupOnly.dashboard.sharedFilters[1].displaySubgroupingOnly = true
+
+const DashboardConditionsConfig: Config = {
+  type: 'dashboard',
+  version: '4.26.4',
+  dashboard: {
+    theme: 'theme-blue',
+    title: 'Dashboard Conditions',
+    titleStyle: 'small',
+    sharedFilters: [
+      {
+        key: 'Required Selection',
+        type: 'datafilter',
+        filterStyle: 'dropdown',
+        columnName: 'selection',
+        showDropdown: true,
+        usedBy: ['markup-filters-incomplete'],
+        values: ['Ready'],
+        resetLabel: 'Select a value',
+        active: 'Select a value',
+        order: 'asc',
+        parents: []
+      },
+      {
+        key: 'Availability',
+        type: 'datafilter',
+        filterStyle: 'dropdown',
+        columnName: 'availability',
+        showDropdown: true,
+        usedBy: [2],
+        values: ['Show', 'Hide'],
+        active: 'Show',
+        order: 'asc',
+        parents: []
+      },
+      {
+        key: 'Region',
+        type: 'datafilter',
+        filterStyle: 'dropdown',
+        columnName: 'region',
+        showDropdown: true,
+        usedBy: ['markup-condition-a'],
+        values: ['East', 'West'],
+        active: 'East',
+        order: 'asc',
+        parents: []
+      }
+    ]
+  },
+  data: [],
+  datasets: {
+    'visual-data': {
+      data: [{ title: 'Visualization dataset' }]
+    },
+    'row-condition-data': {
+      data: [{ availability: 'Show' }]
+    },
+    'column-condition-data': {
+      data: [
+        { region: 'East', visibility: 1 },
+        { region: 'West', visibility: 0 }
+      ]
+    }
+  },
+  rows: [
+    {
+      columns: [{ width: 12, widget: 'dashboard-filters-conditions' }],
+      expandCollapseAllButtons: false
+    },
+    {
+      columns: [
+        {
+          width: 12,
+          conditionalWidgets: [
+            {
+              widget: 'markup-filters-incomplete',
+              dashboardCondition: {
+                id: 'filters-incomplete-story',
+                operator: 'filtersIncomplete'
+              }
+            }
+          ]
+        }
+      ],
+      expandCollapseAllButtons: false
+    },
+    {
+      dashboardCondition: {
+        id: 'row-condition-story',
+        datasetKey: 'row-condition-data',
+        operator: 'hasData'
+      },
+      columns: [
+        {
+          width: 6,
+          conditionalWidgets: [
+            {
+              widget: 'markup-condition-a',
+              dashboardCondition: {
+                id: 'column-condition-story',
+                datasetKey: 'column-condition-data',
+                operator: 'columnHasAnyValue',
+                columnName: 'visibility',
+                values: ['1']
+              }
+            }
+          ]
+        },
+        {
+          width: 6,
+          widget: 'markup-condition-b'
+        }
+      ],
+      expandCollapseAllButtons: false
+    }
+  ],
+  visualizations: {
+    'dashboard-filters-conditions': {
+      uid: 'dashboard-filters-conditions',
+      type: 'dashboardFilters',
+      visualizationType: 'dashboardFilters',
+      sharedFilterIndexes: [0, 1, 2],
+      filterBehavior: 'Filter Change',
+      filters: [],
+      autoLoad: true
+    },
+    'markup-filters-incomplete': {
+      uid: 'markup-filters-incomplete',
+      type: 'markup-include',
+      visualizationType: 'markup-include',
+      filterBehavior: 'Filter Change',
+      theme: 'theme-blue',
+      contentEditor: {
+        inlineHTML:
+          '<p>This authored module appears because <strong>Required Selection</strong> starts incomplete. Choose Ready to hide it.</p>',
+        showHeader: true,
+        srcUrl: '',
+        title: 'Filters Incomplete Condition',
+        useInlineHTML: true
+      }
+    },
+    'markup-condition-a': {
+      uid: 'markup-condition-a',
+      type: 'markup-include',
+      visualizationType: 'markup-include',
+      dataKey: 'visual-data',
+      filterBehavior: 'Filter Change',
+      theme: 'theme-blue',
+      contentEditor: {
+        inlineHTML:
+          '<p>This column stays visible while <strong>Region</strong> is East and hides while keeping its width when Region is West.</p>',
+        showHeader: true,
+        srcUrl: '',
+        title: 'Component-Level Condition',
+        useInlineHTML: true
+      }
+    },
+    'markup-condition-b': {
+      uid: 'markup-condition-b',
+      type: 'markup-include',
+      visualizationType: 'markup-include',
+      dataKey: 'visual-data',
+      filterBehavior: 'Filter Change',
+      theme: 'theme-blue',
+      contentEditor: {
+        inlineHTML:
+          '<p>This companion column stays rendered so you can see row-level hiding separately from component-level hiding.</p>',
+        showHeader: true,
+        srcUrl: '',
+        title: 'Always Visible Companion',
+        useInlineHTML: true
+      }
+    }
+  },
+  table: {
+    show: false
+  }
+}
 
 // On DashboardFilterCust change the sharedFilters[0].values and orderedValues to be in a custom order
 const customOrder = ['American Samoa', 'Alaska', 'Alabama', 'Arizona', 'Arkansas']
@@ -112,6 +292,123 @@ export const Example_3: Story = {
   }
 }
 
+export const Dashboard_Conditions: Story = {
+  args: {
+    config: DashboardConditionsConfig,
+    isEditor: false
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const user = userEvent.setup()
+
+    const incompleteTitle = 'Filters Incomplete Condition'
+    const componentTitle = 'Component-Level Condition'
+    const companionTitle = 'Always Visible Companion'
+    const legacyIncompleteMessage = 'Please complete your selection to continue.'
+
+    const availabilityFilter = (await canvas.findByLabelText('Availability', {
+      selector: 'select'
+    })) as HTMLSelectElement
+    const regionFilter = (await canvas.findByLabelText('Region', { selector: 'select' })) as HTMLSelectElement
+    const requiredSelectionFilter = (await canvas.findByLabelText('Required Selection', {
+      selector: 'select'
+    })) as HTMLSelectElement
+
+    await waitForOptionsToPopulate(requiredSelectionFilter, 2)
+
+    const getState = () => {
+      const visibleText = canvasElement.innerText
+      return {
+        availabilitySelected: availabilityFilter.value,
+        regionSelected: regionFilter.value,
+        requiredSelectionSelected: requiredSelectionFilter.value,
+        incompleteVisible: visibleText.includes(incompleteTitle),
+        componentVisible: visibleText.includes(componentTitle),
+        companionVisible: visibleText.includes(companionTitle),
+        legacyIncompleteVisible: visibleText.includes(legacyIncompleteMessage)
+      }
+    }
+
+    const initialState = getState()
+    expect(initialState.incompleteVisible).toBe(true)
+    expect(initialState.componentVisible).toBe(false)
+    expect(initialState.companionVisible).toBe(false)
+    expect(initialState.legacyIncompleteVisible).toBe(false)
+
+    await performAndAssert(
+      'Complete required filter -> row and component conditions render',
+      getState,
+      async () => await user.selectOptions(requiredSelectionFilter, ['Ready']),
+      (_before, after) =>
+        after.requiredSelectionSelected === 'Ready' &&
+        !after.incompleteVisible &&
+        after.componentVisible &&
+        after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+
+    await performAndAssert(
+      'Select Region=West -> component-level condition hides only the conditioned component',
+      getState,
+      async () => await user.selectOptions(regionFilter, ['West']),
+      (_before, after) =>
+        after.regionSelected === 'West' &&
+        !after.incompleteVisible &&
+        !after.componentVisible &&
+        after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+
+    await performAndAssert(
+      'Select Region=East -> component-level condition shows the conditioned component',
+      getState,
+      async () => await user.selectOptions(regionFilter, ['East']),
+      (_before, after) =>
+        after.regionSelected === 'East' &&
+        !after.incompleteVisible &&
+        after.componentVisible &&
+        after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+
+    await performAndAssert(
+      'Select Availability=Hide -> row-level condition hides the full conditioned row',
+      getState,
+      async () => await user.selectOptions(availabilityFilter, ['Hide']),
+      (_before, after) =>
+        after.availabilitySelected === 'Hide' &&
+        !after.incompleteVisible &&
+        !after.componentVisible &&
+        !after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+
+    await performAndAssert(
+      'Select Availability=Show -> row-level condition shows the full conditioned row',
+      getState,
+      async () => await user.selectOptions(availabilityFilter, ['Show']),
+      (_before, after) =>
+        after.availabilitySelected === 'Show' &&
+        !after.incompleteVisible &&
+        after.componentVisible &&
+        after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+
+    await performAndAssert(
+      'Reset required filter -> authored filtersIncomplete module returns',
+      getState,
+      async () => await user.selectOptions(requiredSelectionFilter, ['Select a value']),
+      (_before, after) =>
+        after.requiredSelectionSelected === 'Select a value' &&
+        after.incompleteVisible &&
+        !after.componentVisible &&
+        !after.companionVisible &&
+        !after.legacyIncompleteVisible
+    )
+  }
+}
+
 export const TP5_Test_Dashboard: Story = {
   args: {
     config: TP5TestConfig,
@@ -119,6 +416,20 @@ export const TP5_Test_Dashboard: Story = {
   }
 }
 
+export const DataDrivenColors: Story = {
+  args: {
+    config: DataDrivenColorsConfig as unknown as Config,
+    isEditor: false
+  }
+}
+
+export const DataDrivenColors_Editor: Story = {
+  args: {
+    config: DataDrivenColorsConfig as unknown as Config,
+    isEditor: true
+  }
+}
+
 export const Line_Chart_Angles: Story = {
   args: {
     config: LineChartAnglesConfig,
@@ -4788,8 +5099,7 @@ export const Nested_Dropdown_With_Parent_Child: Story = {
 
     // Verify defaultValue is applied on initial load (North region, 2023 Q2)
     expect(initialState.regionSelected).toBe('North')
-    expect(initialState.yearQuarterSelected).toContain('2023')
-    expect(initialState.yearQuarterSelected).toContain('Q2')
+    expect(initialState.yearQuarterSelected).toBe('2023 - Q2')
     expect(initialState.chartRendered).toBe(true)
 
     // Test 1: Change region to South → year options should update based on available data
@@ -4846,6 +5156,31 @@ export const Nested_Dropdown_With_Parent_Child: Story = {
   }
 }
 
+export const Nested_Dropdown_With_Parent_Child_Subgroup_Only: Story = {
+  args: {
+    config: NestedParentChildFiltersSubgroupOnly as unknown as Config,
+    isEditor: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Displays only the selected subgroup in the closed nested dropdown input while preserving the same filter behavior.'
+      }
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const regionFilter = (await canvas.findByLabelText('Region', { selector: 'select' })) as HTMLSelectElement
+    const yearQuarterInput = canvasElement.querySelector('.nested-dropdown input') as HTMLInputElement
+
+    await waitForOptionsToPopulate(regionFilter, 4)
+
+    expect(regionFilter.value).toBe('North')
+    expect(yearQuarterInput.value).toBe('Q2')
+  }
+}
+
 export const Metadata_In_Dashboard: Story = {
   args: {
     configUrl: '/packages/dashboard/tests/fixtures/dashboard-config-with-metadata.json'