@carto/ps-react-ui 4.7.0 → 4.8.0

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

@@ -0,0 +1,208 @@
+/**
+ * Render tests for BrushToggle covering the previously-uncovered branches
+ * in src/widgets/actions/brush-toggle/brush-toggle.tsx (0/72 baseline).
+ *
+ * Coverage focus:
+ * - useWidgetSelector default (defaultEnabled when no store entry)
+ * - Initial seed useEffect only fires when brush is undefined
+ * - handleToggle: brush=false → true (clears rectangles + invokes consumer
+ *   callback) vs brush=true → false (preserves rectangles)
+ * - Consumer-driven clear effect (`selections === 0` branch with vs without
+ *   rectangles/selection)
+ * - lastSelectionRef gating (callback fires only once per new selection)
+ * - Custom labels, custom Icon, custom IconButtonProps
+ *
+ * Does NOT render BrushOverlay logic — that's a separate file with its own
+ * 177-branch surface. BrushOverlay is included via the BrushToggle JSX, but
+ * its rendering happens lazily and the overlay's pointer logic isn't
+ * exercised here.
+ */
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { useWidgetStore, widgetStoreActions } from '../../stores/widget-store'
+import { BrushToggle } from './brush-toggle'
+import type { BrushState } from './types'
+
+const theme = createTheme({
+  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)' },
+  },
+})
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>)
+}
+
+beforeEach(() => {
+  useWidgetStore.getState().clearWidgets()
+})
+
+describe('BrushToggle render', () => {
+  it('renders with brush off (default)', () => {
+    renderWithTheme(<BrushToggle id='bt-1' />)
+    const button = screen.getByRole('button')
+    expect(button.getAttribute('data-active')).toBe('false')
+  })
+
+  it('seeds the widget store on mount when brush is undefined', () => {
+    renderWithTheme(<BrushToggle id='bt-seed' defaultEnabled />)
+    const widget = widgetStoreActions.getWidget<BrushState>('bt-seed')
+    expect(widget?.brush).toBe(true)
+  })
+
+  it('does NOT seed when brush is already set in the store', () => {
+    widgetStoreActions.setWidget('bt-noseed', { brush: false })
+    renderWithTheme(<BrushToggle id='bt-noseed' defaultEnabled />)
+    const widget = widgetStoreActions.getWidget<BrushState>('bt-noseed')
+    expect(widget?.brush).toBe(false)
+  })
+
+  it('uses custom labels for aria-label', () => {
+    renderWithTheme(
+      <BrushToggle
+        id='bt-labels'
+        labels={{ enable: 'Brush on', disable: 'Brush off' }}
+      />,
+    )
+    expect(screen.getByRole('button', { name: 'Brush on' })).toBeDefined()
+  })
+
+  it('respects an explicit ariaLabel', () => {
+    renderWithTheme(
+      <BrushToggle
+        id='bt-aria'
+        labels={{ ariaLabel: 'Toggle brush selection' }}
+      />,
+    )
+    expect(
+      screen.getByRole('button', { name: 'Toggle brush selection' }),
+    ).toBeDefined()
+  })
+
+  it('renders custom Icon when provided', () => {
+    renderWithTheme(
+      <BrushToggle id='bt-icon' Icon={<span data-testid='custom-icon' />} />,
+    )
+    expect(screen.getByTestId('custom-icon')).toBeDefined()
+  })
+})
+
+describe('BrushToggle interactions', () => {
+  it('handleToggle: brush=false → true clears rectangles and invokes consumer callback with empty selection', () => {
+    const onBrushSelected = vi.fn()
+    widgetStoreActions.setWidget('bt-on', { brush: false })
+    renderWithTheme(
+      <BrushToggle id='bt-on' onBrushSelected={onBrushSelected} />,
+    )
+    fireEvent.click(screen.getByRole('button'))
+    const w = widgetStoreActions.getWidget<BrushState>('bt-on')
+    expect(w?.brush).toBe(true)
+    expect(w?.brushRects).toEqual([])
+    expect(onBrushSelected).toHaveBeenCalledWith({
+      dataIndex: [],
+      seriesIndex: 0,
+    })
+  })
+
+  it('handleToggle: brush=true → false does NOT clear rectangles', () => {
+    widgetStoreActions.setWidget('bt-off', {
+      brush: true,
+      brushRects: [{ x: 1, y: 2, w: 3, h: 4 }],
+    })
+    const onBrushSelected = vi.fn()
+    renderWithTheme(
+      <BrushToggle id='bt-off' onBrushSelected={onBrushSelected} />,
+    )
+    fireEvent.click(screen.getByRole('button'))
+    const w = widgetStoreActions.getWidget<BrushState>('bt-off')
+    expect(w?.brush).toBe(false)
+    // Rectangles preserved
+    expect(w?.brushRects).toHaveLength(1)
+    // Consumer callback not invoked on the disable transition
+    expect(onBrushSelected).not.toHaveBeenCalled()
+  })
+
+  it('works when onBrushSelected is not provided (`?.` short-circuit)', () => {
+    widgetStoreActions.setWidget('bt-no-cb', { brush: false })
+    renderWithTheme(<BrushToggle id='bt-no-cb' />)
+    fireEvent.click(screen.getByRole('button'))
+    const w = widgetStoreActions.getWidget<BrushState>('bt-no-cb')
+    expect(w?.brush).toBe(true)
+  })
+})
+
+describe('BrushToggle consumer-driven clear (selections=0)', () => {
+  it('clears stored rectangles + selection when `selections` transitions to 0', () => {
+    widgetStoreActions.setWidget('bt-clear', {
+      brush: true,
+      brushRects: [{ x: 1, y: 2, w: 3, h: 4 }],
+      brushSelection: { dataIndex: [1, 2, 3], seriesIndex: 0 },
+    })
+    renderWithTheme(<BrushToggle id='bt-clear' selections={0} />)
+    const w = widgetStoreActions.getWidget<BrushState>('bt-clear')
+    expect(w?.brushRects).toEqual([])
+    expect(w?.brushSelection?.dataIndex).toEqual([])
+  })
+
+  it('is a no-op when there is nothing to clear', () => {
+    widgetStoreActions.setWidget('bt-clear-nop', {
+      brush: true,
+      brushRects: [],
+      brushSelection: { dataIndex: [], seriesIndex: 0 },
+    })
+    renderWithTheme(<BrushToggle id='bt-clear-nop' selections={0} />)
+    const w = widgetStoreActions.getWidget<BrushState>('bt-clear-nop')
+    // Still empty; effect should have short-circuited
+    expect(w?.brushRects).toEqual([])
+  })
+
+  it('does nothing when `selections` is non-zero', () => {
+    widgetStoreActions.setWidget('bt-nonzero', {
+      brush: true,
+      brushRects: [{ x: 0, y: 0, w: 1, h: 1 }],
+      brushSelection: { dataIndex: [5], seriesIndex: 0 },
+    })
+    renderWithTheme(<BrushToggle id='bt-nonzero' selections={3} />)
+    const w = widgetStoreActions.getWidget<BrushState>('bt-nonzero')
+    expect(w?.brushRects).toHaveLength(1)
+    expect(w?.brushSelection?.dataIndex).toEqual([5])
+  })
+})
+
+describe('BrushToggle selection-callback effect', () => {
+  it('invokes onBrushSelected when the store selection changes', () => {
+    const onBrushSelected = vi.fn()
+    widgetStoreActions.setWidget('bt-sel', {
+      brush: true,
+      brushSelection: { dataIndex: [1, 2], seriesIndex: 0 },
+    })
+    renderWithTheme(
+      <BrushToggle id='bt-sel' onBrushSelected={onBrushSelected} />,
+    )
+    expect(onBrushSelected).toHaveBeenCalledWith({
+      dataIndex: [1, 2],
+      seriesIndex: 0,
+    })
+  })
+
+  it('does not double-invoke for the same selection reference', () => {
+    const onBrushSelected = vi.fn()
+    widgetStoreActions.setWidget('bt-sel-dup', {
+      brush: true,
+      brushSelection: { dataIndex: [1], seriesIndex: 0 },
+    })
+    const { rerender } = renderWithTheme(
+      <BrushToggle id='bt-sel-dup' onBrushSelected={onBrushSelected} />,
+    )
+    rerender(
+      <ThemeProvider theme={theme}>
+        <BrushToggle id='bt-sel-dup' onBrushSelected={onBrushSelected} />
+      </ThemeProvider>,
+    )
+    expect(onBrushSelected).toHaveBeenCalledTimes(1)
+  })
+})

package/src/widgets/actions/change-column/change-column-dnd.test.tsx

@@ -0,0 +1,193 @@
+/**
+ * Tests for ChangeColumn's handleDragEnd + reorderFn branches that
+ * require driving the @dnd-kit/core onDragEnd callback. Uses the shared
+ * `tests/mocks/dnd-kit` harness so the DnD-kit pointer machinery is
+ * replaced with a passthrough that exposes the onDragEnd prop directly.
+ *
+ * Complements the existing change-column.test.tsx which covers render +
+ * menu + tool-registration but doesn't drive drag events.
+ */
+import { describe, test, expect, beforeEach, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import {
+  dndKitCoreMock,
+  dndKitSortableMock,
+  lastDndContextProps,
+  resetDndKitMocks,
+} from '../../../../tests/mocks/dnd-kit'
+
+vi.mock('@dnd-kit/core', () => dndKitCoreMock())
+vi.mock('@dnd-kit/sortable', () => dndKitSortableMock())
+
+import { ChangeColumn, CHANGE_COLUMN_TOOL_ID } from './change-column'
+import { useWidgetStore } from '../../stores/widget-store'
+import type { TableColumn } from '../../table/types'
+
+const widgetId = 'change-column-dnd'
+const columns: TableColumn[] = [
+  { id: 'name', label: 'Name' },
+  { id: 'country', label: 'Country' },
+  { id: 'population', label: 'Population' },
+]
+
+function seedColumns(extra: Partial<{ columns: TableColumn[] }> = {}) {
+  useWidgetStore.getState().setWidget(widgetId, {
+    columns,
+    ...extra,
+  })
+}
+
+beforeEach(() => {
+  useWidgetStore.getState().clearWidgets()
+  resetDndKitMocks()
+})
+
+describe('handleDragEnd branches', () => {
+  test('reorders columns when active and over differ', () => {
+    seedColumns()
+    render(<ChangeColumn id={widgetId} />)
+
+    // Drag 'name' (index 0) over 'population' (index 2)
+    lastDndContextProps().onDragEnd?.({
+      active: { id: 'name' },
+      over: { id: 'population' },
+    })
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const result = (widget as unknown as { columns: TableColumn[] }).columns
+    expect(result.map((c) => c.id)).toEqual(['country', 'population', 'name'])
+  })
+
+  test('no-op when `over` is missing (drop outside the sortable area)', () => {
+    seedColumns()
+    render(<ChangeColumn id={widgetId} />)
+    const before = useWidgetStore.getState().getWidget(widgetId)
+    lastDndContextProps().onDragEnd?.({
+      active: { id: 'name' },
+      over: null,
+    })
+    const after = useWidgetStore.getState().getWidget(widgetId)
+    // No reorder; column order unchanged
+    const beforeIds = (
+      before as unknown as { columns: TableColumn[] }
+    ).columns.map((c) => c.id)
+    const afterIds = (
+      after as unknown as { columns: TableColumn[] }
+    ).columns.map((c) => c.id)
+    expect(afterIds).toEqual(beforeIds)
+  })
+
+  test('no-op when active.id === over.id (no movement)', () => {
+    seedColumns()
+    render(<ChangeColumn id={widgetId} />)
+    lastDndContextProps().onDragEnd?.({
+      active: { id: 'name' },
+      over: { id: 'name' },
+    })
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const result = (widget as unknown as { columns: TableColumn[] }).columns
+    expect(result.map((c) => c.id)).toEqual(['name', 'country', 'population'])
+  })
+
+  test('no-op when widget has no columns (returns early)', () => {
+    // No columns seeded but the component renders for the test we still
+    // want to set up — minimum 2 columns are required for the menu to open.
+    // Render with 2 columns then clear them.
+    seedColumns()
+    render(<ChangeColumn id={widgetId} />)
+    useWidgetStore.getState().setWidget(widgetId, { columns: undefined })
+    expect(() =>
+      lastDndContextProps().onDragEnd?.({
+        active: { id: 'name' },
+        over: { id: 'country' },
+      }),
+    ).not.toThrow()
+  })
+
+  test('no-op when active.id is not found in columns (oldIndex === -1)', () => {
+    seedColumns()
+    render(<ChangeColumn id={widgetId} />)
+    lastDndContextProps().onDragEnd?.({
+      active: { id: 'unknown-col' },
+      over: { id: 'name' },
+    })
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const result = (widget as unknown as { columns: TableColumn[] }).columns
+    expect(result.map((c) => c.id)).toEqual(['name', 'country', 'population'])
+  })
+
+  test('no-op when over.id is not found in columns (newIndex === -1)', () => {
+    seedColumns()
+    render(<ChangeColumn id={widgetId} />)
+    lastDndContextProps().onDragEnd?.({
+      active: { id: 'name' },
+      over: { id: 'unknown-col' },
+    })
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const result = (widget as unknown as { columns: TableColumn[] }).columns
+    expect(result.map((c) => c.id)).toEqual(['name', 'country', 'population'])
+  })
+})
+
+describe('reorderFn branches', () => {
+  test('returns currentConfig when widget has no columns', () => {
+    seedColumns()
+    render(<ChangeColumn id={widgetId} />)
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === CHANGE_COLUMN_TOOL_ID,
+    )
+    // Clear columns from the widget
+    useWidgetStore.getState().setWidget(widgetId, { columns: [] })
+    const input = { columns }
+    expect(tool?.fn(input)).toBe(input)
+  })
+
+  test('returns currentConfig when config has no columns', () => {
+    seedColumns()
+    render(<ChangeColumn id={widgetId} />)
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === CHANGE_COLUMN_TOOL_ID,
+    )
+    const input = { columns: [] }
+    expect(tool?.fn(input)).toBe(input)
+  })
+
+  test('returns currentConfig when config columns key is undefined', () => {
+    seedColumns()
+    render(<ChangeColumn id={widgetId} />)
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === CHANGE_COLUMN_TOOL_ID,
+    )
+    const input = { other: 1 }
+    expect(tool?.fn(input)).toBe(input)
+  })
+
+  test('drops config columns that have no widget-column counterpart', () => {
+    seedColumns({ columns: [{ id: 'name', label: 'Name' }] }) // widget has only 'name'
+    render(<ChangeColumn id={widgetId} />)
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === CHANGE_COLUMN_TOOL_ID,
+    )
+    // Config has more columns; the reorder drops the loop's `if (col)` true
+    // path for matches and the trailing "append leftovers" loop for extras.
+    // With widget=['name'], the reordered result should be ['name'] followed
+    // by the remaining config columns in their original order.
+    const input = {
+      columns: [
+        { id: 'population', label: 'Population' },
+        { id: 'name', label: 'Name' },
+        { id: 'country', label: 'Country' },
+      ],
+    }
+    const result = tool?.fn(input) as { columns: TableColumn[] }
+    expect(result.columns.map((c) => c.id)).toEqual([
+      'name',
+      'population',
+      'country',
+    ])
+  })
+})

package/src/widgets/actions/change-column/sortable-column-item.test.tsx

@@ -0,0 +1,124 @@
+/**
+ * Tests for SortableColumnItem — a DnD-kit sortable menu item.
+ *
+ * `useSortable` is mocked so we can drive isDragging / transform independently
+ * and exercise the conditional style branches without spinning up a real
+ * DndContext + SortableContext.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render } from '@testing-library/react'
+
+// Mock @dnd-kit/sortable's useSortable. Tests can override the return value
+// per-test via setSortableReturn.
+interface SortableReturn {
+  attributes: Record<string, unknown>
+  listeners: Record<string, unknown>
+  setNodeRef: (el: HTMLElement | null) => void
+  transform: { x: number; y: number; scaleX: number; scaleY: number } | null
+  transition: string | undefined
+  isDragging: boolean
+}
+
+let sortableReturn: SortableReturn = {
+  attributes: { 'aria-roledescription': 'sortable' },
+  listeners: {},
+  setNodeRef: () => undefined,
+  transform: null,
+  transition: undefined,
+  isDragging: false,
+}
+
+const setSortableReturn = (overrides: Partial<SortableReturn>) => {
+  sortableReturn = { ...sortableReturn, ...overrides }
+}
+
+vi.mock('@dnd-kit/sortable', () => ({
+  useSortable: () => sortableReturn,
+}))
+
+import { SortableColumnItem } from './sortable-column-item'
+import type { TableColumn } from '../../table/types'
+
+const baseColumn: TableColumn = {
+  id: 'col-1',
+  label: 'Name',
+}
+
+beforeEach(() => {
+  // Reset to defaults so each test starts clean.
+  sortableReturn = {
+    attributes: { 'aria-roledescription': 'sortable' },
+    listeners: {},
+    setNodeRef: () => undefined,
+    transform: null,
+    transition: undefined,
+    isDragging: false,
+  }
+})
+
+describe('SortableColumnItem', () => {
+  it('renders the column label', () => {
+    const { getByText } = render(<SortableColumnItem column={baseColumn} />)
+    expect(getByText('Name')).toBeDefined()
+  })
+
+  it('renders as a menuitem role', () => {
+    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
+    expect(getByRole('menuitem')).toBeDefined()
+  })
+
+  it('applies grab cursor + opacity=1 when not dragging', () => {
+    setSortableReturn({ isDragging: false })
+    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
+    const item = getByRole('menuitem')
+    expect(item.style.cursor).toBe('grab')
+    expect(item.style.opacity).toBe('1')
+  })
+
+  it('applies grabbing cursor + opacity=0.5 when dragging', () => {
+    setSortableReturn({ isDragging: true })
+    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
+    const item = getByRole('menuitem')
+    expect(item.style.cursor).toBe('grabbing')
+    expect(item.style.opacity).toBe('0.5')
+  })
+
+  it('forces transform.x to 0 when transform is non-null (vertical-only drag)', () => {
+    setSortableReturn({
+      transform: { x: 50, y: 20, scaleX: 1, scaleY: 1 },
+      transition: 'transform 200ms ease',
+    })
+    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
+    const item = getByRole('menuitem')
+    // CSS.Transform.toString({x: 0, y: 20, ...}) → 'translate3d(0px, 20px, 0)'
+    expect(item.style.transform).toContain('0px')
+    expect(item.style.transform).toContain('20px')
+  })
+
+  it('handles a null transform (no drag offset applied)', () => {
+    setSortableReturn({ transform: null })
+    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
+    const item = getByRole('menuitem')
+    // CSS.Transform.toString(null) is undefined → no transform attr
+    expect(item.style.transform).toBe('')
+  })
+
+  it('threads dnd-kit attributes onto the rendered element', () => {
+    setSortableReturn({
+      attributes: { 'aria-roledescription': 'draggable column' },
+    })
+    const { getByRole } = render(<SortableColumnItem column={baseColumn} />)
+    expect(getByRole('menuitem').getAttribute('aria-roledescription')).toBe(
+      'draggable column',
+    )
+  })
+
+  it('renders a column with a ReactNode label', () => {
+    const column: TableColumn = {
+      id: 'col-x',
+      label: <span data-testid='custom-label'>Custom</span>,
+    }
+    const { getByTestId } = render(<SortableColumnItem column={column} />)
+    expect(getByTestId('custom-label')).toBeDefined()
+  })
+})