@carto/ps-react-ui 4.7.1 → 4.8.0

package/src/widgets/category/components/category-rows.test.tsx

@@ -0,0 +1,213 @@
+/**
+ * Tests for CategoryRowSingle and CategoryRowMulti — both files share the
+ * same conditional-render branches (onClick presence, labelFormatter
+ * presence, selected default).
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/react'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { CategoryRowSingle } from './category-row-single'
+import { CategoryRowMulti } from './category-row-multi'
+
+const theme = createTheme({})
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>)
+}
+
+const formatter = (v: number) => `${v}`
+
+describe('CategoryRowSingle', () => {
+  it('renders the name and formatted value', () => {
+    const { getByText } = renderWithTheme(
+      <CategoryRowSingle
+        name='Category A'
+        value={42}
+        maxValue={100}
+        color='#f00'
+        formatter={formatter}
+      />,
+    )
+    expect(getByText('Category A')).toBeDefined()
+    expect(getByText('42')).toBeDefined()
+  })
+
+  it('applies labelFormatter when provided', () => {
+    const { getByText } = renderWithTheme(
+      <CategoryRowSingle
+        name='raw'
+        value={10}
+        maxValue={100}
+        color='#f00'
+        formatter={formatter}
+        labelFormatter={(s) => `[${s}]`}
+      />,
+    )
+    expect(getByText('[raw]')).toBeDefined()
+  })
+
+  it('invokes onClick with the row name when clicked', () => {
+    const onClick = vi.fn()
+    const { getByText } = renderWithTheme(
+      <CategoryRowSingle
+        name='X'
+        value={1}
+        maxValue={10}
+        color='#f00'
+        formatter={formatter}
+        onClick={onClick}
+      />,
+    )
+    fireEvent.click(getByText('X'))
+    expect(onClick).toHaveBeenCalledWith({ name: 'X' })
+  })
+
+  it('renders without onClick (handleClick=undefined branch)', () => {
+    expect(() =>
+      renderWithTheme(
+        <CategoryRowSingle
+          name='Y'
+          value={1}
+          maxValue={10}
+          color='#f00'
+          formatter={formatter}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  it('respects selected=false', () => {
+    expect(() =>
+      renderWithTheme(
+        <CategoryRowSingle
+          name='Z'
+          value={1}
+          maxValue={10}
+          color='#f00'
+          formatter={formatter}
+          selected={false}
+        />,
+      ),
+    ).not.toThrow()
+  })
+})
+
+describe('CategoryRowMulti', () => {
+  it('renders the name and one bar per value', () => {
+    const { getByText, getAllByText } = renderWithTheme(
+      <CategoryRowMulti
+        name='Multi A'
+        values={[1, 2, 3]}
+        maxValue={10}
+        colors={['#f00', '#0f0', '#00f']}
+        formatter={formatter}
+      />,
+    )
+    expect(getByText('Multi A')).toBeDefined()
+    expect(getAllByText('1')).toHaveLength(1)
+    expect(getAllByText('2')).toHaveLength(1)
+    expect(getAllByText('3')).toHaveLength(1)
+  })
+
+  it('applies labelFormatter when provided', () => {
+    const { getByText } = renderWithTheme(
+      <CategoryRowMulti
+        name='raw'
+        values={[1]}
+        maxValue={10}
+        colors={['#f00']}
+        formatter={formatter}
+        labelFormatter={(s) => `<${s}>`}
+      />,
+    )
+    expect(getByText('<raw>')).toBeDefined()
+  })
+
+  it('invokes onClick with the row name when clicked', () => {
+    const onClick = vi.fn()
+    const { getByText } = renderWithTheme(
+      <CategoryRowMulti
+        name='ClickRow'
+        values={[1, 2]}
+        maxValue={10}
+        colors={['#f00', '#0f0']}
+        formatter={formatter}
+        onClick={onClick}
+      />,
+    )
+    fireEvent.click(getByText('ClickRow'))
+    expect(onClick).toHaveBeenCalledWith({ name: 'ClickRow' })
+  })
+
+  it('renders without onClick', () => {
+    expect(() =>
+      renderWithTheme(
+        <CategoryRowMulti
+          name='N'
+          values={[1, 2]}
+          maxValue={10}
+          colors={['#f00', '#0f0']}
+          formatter={formatter}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  it('cycles colors when values.length exceeds colors.length (modulo branch)', () => {
+    // 4 values, 2 colors → uses modulo to cycle (colors[index % colors.length])
+    expect(() =>
+      renderWithTheme(
+        <CategoryRowMulti
+          name='Cycle'
+          values={[1, 2, 3, 4]}
+          maxValue={10}
+          colors={['#f00', '#0f0']}
+          formatter={formatter}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  it('handles colors[i % colors.length] being undefined (?? "" fallback)', () => {
+    // Empty colors array → colors[0 % 0] === undefined → falls back to ''
+    expect(() =>
+      renderWithTheme(
+        <CategoryRowMulti
+          name='Empty'
+          values={[1, 2]}
+          maxValue={10}
+          colors={[]}
+          formatter={formatter}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  it('respects selected=false', () => {
+    expect(() =>
+      renderWithTheme(
+        <CategoryRowMulti
+          name='Sel'
+          values={[1]}
+          maxValue={10}
+          colors={['#f00']}
+          formatter={formatter}
+          selected={false}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  it('renders an empty bar container when values is empty', () => {
+    expect(() =>
+      renderWithTheme(
+        <CategoryRowMulti
+          name='Z'
+          values={[]}
+          maxValue={10}
+          colors={['#f00']}
+          formatter={formatter}
+        />,
+      ),
+    ).not.toThrow()
+  })
+})

package/src/widgets/echart/utils.test.ts

@@ -0,0 +1,277 @@
+import { describe, it, expect } from 'vitest'
+import type { Theme } from '@mui/material'
+
+import {
+  mergeEchartWidgetConfig,
+  getEChartZoomConfig,
+  getEChartBrushConfig,
+  getEChartStackConfig,
+} from './utils'
+
+const theme = {
+  spacing: (n: number) => `${n * 8}`,
+  palette: {
+    common: { white: '#ffffff' },
+    secondary: { main: '#3366ff' },
+    black: { 60: 'rgba(0,0,0,0.6)' },
+  },
+  typography: {
+    overlineDelicate: { fontSize: '11', fontFamily: 'Inter, sans-serif' },
+  },
+} as unknown as Theme
+
+describe('mergeEchartWidgetConfig', () => {
+  it('returns a deep-merged base + override when no custom merger is provided', () => {
+    const a = { title: { text: 'A' }, tooltip: { trigger: 'axis' } } as never
+    const b = { title: { subtext: 'sub' } } as never
+    const merged = mergeEchartWidgetConfig(a, b) as unknown as {
+      title: { text: string; subtext: string }
+    }
+    expect(merged.title.text).toBe('A')
+    expect(merged.title.subtext).toBe('sub')
+  })
+
+  it('handles both inputs being undefined (defaults to {})', () => {
+    const merged = mergeEchartWidgetConfig(undefined, undefined)
+    expect(merged).toEqual({})
+  })
+
+  it('replaces `color` arrays rather than concatenating', () => {
+    const merged = mergeEchartWidgetConfig(
+      { color: ['#ff0000', '#00ff00'] },
+      { color: ['#0000ff'] },
+    )
+    expect(merged.color).toEqual(['#0000ff'])
+  })
+
+  it('composes `axisLabel` formatter functions so base formatter can suppress', () => {
+    const base = {
+      xAxis: {
+        axisLabel: {
+          formatter: (v: unknown) => (v === 0 ? '' : `BASE-${String(v)}`),
+        },
+      },
+    }
+    const override = {
+      xAxis: {
+        axisLabel: {
+          formatter: (v: unknown) => `OVR-${String(v)}`,
+        },
+      },
+    }
+    const merged = mergeEchartWidgetConfig(base, override)
+    const fmt = (
+      merged.xAxis as { axisLabel: { formatter: (v: unknown) => unknown } }
+    ).axisLabel.formatter
+    expect(fmt(0)).toBe('') // base returned '' → suppressed
+    expect(fmt(5)).toBe('OVR-5') // base non-empty → fall through to override
+  })
+
+  it('merges plain object axisLabel keys when no formatter present', () => {
+    const merged = mergeEchartWidgetConfig(
+      { xAxis: { axisLabel: { color: 'red' } } },
+      { xAxis: { axisLabel: { fontSize: 12 } } },
+    )
+    const al = (merged.xAxis as { axisLabel: Record<string, unknown> })
+      .axisLabel
+    expect(al.color).toBe('red')
+    expect(al.fontSize).toBe(12)
+  })
+
+  it('merges `series` element-by-element rather than concatenating', () => {
+    const a = {
+      series: [
+        { name: 'a1', data: [1, 2] },
+        { name: 'a2', data: [3] },
+      ],
+    } as never
+    const b = { series: [{ barWidth: '60%' }] } as never
+    const merged = mergeEchartWidgetConfig(a, b) as unknown as {
+      series: { name?: string; barWidth?: string; data?: number[] }[]
+    }
+    const s = merged.series
+    expect(s).toHaveLength(2)
+    expect(s[0]!.name).toBe('a1')
+    expect(s[0]!.barWidth).toBe('60%')
+    expect(s[1]!.name).toBe('a2')
+  })
+
+  it('handles series merge when one side has no series array (defaults to length 0)', () => {
+    const merged = mergeEchartWidgetConfig(
+      { series: [{ name: 'only' }] },
+      { series: [] },
+    )
+    const s = merged.series as { name?: string }[]
+    expect(s).toHaveLength(1)
+    expect(s[0]!.name).toBe('only')
+  })
+
+  it('delegates to a custom merger when provided and it returns a function', () => {
+    const merged = mergeEchartWidgetConfig(
+      { title: { text: 'A' } },
+      { title: { text: 'B' } },
+      (key) =>
+        key === 'title'
+          ? (_a: unknown, b: unknown) => ({ ...(b as object), custom: true })
+          : undefined,
+    )
+    expect((merged.title as { text: string; custom: boolean }).text).toBe('B')
+    expect((merged.title as { text: string; custom: boolean }).custom).toBe(
+      true,
+    )
+  })
+
+  it('falls through to default merger when custom merger returns undefined for the key', () => {
+    const merged = mergeEchartWidgetConfig(
+      { color: ['#a'] },
+      { color: ['#b'] },
+      () => undefined,
+    )
+    expect(merged.color).toEqual(['#b'])
+  })
+})
+
+describe('getEChartZoomConfig', () => {
+  it('returns a default config (inside + xSlider) with no args', () => {
+    const cfg = getEChartZoomConfig()
+    expect(cfg.dataZoom).toBeDefined()
+    // inside + xSlider both true → 2 entries
+    expect(cfg.dataZoom.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('honours an explicit range start/end', () => {
+    const cfg = getEChartZoomConfig({ start: 25, end: 75 })
+    const insideCfg = cfg.dataZoom.find(
+      (z) => (z as { type: string }).type === 'inside',
+    ) as { start: number; end: number }
+    expect(insideCfg.start).toBe(25)
+    expect(insideCfg.end).toBe(75)
+  })
+
+  it('emits a vertical inside zoom when ySlider=true and inside=true', () => {
+    const cfg = getEChartZoomConfig(
+      { start: 0, end: 100 },
+      { inside: true, ySlider: true },
+    )
+    const verticalInside = cfg.dataZoom.find(
+      (z) =>
+        (z as { type: string; orientation?: string }).type === 'inside' &&
+        (z as { orientation?: string }).orientation === 'vertical',
+    )
+    expect(verticalInside).toBeDefined()
+  })
+
+  it('omits the inside entry when inside=false', () => {
+    const cfg = getEChartZoomConfig(
+      { start: 0, end: 100 },
+      { inside: false, xSlider: true },
+    )
+    const insideEntries = cfg.dataZoom.filter(
+      (z) => (z as { type: string }).type === 'inside',
+    )
+    expect(insideEntries).toHaveLength(0)
+  })
+
+  it('omits the xSlider entry when xSlider=false', () => {
+    const cfg = getEChartZoomConfig(
+      { start: 0, end: 100 },
+      { inside: false, xSlider: false, ySlider: false },
+    )
+    expect(cfg.dataZoom).toHaveLength(0)
+  })
+
+  it('includes a yAxis slider when ySlider=true', () => {
+    const cfg = getEChartZoomConfig(
+      { start: 0, end: 100 },
+      { inside: false, xSlider: false, ySlider: true },
+    )
+    const yAxisSlider = cfg.dataZoom.find((z) => {
+      const c = z as { type: string; yAxisIndex?: number[] }
+      return c.type === 'slider' && Array.isArray(c.yAxisIndex)
+    })
+    expect(yAxisSlider).toBeDefined()
+  })
+
+  it('respects bottomOffset for the xAxis slider', () => {
+    const cfg = getEChartZoomConfig(
+      { start: 0, end: 100 },
+      { bottomOffset: 16 },
+    )
+    const xSlider = cfg.dataZoom.find(
+      (z) =>
+        (z as { type: string; bottom?: number }).type === 'slider' &&
+        (z as { bottom?: number }).bottom === 16,
+    )
+    expect(xSlider).toBeDefined()
+  })
+
+  it('threads through xAxisLabelFormatter to the xSlider config', () => {
+    const fmt = (v: number) => `lbl-${v}`
+    const cfg = getEChartZoomConfig(
+      { start: 0, end: 100 },
+      { xAxisLabelFormatter: fmt },
+    )
+    const xSlider = cfg.dataZoom.find(
+      (z) =>
+        (z as { type: string; xAxisIndex?: number[] }).type === 'slider' &&
+        Array.isArray((z as { xAxisIndex?: number[] }).xAxisIndex),
+    ) as { labelFormatter: typeof fmt }
+    expect(xSlider.labelFormatter).toBe(fmt)
+  })
+
+  it('hides sliders when showSliders=false (`show` field is false)', () => {
+    const cfg = getEChartZoomConfig(
+      { start: 0, end: 100 },
+      { showSliders: false },
+    )
+    const xSlider = cfg.dataZoom.find(
+      (z) => (z as { type: string }).type === 'slider',
+    ) as { show: boolean }
+    expect(xSlider.show).toBe(false)
+  })
+
+  it('falls back to default spacing strings when theme.spacing is missing', () => {
+    const cfg = getEChartZoomConfig(undefined, undefined, undefined)
+    expect(cfg.dataZoom).toBeDefined()
+  })
+
+  it('applies theme-derived slider styles when a theme is provided', () => {
+    const cfg = getEChartZoomConfig({ start: 0, end: 100 }, undefined, theme)
+    const xSlider = cfg.dataZoom.find(
+      (z) =>
+        (z as { type: string; xAxisIndex?: number[] }).type === 'slider' &&
+        Array.isArray((z as { xAxisIndex?: number[] }).xAxisIndex),
+    ) as unknown as { fillerColor: string }
+    expect(xSlider.fillerColor).toBeDefined()
+  })
+})
+
+describe('getEChartBrushConfig', () => {
+  it('returns a default brush config when called with no args', () => {
+    const cfg = getEChartBrushConfig()
+    expect(cfg.brush.brushType).toBe('lineX')
+    expect(cfg.brush.brushMode).toBe('single')
+    expect(cfg.brush.xAxisIndex).toBe(0)
+  })
+
+  it('respects explicit brushType, brushMode, and xAxisIndex', () => {
+    const cfg = getEChartBrushConfig({
+      brushType: 'polygon',
+      brushMode: 'multiple',
+      xAxisIndex: 2,
+    })
+    expect(cfg.brush.brushType).toBe('polygon')
+    expect(cfg.brush.brushMode).toBe('multiple')
+    expect(cfg.brush.xAxisIndex).toBe(2)
+  })
+})
+
+describe('getEChartStackConfig', () => {
+  it('uses the default stack group when no arg passed', () => {
+    expect(getEChartStackConfig().stack).toBe('stacked')
+  })
+
+  it('respects an explicit stack group name', () => {
+    expect(getEChartStackConfig('foo').stack).toBe('foo')
+  })
+})

package/src/widgets/formula/config.test.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest'
+import { createRef } from 'react'
+import { formulaConfig, formulaDownloadConfig } from './config'
+
+describe('formulaConfig', () => {
+  it('returns an empty series array', () => {
+    const cfg = formulaConfig()
+    expect(cfg.series).toEqual([])
+  })
+})
+
+describe('formulaDownloadConfig', () => {
+  it('returns a two-item download config (PNG + CSV)', () => {
+    const refUI = createRef<HTMLDivElement>()
+    const cfg = formulaDownloadConfig({ refUI })
+    expect(cfg).toHaveLength(2)
+  })
+
+  it('CSV modifier maps numeric values out of data items', async () => {
+    const refUI = createRef<HTMLDivElement>()
+    const cfg = formulaDownloadConfig({ refUI })
+    const csvItem = cfg[1]!
+    // Spy-style: the underlying downloadToCSV.modifier is the only thing that
+    // actually returns. We just confirm `modifier` runs without throwing for
+    // both populated and empty inputs — that exercises the `?? []` branch.
+    await expect(
+      csvItem.modifier([{ value: 1 }, { value: 2 }]),
+    ).resolves.not.toThrow()
+    await expect(
+      csvItem.modifier(
+        undefined as unknown as Parameters<
+          NonNullable<typeof csvItem.modifier>
+        >[0],
+      ),
+    ).resolves.not.toThrow()
+  })
+})