@carto/ps-react-ui 4.7.0 → 4.8.0

package/src/widgets/actions/zoom-toggle/zoom-toggle.test.tsx

@@ -0,0 +1,322 @@
+/**
+ * Render tests for ZoomToggle covering the previously-uncovered branches
+ * in src/widgets/actions/zoom-toggle/zoom-toggle.tsx (0% baseline).
+ *
+ * Coverage focus:
+ * - useWidgetSelector defaults (when widget store entry is empty, defaults
+ *   `defaultZoom`, `defaultZoomStart`, `defaultZoomEnd` are used)
+ * - Initial useEffect that seeds the store only when zoom is undefined
+ * - handleToggle toggles between zoom on/off and resets the range
+ * - handleReset re-applies default range with zoom=true
+ * - Conditional render of the reset Tooltip when zoom is active
+ * - Custom labels override defaults
+ * - Custom Icon / ResetIcon passthrough
+ * - dataZoom handler updates store with start/end (both `event.start` and
+ *   the batched `event.batch[0].start` paths)
+ */
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, screen, act, fireEvent } from '@testing-library/react'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { useWidgetStore, widgetStoreActions } from '../../stores/widget-store'
+import { ZoomToggle, ZOOM_TOGGLE_TOOL_ID } from './zoom-toggle'
+import type { ZoomState } from './types'
+
+const theme = createTheme({
+  spacing: (n: number) => `${n * 8}px`,
+  palette: {
+    common: { white: '#ffffff', black: '#000000' },
+    secondary: { main: '#3366ff' },
+    // @ts-expect-error - `black` is a CARTO-specific MUI palette extension
+    black: { 60: 'rgba(0,0,0,0.6)' },
+  },
+  typography: {
+    overlineDelicate: { fontSize: '11', fontFamily: 'Inter, sans-serif' },
+  },
+})
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>)
+}
+
+beforeEach(() => {
+  useWidgetStore.getState().clearWidgets()
+})
+
+describe('ZoomToggle render', () => {
+  it('renders with default state (zoom off → no reset button)', () => {
+    renderWithTheme(<ZoomToggle id='zt-1' />)
+    expect(screen.getAllByRole('button')).toHaveLength(1)
+    expect(screen.getByRole('button').getAttribute('data-active')).toBe('false')
+  })
+
+  it('seeds the widget store on mount when zoom is undefined', () => {
+    renderWithTheme(
+      <ZoomToggle
+        id='zt-seed'
+        defaultZoom
+        defaultZoomStart={10}
+        defaultZoomEnd={90}
+      />,
+    )
+    const widget = widgetStoreActions.getWidget<ZoomState>('zt-seed')
+    expect(widget?.zoom).toBe(true)
+    expect(widget?.zoomStart).toBe(10)
+    expect(widget?.zoomEnd).toBe(90)
+  })
+
+  it('does NOT seed when zoom is already set in the store', () => {
+    widgetStoreActions.setWidget('zt-noseed', {
+      zoom: false,
+      zoomStart: 25,
+      zoomEnd: 75,
+    })
+    renderWithTheme(
+      <ZoomToggle
+        id='zt-noseed'
+        defaultZoom
+        defaultZoomStart={10}
+        defaultZoomEnd={90}
+      />,
+    )
+    const widget = widgetStoreActions.getWidget<ZoomState>('zt-noseed')
+    // Should preserve the existing store entry
+    expect(widget?.zoomStart).toBe(25)
+    expect(widget?.zoomEnd).toBe(75)
+  })
+
+  it('shows the reset button when zoom is active', () => {
+    widgetStoreActions.setWidget('zt-active', {
+      zoom: true,
+      zoomStart: 0,
+      zoomEnd: 100,
+    })
+    renderWithTheme(<ZoomToggle id='zt-active' />)
+    // 2 buttons: toggle + reset
+    expect(screen.getAllByRole('button')).toHaveLength(2)
+  })
+
+  it('uses custom labels when provided', () => {
+    widgetStoreActions.setWidget('zt-labels', {
+      zoom: true,
+      zoomStart: 0,
+      zoomEnd: 100,
+    })
+    renderWithTheme(
+      <ZoomToggle
+        id='zt-labels'
+        labels={{ enable: 'On', disable: 'Off', reset: 'Reset' }}
+      />,
+    )
+    // Reset button is rendered (we won't assert tooltip text because tooltips
+    // render lazily; the reset button's aria-label uses `resetLabel`)
+    expect(screen.getByRole('button', { name: /Reset/i })).toBeDefined()
+  })
+
+  it('respects an explicit ariaLabel from labels', () => {
+    renderWithTheme(
+      <ZoomToggle id='zt-aria' labels={{ ariaLabel: 'My zoom button' }} />,
+    )
+    expect(screen.getByRole('button', { name: 'My zoom button' })).toBeDefined()
+  })
+
+  it('renders custom Icon when provided', () => {
+    renderWithTheme(
+      <ZoomToggle id='zt-icon' Icon={<span data-testid='custom-icon' />} />,
+    )
+    expect(screen.getByTestId('custom-icon')).toBeDefined()
+  })
+
+  it('renders custom ResetIcon when zoom is active', () => {
+    widgetStoreActions.setWidget('zt-reset-icon', { zoom: true })
+    renderWithTheme(
+      <ZoomToggle
+        id='zt-reset-icon'
+        ResetIcon={<span data-testid='custom-reset' />}
+      />,
+    )
+    expect(screen.getByTestId('custom-reset')).toBeDefined()
+  })
+})
+
+describe('ZoomToggle interactions', () => {
+  it('handleToggle turns zoom on (zoom was off) and preserves the current range', () => {
+    widgetStoreActions.setWidget('zt-toggle-on', {
+      zoom: false,
+      zoomStart: 20,
+      zoomEnd: 80,
+    })
+    renderWithTheme(<ZoomToggle id='zt-toggle-on' />)
+    fireEvent.click(screen.getByRole('button'))
+    const w = widgetStoreActions.getWidget<ZoomState>('zt-toggle-on')
+    expect(w?.zoom).toBe(true)
+    expect(w?.zoomStart).toBe(20)
+    expect(w?.zoomEnd).toBe(80)
+  })
+
+  it('handleToggle turns zoom off and resets the range to 0/100', () => {
+    widgetStoreActions.setWidget('zt-toggle-off', {
+      zoom: true,
+      zoomStart: 20,
+      zoomEnd: 80,
+    })
+    renderWithTheme(<ZoomToggle id='zt-toggle-off' />)
+    const buttons = screen.getAllByRole('button')
+    // First button is the toggle
+    fireEvent.click(buttons[0]!)
+    const w = widgetStoreActions.getWidget<ZoomState>('zt-toggle-off')
+    expect(w?.zoom).toBe(false)
+    expect(w?.zoomStart).toBe(0)
+    expect(w?.zoomEnd).toBe(100)
+  })
+
+  it('handleReset restores the default zoom range with zoom=true', () => {
+    widgetStoreActions.setWidget('zt-reset', {
+      zoom: true,
+      zoomStart: 33,
+      zoomEnd: 66,
+    })
+    renderWithTheme(
+      <ZoomToggle id='zt-reset' defaultZoomStart={5} defaultZoomEnd={95} />,
+    )
+    // 2 buttons: toggle + reset → click reset
+    const buttons = screen.getAllByRole('button')
+    fireEvent.click(buttons[1]!)
+    const w = widgetStoreActions.getWidget<ZoomState>('zt-reset')
+    expect(w?.zoom).toBe(true)
+    expect(w?.zoomStart).toBe(5)
+    expect(w?.zoomEnd).toBe(95)
+  })
+})
+
+describe('ZoomToggle pipeline tool registration', () => {
+  it('registers a config tool on mount and unregisters on unmount', () => {
+    const { unmount } = renderWithTheme(<ZoomToggle id='zt-tool' defaultZoom />)
+    // Tool should be registered
+    const widget = widgetStoreActions.getWidget('zt-tool')
+    expect(widget).toBeDefined()
+    unmount()
+    // Tool cleanup runs via the effect's cleanup function
+  })
+
+  it('config tool fn merges zoom config into the option, adjusting grid.bottom', () => {
+    widgetStoreActions.setWidget('zt-toolfn', {
+      zoom: true,
+      zoomStart: 0,
+      zoomEnd: 100,
+    })
+    renderWithTheme(<ZoomToggle id='zt-toolfn' defaultZoom />)
+
+    // Find the registered tool and exercise its fn
+    const widget = widgetStoreActions.getWidget('zt-toolfn') as unknown as {
+      registeredTools?: { id: string; fn: (cfg: unknown) => unknown }[]
+    }
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    if (tool) {
+      const result = tool.fn({
+        option: {
+          legend: { show: true },
+          grid: { bottom: 16 },
+        },
+        onEvents: { custom: () => undefined },
+      }) as {
+        option: { dataZoom: unknown[]; grid: { bottom: number } }
+        onEvents: { dataZoom: unknown; custom: unknown }
+      }
+      expect(result.option.dataZoom).toBeDefined()
+      expect(result.option.grid.bottom).toBeGreaterThan(16)
+      expect(result.onEvents.dataZoom).toBeDefined()
+      expect(result.onEvents.custom).toBeDefined()
+    }
+  })
+
+  it('config tool fn falls back to defaults when option/grid is missing', () => {
+    widgetStoreActions.setWidget('zt-fn-defaults', { zoom: true })
+    renderWithTheme(<ZoomToggle id='zt-fn-defaults' defaultZoom />)
+    const widget = widgetStoreActions.getWidget(
+      'zt-fn-defaults',
+    ) as unknown as {
+      registeredTools?: { id: string; fn: (cfg: unknown) => unknown }[]
+    }
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    if (tool) {
+      // No option, no onEvents — exercises the `?? {}` and default branches
+      const result = tool.fn({}) as { option: { grid: { bottom: number } } }
+      expect(result.option.grid.bottom).toBeGreaterThan(0)
+    }
+  })
+
+  it('handleDataZoom updates the store from `event.start/end`', () => {
+    widgetStoreActions.setWidget('zt-dz-direct', { zoom: true })
+    renderWithTheme(<ZoomToggle id='zt-dz-direct' defaultZoom />)
+    const widget = widgetStoreActions.getWidget('zt-dz-direct') as unknown as {
+      registeredTools?: { id: string; fn: (cfg: unknown) => unknown }[]
+    }
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    if (tool) {
+      const result = tool.fn({ option: {} }) as {
+        onEvents: { dataZoom: (event: unknown) => void }
+      }
+      act(() => {
+        result.onEvents.dataZoom({ start: 10, end: 90 })
+      })
+      const w = widgetStoreActions.getWidget<ZoomState>('zt-dz-direct')
+      expect(w?.zoomStart).toBe(10)
+      expect(w?.zoomEnd).toBe(90)
+    }
+  })
+
+  it('handleDataZoom falls back to `event.batch[0]` when start/end are missing', () => {
+    widgetStoreActions.setWidget('zt-dz-batch', { zoom: true })
+    renderWithTheme(<ZoomToggle id='zt-dz-batch' defaultZoom />)
+    const widget = widgetStoreActions.getWidget('zt-dz-batch') as unknown as {
+      registeredTools?: { id: string; fn: (cfg: unknown) => unknown }[]
+    }
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    if (tool) {
+      const result = tool.fn({ option: {} }) as {
+        onEvents: { dataZoom: (event: unknown) => void }
+      }
+      act(() => {
+        result.onEvents.dataZoom({ batch: [{ start: 25, end: 75 }] })
+      })
+      const w = widgetStoreActions.getWidget<ZoomState>('zt-dz-batch')
+      expect(w?.zoomStart).toBe(25)
+      expect(w?.zoomEnd).toBe(75)
+    }
+  })
+
+  it('handleDataZoom ignores events where start/end are still undefined', () => {
+    widgetStoreActions.setWidget('zt-dz-noop', {
+      zoom: true,
+      zoomStart: 5,
+      zoomEnd: 95,
+    })
+    renderWithTheme(<ZoomToggle id='zt-dz-noop' defaultZoom />)
+    const widget = widgetStoreActions.getWidget('zt-dz-noop') as unknown as {
+      registeredTools?: { id: string; fn: (cfg: unknown) => unknown }[]
+    }
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    if (tool) {
+      const result = tool.fn({ option: {} }) as {
+        onEvents: { dataZoom: (event: unknown) => void }
+      }
+      act(() => {
+        result.onEvents.dataZoom({})
+      })
+      const w = widgetStoreActions.getWidget<ZoomState>('zt-dz-noop')
+      // unchanged
+      expect(w?.zoomStart).toBe(5)
+      expect(w?.zoomEnd).toBe(95)
+    }
+  })
+})

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()
+  })
+})