@carto/ps-react-ui 4.7.1 → 4.8.0

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

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