@cdc/dashboard 4.26.3 → 4.26.5

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

@@ -1,14 +1,18 @@
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { addVisualization } from '../addVisualization'
 
 describe('addVisualization', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
   it('creates chart visual settings with extra theme toggles disabled by default', () => {
-    vi.spyOn(Date, 'now').mockReturnValue(12345)
+    vi.spyOn(Math, 'random').mockReturnValue(0.123456789)
 
     const visualization = addVisualization('chart', 'Bar')
 
     expect(visualization).toMatchObject({
-      uid: 'chart12345',
+      uid: 'chart-4fzzzxjy',
       type: 'chart',
       visualizationType: 'Bar',
       visual: {
@@ -22,12 +26,12 @@ describe('addVisualization', () => {
   })
 
   it('creates map visual settings with extra theme toggles disabled by default', () => {
-    vi.spyOn(Date, 'now').mockReturnValue(12345)
+    vi.spyOn(Math, 'random').mockReturnValue(0.23456789)
 
     const visualization = addVisualization('map', 'single-state')
 
     expect(visualization).toMatchObject({
-      uid: 'map12345',
+      uid: 'map-8fzzzbjm',
       type: 'map',
       general: {
         geoType: 'single-state'
@@ -42,11 +46,51 @@ describe('addVisualization', () => {
     })
   })
 
-  it('preserves visualizationType for data-bite family visualizations', () => {
-    vi.spyOn(Date, 'now').mockReturnValue(12345)
+  it('uses TP5 defaults for new dashboard data bites and waffle charts', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.123456789)
+
+    expect(addVisualization('data-bite')).toMatchObject({ biteStyle: 'tp5', visualizationType: 'data-bite' })
+    expect(addVisualization('waffle-chart', 'Waffle')).toMatchObject({ visualizationType: 'TP5 Waffle' })
+  })
+
+  it('preserves other visualizationType defaults for related visualizations', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.123456789)
+
+    expect(addVisualization('waffle-chart', 'Gauge')).toMatchObject({ visualizationType: 'Gauge' })
+  })
+
+  it('preserves visualizationType for current lightweight visualizations', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.123456789)
 
     expect(addVisualization('data-bite')).toMatchObject({ visualizationType: 'data-bite' })
-    expect(addVisualization('waffle-chart')).toMatchObject({ visualizationType: 'waffle-chart' })
-    expect(addVisualization('filtered-text')).toMatchObject({ visualizationType: 'filtered-text' })
+    expect(addVisualization('markup-include')).toMatchObject({ visualizationType: 'markup-include' })
+  })
+
+  it('throws when asked to create deprecated filtered-text visualizations', () => {
+    expect(() => addVisualization('filtered-text')).toThrow(
+      'Cannot create new filtered-text visualizations. filtered-text is deprecated; use markup-include instead.'
+    )
+  })
+
+  it('creates dashboard filters with grey background disabled by default', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.3456789)
+
+    expect(addVisualization('dashboardFilters', '')).toMatchObject({
+      uid: 'dashboardFilters-cfzzt7g4',
+      type: 'dashboardFilters',
+      sharedFilterIndexes: [],
+      visualizationType: 'dashboardFilters',
+      visual: {
+        grayBackground: false
+      }
+    })
+  })
+
+  it('avoids existing visualization ids when caller provides a uniqueness scope', () => {
+    vi.spyOn(Math, 'random').mockReturnValueOnce(0.123456789).mockReturnValueOnce(0.23456789)
+
+    const visualization = addVisualization('chart', 'Bar', { existingIds: ['chart-4fzzzxjy'] })
+
+    expect(visualization.uid).toBe('chart-8fzzzbjm')
   })
 })

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

@@ -0,0 +1,136 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cloneDashboardWidget } from '../cloneDashboardWidget'
+
+const makeConfig = () =>
+  ({
+    dashboard: {
+      sharedFilters: [
+        { key: 'scoped-to-source', usedBy: ['source-widget'], setBy: 'source-widget' },
+        { key: 'unknown-target', usedBy: ['legacy-footnote-target'] },
+        { key: 'unscoped' },
+        { key: 'empty-used-by', usedBy: [] },
+        { key: 'row-target', usedBy: [0] }
+      ]
+    },
+    rows: [
+      {
+        dashboardCondition: { id: 'row-condition', operator: 'hasData', datasetKey: 'row-condition-data' },
+        columns: [
+          {
+            width: 4,
+            conditionalWidgets: [
+              {
+                widget: 'source-widget',
+                dashboardCondition: {
+                  id: 'source-condition',
+                  operator: 'columnHasAnyValue',
+                  datasetKey: 'condition-data',
+                  columnName: 'state',
+                  values: ['CA']
+                }
+              }
+            ]
+          },
+          { width: 4 },
+          {
+            width: 4,
+            conditionalWidgets: [
+              {
+                widget: 'existing-widget',
+                dashboardCondition: { id: 'existing-condition', operator: 'hasData', datasetKey: 'condition-data' }
+              }
+            ]
+          }
+        ],
+        expandCollapseAllButtons: false
+      }
+    ],
+    visualizations: {
+      'source-widget': {
+        uid: 'source-widget',
+        type: 'markup-include',
+        visualizationType: 'markup-include',
+        contentEditor: { title: 'Source' }
+      },
+      'existing-widget': {
+        uid: 'existing-widget',
+        type: 'markup-include',
+        visualizationType: 'markup-include',
+        contentEditor: { title: 'Existing' }
+      }
+    }
+  } as any)
+
+describe('cloneDashboardWidget', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('clones a simple component into an empty simple column with a fresh key and uid', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.123456789)
+    const config = makeConfig()
+    delete config.rows[0].columns[0].conditionalWidgets[0].dashboardCondition
+
+    const result = cloneDashboardWidget(config, 'source-widget', { rowIdx: 0, colIdx: 1 })
+    const clonedWidgetKey = result.rows[0].columns[1].widget
+
+    expect(clonedWidgetKey).toBeTruthy()
+    expect(clonedWidgetKey).toMatch(/^markup-include-[a-z0-9]{8}$/)
+    expect(clonedWidgetKey).not.toContain('copy')
+    expect(result.visualizations[clonedWidgetKey].uid).toBe(clonedWidgetKey)
+    expect(result.visualizations[clonedWidgetKey].contentEditor.title).toBe('Source')
+    expect(result.rows[0].columns[0].conditionalWidgets[0].widget).toBe('source-widget')
+    expect(config.rows[0].columns[1].widget).toBeUndefined()
+  })
+
+  it('clones a component into an empty conditional slot and copies its component condition with a fresh id', () => {
+    vi.spyOn(Math, 'random').mockReturnValueOnce(0.123456789).mockReturnValueOnce(0.23456789)
+    const config = makeConfig()
+
+    const result = cloneDashboardWidget(config, 'source-widget', { rowIdx: 0, colIdx: 2, entryIdx: 1 })
+    const clonedEntry = result.rows[0].columns[2].conditionalWidgets[1]
+
+    expect(clonedEntry.widget).toBeTruthy()
+    expect(clonedEntry.widget).toMatch(/^markup-include-[a-z0-9]{8}$/)
+    expect(clonedEntry.widget).not.toContain('copy')
+    expect(clonedEntry.dashboardCondition).toMatchObject({
+      operator: 'columnHasAnyValue',
+      datasetKey: 'condition-data',
+      columnName: 'state',
+      values: ['CA']
+    })
+    expect(clonedEntry.dashboardCondition.id).toMatch(/^condition-[a-z0-9]{8}$/)
+    expect(clonedEntry.dashboardCondition.id).not.toBe('source-condition')
+    expect(clonedEntry.dashboardCondition.id).not.toBe('row-condition')
+  })
+
+  it('avoids existing visualization keys when cloning', () => {
+    vi.spyOn(Math, 'random').mockReturnValueOnce(0.123456789).mockReturnValueOnce(0.23456789)
+    const config = makeConfig()
+    delete config.rows[0].columns[0].conditionalWidgets[0].dashboardCondition
+    config.visualizations['markup-include-4fzzzxjy'] = {
+      uid: 'markup-include-4fzzzxjy',
+      type: 'markup-include',
+      visualizationType: 'markup-include'
+    }
+
+    const result = cloneDashboardWidget(config, 'source-widget', { rowIdx: 0, colIdx: 1 })
+
+    expect(result.rows[0].columns[1].widget).toBe('markup-include-8fzzzbjm')
+  })
+
+  it('clones widget-scoped shared filter targets while leaving unknown and unscoped filters unchanged', () => {
+    vi.spyOn(Math, 'random').mockReturnValue(0.123456789)
+    const config = makeConfig()
+
+    const result = cloneDashboardWidget(config, 'source-widget', { rowIdx: 0, colIdx: 2, entryIdx: 1 })
+    const clonedEntry = result.rows[0].columns[2].conditionalWidgets[1]
+
+    expect(result.dashboard.sharedFilters[0].usedBy).toEqual(['source-widget', clonedEntry.widget])
+    expect(result.dashboard.sharedFilters[0].setBy).toBe('source-widget')
+    expect(result.dashboard.sharedFilters[1].usedBy).toEqual(['legacy-footnote-target'])
+    expect(result.dashboard.sharedFilters[2].usedBy).toBeUndefined()
+    expect(result.dashboard.sharedFilters[3].usedBy).toEqual([])
+    expect(result.dashboard.sharedFilters[4].usedBy).toEqual([0])
+  })
+})

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

@@ -0,0 +1,99 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  getColumnWidgetEntries,
+  hasAuthoredWidgetEntries,
+  normalizeConditionalColumn,
+  resolveColumnWidgetEntry
+} from '../dashboardColumnWidgets'
+
+describe('dashboardColumnWidgets', () => {
+  it('resolves simple columns through column.widget', () => {
+    expect(
+      resolveColumnWidgetEntry({
+        width: 12,
+        widget: 'viz-1'
+      } as any)
+    ).toMatchObject({ widget: 'viz-1', matches: true })
+  })
+
+  it('resolves the first matching conditional widget in author order', () => {
+    const evaluateCondition = vi
+      .fn()
+      .mockImplementation(condition => ({ matches: condition?.id === 'condition-2', resolved: true }))
+
+    const result = resolveColumnWidgetEntry(
+      {
+        width: 12,
+        conditionalWidgets: [
+          { widget: 'viz-1', dashboardCondition: { id: 'condition-1', operator: 'hasData' } },
+          { widget: 'viz-2', dashboardCondition: { id: 'condition-2', operator: 'hasData' } },
+          { widget: 'viz-3', dashboardCondition: { id: 'condition-3', operator: 'hasData' } }
+        ]
+      } as any,
+      { evaluateCondition }
+    )
+
+    expect(result).toMatchObject({ widget: 'viz-2', matches: true })
+    expect(evaluateCondition).toHaveBeenCalledTimes(2)
+  })
+
+  it('returns an empty resolution when no conditional widget matches', () => {
+    const result = resolveColumnWidgetEntry(
+      {
+        width: 12,
+        conditionalWidgets: [
+          { widget: 'viz-1', dashboardCondition: { id: 'condition-1', operator: 'hasData' } },
+          { widget: 'viz-2', dashboardCondition: { id: 'condition-2', operator: 'hasData' } }
+        ]
+      } as any,
+      {
+        evaluateCondition: () => ({ matches: false, resolved: true })
+      }
+    )
+
+    expect(result).toEqual({ widget: undefined, matches: false, resolved: true })
+  })
+
+  it('collapses a one-entry conditional column back to simple mode when the condition is removed', () => {
+    expect(
+      normalizeConditionalColumn({
+        width: 12,
+        widget: undefined,
+        conditionalWidgets: [{ widget: 'viz-1' }]
+      } as any)
+    ).toMatchObject({
+      width: 12,
+      widget: 'viz-1',
+      conditionalWidgets: undefined
+    })
+  })
+
+  it('keeps one-entry conditional columns in conditional mode when the remaining entry still has a condition', () => {
+    expect(
+      normalizeConditionalColumn({
+        width: 12,
+        conditionalWidgets: [{ widget: 'viz-1', dashboardCondition: { id: 'condition-1', operator: 'hasData' } }]
+      } as any)
+    ).toMatchObject({
+      width: 12,
+      widget: undefined,
+      conditionalWidgets: [{ widget: 'viz-1', dashboardCondition: { id: 'condition-1', operator: 'hasData' } }]
+    })
+  })
+
+  it('ignores column.widget when conditional widgets are present', () => {
+    expect(
+      getColumnWidgetEntries({
+        width: 12,
+        widget: 'simple-viz',
+        conditionalWidgets: [{ widget: 'conditional-viz', dashboardCondition: { id: 'condition-1' } }]
+      } as any)
+    ).toEqual([{ widget: 'conditional-viz', dashboardCondition: { id: 'condition-1' } }])
+  })
+
+  it('reports whether a column has authored widget entries', () => {
+    expect(hasAuthoredWidgetEntries({ width: 12, widget: 'viz-1' } as any)).toBe(true)
+    expect(hasAuthoredWidgetEntries({ width: 12, conditionalWidgets: [{ widget: 'viz-2' }] } as any)).toBe(true)
+    expect(hasAuthoredWidgetEntries({ width: 12 } as any)).toBe(false)
+  })
+})

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

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import {
+  DASHBOARD_CONDITION_TYPE_LABELS,
+  getColumnHasAnyValueSummaryParts,
+  getDashboardConditionSummary
+} from '../dashboardConditionUi'
+
+describe('dashboardConditionUi', () => {
+  it('uses shared dropdown labels for simple condition summaries', () => {
+    expect(getDashboardConditionSummary({ operator: 'hasData' })).toBe(DASHBOARD_CONDITION_TYPE_LABELS.hasData)
+    expect(getDashboardConditionSummary({ operator: 'hasNoData' })).toBe(DASHBOARD_CONDITION_TYPE_LABELS.hasNoData)
+    expect(getDashboardConditionSummary({ operator: 'filtersIncomplete' })).toBe(
+      DASHBOARD_CONDITION_TYPE_LABELS.filtersIncomplete
+    )
+  })
+
+  it('summarizes columnHasAnyValue with only the inspected column name', () => {
+    expect(
+      getDashboardConditionSummary({
+        operator: 'columnHasAnyValue',
+        datasetKey: 'condition-data',
+        columnName: 'state',
+        values: ['Adams', 'Brown']
+      })
+    ).toBe('Show based on the value in the state column')
+  })
+
+  it('shares columnHasAnyValue summary parts for rich text rendering', () => {
+    expect(getColumnHasAnyValueSummaryParts('state')).toEqual({
+      prefix: 'Show based on the value in the ',
+      columnName: 'state',
+      suffix: ' column'
+    })
+  })
+
+  it('falls back safely for incomplete or unknown condition details', () => {
+    expect(getDashboardConditionSummary({ operator: 'columnHasAnyValue' })).toBe('Show when column has a value')
+    expect(getDashboardConditionSummary({ operator: 'unknownOperator' } as any)).toBe('Dashboard condition configured')
+    expect(getDashboardConditionSummary()).toBe('Dashboard condition configured')
+  })
+})