@cdc/map 4.26.3 → 4.26.5

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

@@ -0,0 +1,145 @@
+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 TextAnnotationsSectionTests: Story = {
+  args: {
+    config: usaStateGradientConfig,
+    isEditor: true
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // Wait for editor to load
+    await waitForEditor(canvas)
+
+    // Open the Text Annotations accordion
+    await openAccordion(canvas, 'Text Annotations')
+
+    // ==========================================================================
+    // TEST: Add Annotation
+    // ==========================================================================
+    const addAnnotationButton = Array.from(canvasElement.querySelectorAll('button')).find(btn => {
+      return btn.textContent?.includes('Add Annotation')
+    }) as HTMLButtonElement
+
+    expect(addAnnotationButton).toBeTruthy()
+
+    await performAndAssert(
+      'Add Annotation → Click to add default annotation',
+      () => {
+        // Check the actual visualization - annotations appear as divs with aria-label
+        // Default annotation text is "New Annotation"
+        const annotationElements = canvasElement.querySelectorAll('div[aria-label*="Annotation text"]')
+        return {
+          annotationCount: annotationElements.length
+        }
+      },
+      async () => {
+        await userEvent.click(addAnnotationButton)
+      },
+      (before, after) => {
+        // After clicking, a new annotation should appear in the visualization
+        return after.annotationCount > before.annotationCount
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Change Annotation Text
+    // ==========================================================================
+    // Wait for the annotation sub-accordion to appear and find the button with "New Annotation" or "Select Column"
+    await waitForPresence('.accordion__button', canvasElement)
+    const annotationAccordionButtons = canvasElement.querySelectorAll('.accordion__button')
+    const annotationAccordionButton = Array.from(annotationAccordionButtons).find(
+      btn => btn.textContent?.includes('New annotation') || btn.textContent?.includes('Select Column')
+    ) as HTMLElement
+
+    expect(annotationAccordionButton).toBeTruthy()
+
+    // Open the annotation's sub-accordion
+    await userEvent.click(annotationAccordionButton)
+
+    // Find the annotation text textarea
+    const annotationTextarea = Array.from(canvasElement.querySelectorAll('textarea')).find(textarea => {
+      const label = textarea.closest('label')
+      return label?.textContent?.includes('Annotation Text')
+    }) as HTMLTextAreaElement
+
+    expect(annotationTextarea).toBeTruthy()
+
+    await performAndAssert(
+      'Annotation Text → Change to "Important Note"',
+      () => {
+        // Check the actual visualization - the annotation div should contain the text
+        const annotationDivs = canvasElement.querySelectorAll('div[aria-label*="Annotation text"]')
+        const texts = Array.from(annotationDivs).map(div => div.innerHTML)
+        return {
+          annotationTexts: texts.join('|')
+        }
+      },
+      async () => {
+        // Select all text and replace it
+        await userEvent.click(annotationTextarea)
+        await userEvent.keyboard('{Control>}a{/Control}')
+        await userEvent.type(annotationTextarea, 'Important Note')
+        await userEvent.tab() // Trigger blur to commit the change
+      },
+      (before, after) => {
+        // After changing the text, the annotation should display the new text
+        return after.annotationTexts.includes('Important Note')
+      }
+    )
+
+    // ==========================================================================
+    // TEST: Delete Annotation
+    // ==========================================================================
+    const deleteButton = Array.from(canvasElement.querySelectorAll('button')).find(btn => {
+      return btn.textContent?.includes('Delete Annotation')
+    }) as HTMLButtonElement
+
+    expect(deleteButton).toBeTruthy()
+
+    await performAndAssert(
+      'Delete Annotation → Remove annotation from map',
+      () => {
+        // Check the visualization - count the annotations
+        const annotationDivs = canvasElement.querySelectorAll('div[aria-label*="Annotation text"]')
+        return {
+          annotationCount: annotationDivs.length
+        }
+      },
+      async () => {
+        await userEvent.click(deleteButton)
+      },
+      (before, after) => {
+        // After deleting, annotation count should decrease
+        return after.annotationCount < before.annotationCount
+      }
+    )
+  }
+}
+
+// ============================================================================
+// SMALL MULTIPLES SECTION TESTS
+// ============================================================================

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

@@ -0,0 +1,312 @@
+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 TypeSectionTests: Story = {
+  args: {
+    ...DEFAULT_ARGS
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await waitForEditor(canvas)
+    await waitForPresence('.map-container', canvasElement)
+
+    await openAccordion(canvas, 'Type')
+
+    const getMapContainerState = () => {
+      const container = canvasElement.querySelector('.map-container') as HTMLElement | null
+      const svg = canvasElement.querySelector('svg') as SVGElement | null
+
+      return {
+        classes: container ? Array.from(container.classList) : [],
+        hasSvg: Boolean(svg),
+        isBubble: container?.classList.contains('bubble') ?? false,
+        geoType: container?.classList.contains('us-county')
+          ? 'us-county'
+          : container?.classList.contains('us')
+          ? 'us'
+          : container?.classList.contains('single-state')
+          ? 'single-state'
+          : container?.classList.contains('world')
+          ? 'world'
+          : container?.classList.contains('us-region')
+          ? 'us-region'
+          : 'unknown'
+      }
+    }
+
+    // ==========================================================================
+    // TEST: Geography buttons change the geoType class on the map container
+    // ==========================================================================
+    const geoButtons = Array.from(canvasElement.querySelectorAll('.geo-buttons button')) as HTMLButtonElement[]
+    expect(geoButtons.length).toBeGreaterThanOrEqual(3)
+
+    const geographyButtonMap = geoButtons.reduce<Record<string, HTMLButtonElement>>((acc, button) => {
+      const label = button.textContent?.trim() ?? ''
+      acc[label.toLowerCase()] = button
+      return acc
+    }, {})
+
+    const targetButtons = [
+      { label: 'world', targetClasses: ['world'] },
+      { label: 'united states', targetClasses: ['us'] }
+    ]
+
+    for (const { label, targetClasses } of targetButtons) {
+      const button = geographyButtonMap[label]
+      expect(button).toBeTruthy()
+
+      await performAndAssert(
+        `GeoType → ${label}`,
+        getMapContainerState,
+        async () => {
+          await userEvent.click(button)
+        },
+        (before, after) =>
+          targetClasses.some(
+            targetClass => !before.classes.includes(targetClass) && after.classes.includes(targetClass)
+          )
+      )
+    }
+
+    // ==========================================================================
+    // TEST: Geography subtype select toggles county/state classes
+    // ==========================================================================
+    const subtypeSelect = canvas.getByLabelText(/Geography Subtype/i) as HTMLSelectElement
+    const subtypeValues = Array.from(subtypeSelect.options).map(option => option.value)
+    expect(subtypeValues).toContain('us-county')
+
+    await performAndAssert(
+      'GeoType Subtype → US County',
+      getMapContainerState,
+      async () => {
+        await userEvent.selectOptions(subtypeSelect, 'us-county')
+      },
+      (before, after) => !before.classes.includes('us-county') && after.classes.includes('us-county'),
+      () => {
+        const territoriesCheckbox = canvas.getByLabelText(/Show Available Territories/i) as HTMLInputElement
+        expect(territoriesCheckbox).toBeTruthy()
+        expect(territoriesCheckbox.disabled).toBe(false)
+      }
+    )
+
+    await performAndAssert(
+      'GeoType Subtype → Reset',
+      getMapContainerState,
+      async () => {
+        await userEvent.selectOptions(subtypeSelect, 'us')
+      },
+      (before, after) => before.classes.includes('us-county') && after.classes.includes('us')
+    )
+
+    // ==========================================================================
+    // TEST: Map Type select toggles classes/data representation
+    // ==========================================================================
+    // Use getAllByLabelText to avoid multiple elements error
+    const typeSelects = canvas.getAllByLabelText(/Map Type/i, { selector: 'select' }) as HTMLSelectElement[]
+    // Assume the first select is the correct one for the Type section
+    const typeSelect = typeSelects[0]
+    const initialType = typeSelect.value
+    const mapTypeOptions = Array.from(typeSelect.options).map(option => option.value)
+    expect(mapTypeOptions).toContain('navigation')
+
+    await performAndAssert(
+      'Map Type → Navigation',
+      getMapContainerState,
+      async () => {
+        await userEvent.selectOptions(typeSelect, 'navigation')
+      },
+      (before, after) => !before.classes.includes('navigation') && after.classes.includes('navigation')
+    )
+
+    await performAndAssert(
+      'Map Type → Reset',
+      getMapContainerState,
+      async () => {
+        await userEvent.selectOptions(typeSelect, initialType)
+      },
+      (before, after) =>
+        before.classes.includes('navigation') &&
+        !after.classes.includes('navigation') &&
+        after.classes.includes(initialType)
+    )
+
+    // ==========================================================================
+    // TEST: Data Classification Type radio buttons
+    // Verifies: Legend structure changes between numeric/quantitative and categorical
+    // ==========================================================================
+    const numericRadio = canvasElement.querySelector('input[type="radio"][value="equalnumber"]') as HTMLInputElement
+    const categoryRadio = canvasElement.querySelector('input[type="radio"][value="category"]') as HTMLInputElement
+    expect(numericRadio).toBeTruthy()
+    expect(categoryRadio).toBeTruthy()
+
+    const getLegendStructure = () => {
+      const legend = canvasElement.querySelector('.map-legend, .legend-container') as HTMLElement | null
+      const legendItems = canvasElement.querySelectorAll('.legend-item, .legend-container > div, .legend li')
+      const legendRects = legend?.querySelectorAll('rect')
+      const legendText = legend?.querySelectorAll('text')
+      return {
+        legendExists: Boolean(legend),
+        legendItemCount: legendItems.length,
+        legendRectCount: legendRects?.length || 0,
+        legendTextCount: legendText?.length || 0,
+        legendFullHTML: legend?.innerHTML || ''
+      }
+    }
+
+    await performAndAssert(
+      'Classification Type → Category',
+      getLegendStructure,
+      async () => {
+        await userEvent.click(categoryRadio)
+      },
+      (before, after) =>
+        before.legendRectCount !== after.legendRectCount &&
+        before.legendTextCount !== after.legendTextCount &&
+        before.legendFullHTML !== after.legendFullHTML
+    )
+
+    await performAndAssert(
+      'Classification Type → Numeric',
+      getLegendStructure,
+      async () => {
+        await userEvent.click(numericRadio)
+      },
+      (before, after) =>
+        before.legendRectCount !== after.legendRectCount &&
+        before.legendTextCount !== after.legendTextCount &&
+        before.legendFullHTML !== after.legendFullHTML
+    )
+
+    // ==========================================================================
+    // TEST: Display As Hex Map checkbox
+    // Verifies: Hexagon SVG polygons appear/disappear in map visualization
+    // ==========================================================================
+    const hexLabel = Array.from(canvasElement.querySelectorAll('label')).find(label =>
+      label.textContent?.includes('Display As Hex Map')
+    )
+    const actualHexCheckbox = hexLabel?.querySelector('input[type="checkbox"]') as HTMLInputElement
+    expect(actualHexCheckbox).toBeTruthy()
+
+    const getHexVisualization = () => {
+      const hexElements = canvasElement.querySelectorAll('.territory-wrapper--hex, polygon[points*="22 0 44 12.702"]')
+      return {
+        hexElementCount: hexElements.length
+      }
+    }
+
+    await performAndAssert(
+      'Display As Hex Map → Enable',
+      getHexVisualization,
+      async () => {
+        await userEvent.click(actualHexCheckbox)
+      },
+      (before, after) => before.hexElementCount === 0 && after.hexElementCount > 0
+    )
+
+    await performAndAssert(
+      'Display As Hex Map → Disable',
+      getHexVisualization,
+      async () => {
+        await userEvent.click(actualHexCheckbox)
+      },
+      (before, after) => before.hexElementCount > 0 && after.hexElementCount === 0
+    )
+
+    // ==========================================================================
+    // TEST: Show state labels checkbox
+    // Verifies: State abbreviation text elements appear/disappear on map SVG
+    // ==========================================================================
+    const stateLabelsCheckbox = canvas.getByLabelText(/Show state labels/i) as HTMLInputElement
+    expect(stateLabelsCheckbox).toBeTruthy()
+
+    const getStateLabelsVisual = () => {
+      const mapSvg = canvasElement.querySelector('svg[role="img"]')
+      const textElements = mapSvg?.querySelectorAll('text')
+      // State labels are text elements with short state abbreviations (2 chars)
+      const stateLabelTexts = Array.from(textElements || []).filter(text => {
+        const content = text.textContent?.trim()
+        return content && content.length === 2 && /^[A-Z]{2}$/.test(content)
+      })
+      return {
+        stateLabelCount: stateLabelTexts.length
+      }
+    }
+
+    await performAndAssert(
+      'Show State Labels → Enable',
+      getStateLabelsVisual,
+      async () => {
+        await userEvent.click(stateLabelsCheckbox)
+      },
+      (before, after) => before.stateLabelCount === 0 && after.stateLabelCount > 0
+    )
+    await performAndAssert(
+      'Show State Labels → Disable',
+      getStateLabelsVisual,
+      async () => {
+        await userEvent.click(stateLabelsCheckbox)
+      },
+      (before, after) => before.stateLabelCount > 0 && after.stateLabelCount === 0
+    )
+
+    // ==========================================================================
+    // TEST: Show Available Territories checkbox
+    // Verifies: Territory SVG elements appear/disappear in visualization
+    // ==========================================================================
+    const territoriesLabel = Array.from(canvasElement.querySelectorAll('label')).find(label =>
+      label.textContent?.includes('Show Available Territories')
+    )
+    const territoriesCheckbox = territoriesLabel?.querySelector('input[type="checkbox"]') as HTMLInputElement
+    expect(territoriesCheckbox).toBeTruthy()
+
+    const getTerritoriesVisual = () => {
+      const territorySection = canvasElement.querySelector('.territories')
+      const territorySvgs = territorySection?.querySelectorAll('svg')
+      return {
+        territorySvgCount: territorySvgs?.length || 0,
+        hasTerritorySection: Boolean(territorySection)
+      }
+    }
+
+    await performAndAssert(
+      'Show Available Territories → Enable',
+      getTerritoriesVisual,
+      async () => {
+        await userEvent.click(territoriesCheckbox)
+      },
+      (before, after) => before.territorySvgCount !== after.territorySvgCount
+    )
+
+    await performAndAssert(
+      'Show Available Territories → Disable',
+      getTerritoriesVisual,
+      async () => {
+        await userEvent.click(territoriesCheckbox)
+      },
+      (before, after) => before.territorySvgCount !== after.territorySvgCount
+    )
+  }
+}