@cdc/map 4.26.3 → 4.26.4

package/src/_stories/CdcMap.Editor.DataTableSectionTests.stories.tsx

@@ -0,0 +1,404 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, userEvent, expect } from 'storybook/test'
+import CdcMap from '../CdcMap'
+import usaStateGradientConfig from './_mock/usa-state-gradient.json'
+import multiCountryConfig from './_mock/multi-country.json'
+import wastewaterMapSmallMultiplesConfig from './_mock/small_multiples/wastewater-map-small-multiples.json'
+import { performAndAssert, waitForEditor, waitForPresence, openAccordion } from '@cdc/core/helpers/testing'
+
+type Story = StoryObj<typeof CdcMap>
+
+const mapMeta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map/Editor Tests',
+  component: CdcMap,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default mapMeta
+
+const DEFAULT_ARGS = {
+  isEditor: true,
+  config: usaStateGradientConfig
+}
+
+export const DataTableSectionTests: Story = {
+  args: {
+    ...DEFAULT_ARGS
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await waitForEditor(canvas)
+    await waitForPresence('.map-container', canvasElement)
+
+    await openAccordion(canvas, 'Data Table')
+
+    // ==========================================================================
+    // TEST: Data Table Title
+    // ==========================================================================
+    const dataTableTitleInput = canvasElement.querySelector('#dataTableTitle') as HTMLInputElement
+
+    await performAndAssert(
+      'Data Table Title → Set custom title',
+      () => {
+        const dataTableHeading = canvasElement.querySelector('.data-table-heading')
+        return {
+          titleText: dataTableHeading?.textContent?.trim() || ''
+        }
+      },
+      async () => {
+        await userEvent.clear(dataTableTitleInput)
+        await userEvent.type(dataTableTitleInput, 'State Population Data')
+      },
+      (before, after) => {
+        return after.titleText.includes('State Population Data')
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Wrap Data Table Columns
+    // ==========================================================================
+    // First expand the data table if it's collapsed
+    const dataTableHeadingButton = canvasElement.querySelector('.data-table-heading') as HTMLElement
+    const dataTableContainer = canvasElement.querySelector('.data-table-container')
+    const isCollapsed = dataTableHeadingButton?.classList.contains('collapsed')
+    if (isCollapsed) {
+      await userEvent.click(dataTableHeadingButton)
+      await new Promise(resolve => setTimeout(resolve, 200))
+    }
+
+    const wrapColumnsCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(checkbox => {
+      const label = checkbox.closest('label')
+      return label?.textContent?.includes('WRAP DATA TABLE COLUMNS')
+    }) as HTMLInputElement
+
+    await performAndAssert(
+      'Wrap Columns → Toggle wrapping',
+      () => {
+        const dataTable = canvasElement.querySelector('.data-table')
+        const firstCell = dataTable?.querySelector('tbody td')
+        const whiteSpace = firstCell ? window.getComputedStyle(firstCell).whiteSpace : ''
+        return {
+          whiteSpace,
+          hasCells: Boolean(firstCell)
+        }
+      },
+      async () => {
+        await userEvent.click(wrapColumnsCheckbox)
+      },
+      (before, after) => {
+        // When wrap is enabled, white-space should be 'normal' or 'unset', not 'nowrap'
+        return after.hasCells && before.whiteSpace === 'nowrap' && after.whiteSpace !== 'nowrap'
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Show Data Table
+    // ==========================================================================
+    const showDataTableCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(
+      checkbox => {
+        const label = checkbox.closest('label')
+        return label?.textContent?.includes('Show Data Table') && !label?.textContent?.includes('Non Geographic')
+      }
+    ) as HTMLInputElement
+
+    await performAndAssert(
+      'Show Data Table → Hide data table',
+      () => {
+        const dataTableContainer = canvasElement.querySelector('.data-table-container')
+        const isVisible = dataTableContainer && window.getComputedStyle(dataTableContainer).display !== 'none'
+        return {
+          isVisible: Boolean(isVisible)
+        }
+      },
+      async () => {
+        await userEvent.click(showDataTableCheckbox)
+      },
+      (before, after) => {
+        // Should hide the data table
+        return before.isVisible && !after.isVisible
+      }
+    )
+
+    // Toggle it back on for the next test
+    await userEvent.click(showDataTableCheckbox)
+
+    // ==========================================================================
+    // TEST: Show Non Geographic Data
+    // ==========================================================================
+    const showNonGeoDataCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(
+      checkbox => {
+        const label = checkbox.closest('label')
+        return label?.textContent?.includes('Show Non Geographic Data')
+      }
+    ) as HTMLInputElement
+
+    await performAndAssert(
+      'Show Non Geographic Data → Toggle visibility',
+      () => {
+        const dataTable = canvasElement.querySelector('.data-table')
+        const rows = Array.from(dataTable?.querySelectorAll('tbody tr') || [])
+        const rowCount = rows.length
+        return {
+          rowCount
+        }
+      },
+      async () => {
+        await userEvent.click(showNonGeoDataCheckbox)
+      },
+      (before, after) => {
+        // Toggling non-geographic data should add rows to the table (overall data object)
+        return after.rowCount > before.rowCount
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Index Column Header
+    // ==========================================================================
+    const indexColumnHeaderInput = Array.from(canvasElement.querySelectorAll('input[type="text"]')).find(input => {
+      const label = input.closest('label')
+      return label?.textContent?.includes('Index Column Header')
+    }) as HTMLInputElement
+
+    await performAndAssert(
+      'Index Column Header → Set custom header',
+      () => {
+        const dataTable = canvasElement.querySelector('.data-table')
+        const firstHeader = dataTable?.querySelector('thead th')
+        return {
+          headerText: firstHeader?.textContent?.trim() || ''
+        }
+      },
+      async () => {
+        await userEvent.clear(indexColumnHeaderInput)
+        await userEvent.type(indexColumnHeaderInput, 'State/Territory')
+      },
+      (before, after) => {
+        return after.headerText.includes('State/Territory')
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Screen Reader Description
+    // ==========================================================================
+    const screenReaderDescTextarea = Array.from(canvasElement.querySelectorAll('textarea')).find(textarea => {
+      const label = textarea.closest('label')
+      return label?.textContent?.includes('Screen Reader Description')
+    }) as HTMLTextAreaElement
+
+    await performAndAssert(
+      'Screen Reader Description → Set custom description',
+      () => {
+        const dataTable = canvasElement.querySelector('.data-table')
+        const caption = dataTable?.querySelector('caption')
+        return {
+          captionText: caption?.textContent?.trim() || ''
+        }
+      },
+      async () => {
+        await userEvent.clear(screenReaderDescTextarea)
+        await userEvent.type(screenReaderDescTextarea, 'Table showing state population data by region')
+      },
+      (before, after) => {
+        return after.captionText.includes('Table showing state population data')
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Limit Table Height
+    // ==========================================================================
+    const limitHeightCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(checkbox => {
+      const label = checkbox.closest('label')
+      return label?.textContent?.includes('Limit Table Height')
+    }) as HTMLInputElement
+
+    await performAndAssert(
+      'Limit Table Height → Enable height limit',
+      () => {
+        // Check if the "Data Table Height" input field appears (conditional rendering)
+        const heightInput = Array.from(canvasElement.querySelectorAll('input[type="number"]')).find(input => {
+          const label = input.closest('label')
+          return label?.textContent?.includes('Data Table Height')
+        })
+        return {
+          hasHeightInput: Boolean(heightInput)
+        }
+      },
+      async () => {
+        await userEvent.click(limitHeightCheckbox)
+      },
+      (before, after) => {
+        // After enabling, the "Data Table Height" input field should appear
+        return !before.hasHeightInput && after.hasHeightInput
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Table Cell Min Width
+    // ==========================================================================
+    const cellMinWidthInput = Array.from(canvasElement.querySelectorAll('input[type="number"]')).find(input => {
+      const label = input.closest('label')
+      return label?.textContent?.includes('Table Cell Min Width')
+    }) as HTMLInputElement
+
+    await performAndAssert(
+      'Table Cell Min Width → Set minimum width',
+      () => {
+        const dataTable = canvasElement.querySelector('.data-table')
+        const firstCell = dataTable?.querySelector('thead th')
+        const minWidth = firstCell ? window.getComputedStyle(firstCell).minWidth : ''
+        return {
+          minWidth
+        }
+      },
+      async () => {
+        await userEvent.clear(cellMinWidthInput)
+        await userEvent.type(cellMinWidthInput, '150')
+      },
+      (before, after) => {
+        // After setting min width to 150px, cells should have minWidth of 150px
+        return before.minWidth !== after.minWidth && after.minWidth === '150px'
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Show Download CSV Link
+    // ==========================================================================
+    const showDownloadCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(checkbox => {
+      const label = checkbox.closest('label')
+      return label?.textContent?.includes('Show Download CSV Link')
+    }) as HTMLInputElement
+
+    // First toggle it off, then back on
+    await performAndAssert(
+      'Show Download CSV Link → Toggle off',
+      () => {
+        const downloadLink = Array.from(canvasElement.querySelectorAll('a')).find(link =>
+          link.textContent?.includes('Download Data')
+        )
+        return {
+          hasDownloadLink: Boolean(downloadLink)
+        }
+      },
+      async () => {
+        await userEvent.click(showDownloadCheckbox)
+      },
+      (before, after) => {
+        // After disabling, the download link should disappear
+        return before.hasDownloadLink && !after.hasDownloadLink
+      }
+    )
+
+    await performAndAssert(
+      'Show Download CSV Link → Toggle back on',
+      () => {
+        const downloadLink = Array.from(canvasElement.querySelectorAll('a')).find(link =>
+          link.textContent?.includes('Download Data')
+        )
+        return {
+          hasDownloadLink: Boolean(downloadLink)
+        }
+      },
+      async () => {
+        await userEvent.click(showDownloadCheckbox)
+      },
+      (before, after) => {
+        // After re-enabling, the download link should reappear
+        return !before.hasDownloadLink && after.hasDownloadLink
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Show Link Below Table
+    // ==========================================================================
+    const showLinkBelowCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(
+      checkbox => {
+        const label = checkbox.closest('label')
+        return label?.textContent?.includes('Show Link Below Table')
+      }
+    ) as HTMLInputElement
+
+    // First toggle it off (move link above), then back on (move link below)
+    await performAndAssert(
+      'Show Link Below Table → Toggle off (move above)',
+      () => {
+        const dataTableContainer = canvasElement.querySelector('.data-table-container')
+        const downloadSection = canvasElement.querySelector('.download-links')
+        // Check if download link is positioned after the data table
+        const containerRect = dataTableContainer?.getBoundingClientRect()
+        const downloadRect = downloadSection?.getBoundingClientRect()
+        const isBelow = downloadRect && containerRect && downloadRect.top > containerRect.bottom
+        return {
+          isBelow: Boolean(isBelow)
+        }
+      },
+      async () => {
+        await userEvent.click(showLinkBelowCheckbox)
+      },
+      (before, after) => {
+        // After disabling, download link should move above the table
+        return before.isBelow && !after.isBelow
+      }
+    )
+
+    await performAndAssert(
+      'Show Link Below Table → Toggle back on (move below)',
+      () => {
+        const dataTableContainer = canvasElement.querySelector('.data-table-container')
+        const downloadSection = canvasElement.querySelector('.download-links')
+        const containerRect = dataTableContainer?.getBoundingClientRect()
+        const downloadRect = downloadSection?.getBoundingClientRect()
+        const isBelow = downloadRect && containerRect && downloadRect.top > containerRect.bottom
+        return {
+          isBelow: Boolean(isBelow)
+        }
+      },
+      async () => {
+        await userEvent.click(showLinkBelowCheckbox)
+      },
+      (before, after) => {
+        // After re-enabling, download link should move back below the table
+        return !before.isBelow && after.isBelow
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Enable Image Download
+    // ==========================================================================
+    const enableImageDownloadCheckbox = Array.from(canvasElement.querySelectorAll('input[type="checkbox"]')).find(
+      checkbox => {
+        const label = checkbox.closest('label')
+        return label?.textContent?.includes('Enable Image Download')
+      }
+    ) as HTMLInputElement
+
+    await performAndAssert(
+      'Enable Image Download → Enable button',
+      () => {
+        const downloadImgButton =
+          Array.from(canvasElement.querySelectorAll('button')).find(
+            btn => btn.textContent?.includes('Download Image') || btn.classList.contains('download-image')
+          ) ||
+          Array.from(canvasElement.querySelectorAll('a[role="button"]')).find(
+            link => link.textContent?.includes('Download Map') && link.textContent?.includes('PNG')
+          )
+        return {
+          hasDownloadImgButton: Boolean(downloadImgButton)
+        }
+      },
+      async () => {
+        await userEvent.click(enableImageDownloadCheckbox)
+      },
+      (before, after) => {
+        // After enabling, the download image button should appear
+        return !before.hasDownloadImgButton && after.hasDownloadImgButton
+      }
+    )
+  }
+}
+
+// =================================================================================================
+// Visual Section Tests
+// =================================================================================================

package/src/_stories/CdcMap.Editor.FiltersSectionTests.stories.tsx

@@ -0,0 +1,229 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, userEvent, expect } from 'storybook/test'
+import CdcMap from '../CdcMap'
+import usaStateGradientConfig from './_mock/usa-state-gradient.json'
+import multiCountryConfig from './_mock/multi-country.json'
+import wastewaterMapSmallMultiplesConfig from './_mock/small_multiples/wastewater-map-small-multiples.json'
+import { performAndAssert, waitForEditor, waitForPresence, openAccordion } from '@cdc/core/helpers/testing'
+
+type Story = StoryObj<typeof CdcMap>
+
+const mapMeta: Meta<typeof CdcMap> = {
+  title: 'Components/Templates/Map/Editor Tests',
+  component: CdcMap,
+  parameters: {
+    layout: 'fullscreen'
+  }
+}
+
+export default mapMeta
+
+const DEFAULT_ARGS = {
+  isEditor: true,
+  config: usaStateGradientConfig
+}
+
+export const FiltersSectionTests: Story = {
+  args: {
+    ...DEFAULT_ARGS
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await waitForEditor(canvas)
+    await waitForPresence('.map-container', canvasElement)
+
+    await openAccordion(canvas, 'Filters')
+
+    // ==========================================================================
+    // TEST: Add Filter and configure it to filter by STATE
+    // ==========================================================================
+    const filtersAccordionButton = canvas
+      .getAllByRole('button', { name: /^Filters$/i })
+      .find(button => button.closest('[data-accordion-component="AccordionItem"], .accordion__item'))
+    const filtersAccordion = filtersAccordionButton?.closest(
+      '[data-accordion-component="AccordionItem"], .accordion__item'
+    )
+    expect(filtersAccordion).toBeTruthy()
+
+    const addFilterButton = within(filtersAccordion as HTMLElement).getByRole('button', { name: /Add Filter/i })
+
+    await performAndAssert(
+      'Add Filter → Click button',
+      () => {
+        const filtersList = filtersAccordion?.querySelector('.grouped-list__items')
+        const collapsedFilters = filtersList?.querySelectorAll('.series-item--chart') || []
+        return {
+          hasFiltersList: Boolean(filtersList),
+          hasCollapsedFilter: collapsedFilters.length > 0
+        }
+      },
+      async () => {
+        await userEvent.click(addFilterButton)
+      },
+      (before, after) => {
+        // Should create filters list and add a collapsed filter
+        return after.hasFiltersList && after.hasCollapsedFilter
+      }
+    )
+
+    // Filter item starts expanded (preExpanded); find the visible filter panel content
+    const filtersList = filtersAccordion?.querySelector('.grouped-list__items')
+
+    const getFilterBlock = () => {
+      return Array.from(filtersAccordion?.querySelectorAll('select') || [])
+        .find(select => {
+          const label = select.closest('label')
+          const labelSpan = label?.querySelector('.edit-label')
+          return labelSpan?.textContent?.includes('Filter Style')
+        })
+        ?.closest(
+          '[data-accordion-component="AccordionPanel"], .series-item, .editor-field-item__content'
+        ) as HTMLElement
+    }
+
+    await performAndAssert(
+      'Wait for added filter panel to render',
+      () => Boolean(getFilterBlock()),
+      async () => {},
+      (_before, after) => after
+    )
+
+    // Find the newly added filter section content
+    const filterBlock = getFilterBlock()
+    expect(filterBlock).toBeTruthy()
+
+    // ==========================================================================
+    // TEST: Select STATE as the filter column
+    // ==========================================================================
+    const filterColumnSelect = Array.from(filterBlock?.querySelectorAll('select') || []).find(select => {
+      const label = select.closest('label')
+      const labelSpan = label?.querySelector('.edit-label')
+      return labelSpan?.textContent?.includes('Filter') && !labelSpan?.textContent?.includes('Style')
+    }) as HTMLSelectElement
+
+    const getDefaultValueState = () => {
+      const updatedFilterBlock = getFilterBlock()
+      const defaultValueSelect = Array.from(updatedFilterBlock?.querySelectorAll('select') || []).find(select => {
+        const label = select.closest('label')
+        const labelSpan = label?.querySelector('.edit-label')
+        return labelSpan?.textContent?.includes('Filter Default Value')
+      }) as HTMLSelectElement
+      return {
+        hasDefaultValueSelect: Boolean(defaultValueSelect),
+        optionCount: defaultValueSelect?.options.length || 0
+      }
+    }
+
+    await performAndAssert(
+      'Filter Column → Select STATE',
+      getDefaultValueState,
+      async () => {
+        await userEvent.selectOptions(filterColumnSelect, 'STATE')
+      },
+      (before, after) => {
+        // Should populate the default value select with state options
+        return after.hasDefaultValueSelect && after.optionCount > 0
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Filter Intro Text
+    // ==========================================================================
+    const filterIntroTextarea = Array.from(canvasElement.querySelectorAll('textarea') || []).find(textarea => {
+      const label = textarea.closest('label')
+      return label?.textContent?.includes('Filter intro text')
+    }) as HTMLTextAreaElement
+
+    const getFilterIntroText = () => {
+      const filtersSection = canvasElement.querySelector('.filters-section')
+      const filterIntro = filtersSection?.querySelector('.filters-section__intro-text')
+      return {
+        introText: filterIntro?.textContent?.trim() || '',
+        hasIntro: Boolean(filterIntro)
+      }
+    }
+
+    await performAndAssert(
+      'Filter Intro Text → Set custom text',
+      getFilterIntroText,
+      async () => {
+        await userEvent.clear(filterIntroTextarea)
+        await userEvent.type(filterIntroTextarea, 'Select a state to filter the map data.')
+      },
+      (before, after) => {
+        return after.hasIntro && after.introText.includes('Select a state to filter the map data')
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Select Alabama as the default filter value
+    // ==========================================================================
+    const updatedFilterBlock = getFilterBlock()
+    const defaultValueSelect = Array.from(updatedFilterBlock?.querySelectorAll('select') || []).find(select => {
+      const label = select.closest('label')
+      const labelSpan = label?.querySelector('.edit-label')
+      return labelSpan?.textContent?.includes('Filter Default Value')
+    }) as HTMLSelectElement
+
+    await performAndAssert(
+      'Filter Default Value → Select Alabama',
+      () => {
+        // Check the legend text labels - when filtered to one state, shows single value
+        const legendContainer = canvasElement.querySelector('.legend-container')
+        const textElements = Array.from(legendContainer?.querySelectorAll('text tspan') || [])
+        const labels = textElements.map(el => el.textContent?.trim()).filter(t => t && t !== '')
+        const labelText = labels.join(',')
+
+        // Verify filter dropdown is rendered
+        const vizContainer = canvasElement.querySelector('.cove-visualization')
+        const filterSelect = Array.from(vizContainer?.querySelectorAll('select') || []).find(select => {
+          const options = Array.from(select.options).map(opt => opt.value)
+          return options.includes('Alabama')
+        })
+
+        return {
+          labelCount: labels.length,
+          labelText,
+          hasFilterSelect: Boolean(filterSelect),
+          selectedValue: filterSelect?.value || ''
+        }
+      },
+      async () => {
+        await userEvent.selectOptions(defaultValueSelect, 'Alabama')
+      },
+      (before, after) => {
+        // After filtering to Alabama: should have filter dropdown, Alabama selected, and exactly 1 legend label
+        // The legend shows a single value when only one state's data is displayed
+        return after.hasFilterSelect && after.selectedValue === 'Alabama' && after.labelCount === 1
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Filter Label
+    // ==========================================================================
+    const labelInput = Array.from(updatedFilterBlock?.querySelectorAll('input[type="text"]') || []).find(input => {
+      const label = input.closest('label')
+      const labelSpan = label?.querySelector('.edit-label')
+      return labelSpan?.textContent?.includes('Label') && !labelSpan?.textContent?.includes('Query')
+    }) as HTMLInputElement
+
+    await performAndAssert(
+      'Filter Label → Set custom label',
+      () => {
+        const filtersSection = canvasElement.querySelector('.filters-section')
+        const filterLabel = filtersSection?.querySelector('.form-group label')
+        return {
+          labelText: filterLabel?.textContent?.trim() || ''
+        }
+      },
+      async () => {
+        await userEvent.clear(labelInput)
+        await userEvent.type(labelInput, 'Select State')
+      },
+      (before, after) => {
+        return after.labelText.includes('Select State')
+      }
+    )
+  }
+}