@carto/ps-react-ui 4.4.0-chat-ui.5 → 4.4.0-chat-ui.7

package/src/widgets/actions/searcher/searcher.tsx

@@ -1,7 +1,8 @@
 import { TextField, InputAdornment, IconButton } from '@mui/material'
 import { ClearOutlined, SearchOutlined } from '@mui/icons-material'
 import { useEffect, useRef, useCallback } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import type { SearcherProps, SearcherFilterFn, SearcherState } from './types'
 import type { EchartWidgetData } from '../../echart/types'
 import { LOCK_SELECTION_TOOL_ID } from '../lock-selection/lock-selection'
@@ -41,61 +42,59 @@ export function Searcher({
   const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   // Read enabled state and search text from widget store
-  const widgetState = useWidgetStore((state) =>
-    state.getWidget<SearcherState>(id),
-  )
-  const enabled = widgetState?.isSearchEnabled ?? false
-  const searchText = widgetState?.searchText ?? ''
+  const { enabled, searchText } = useWidgetSelector(id, (w) => ({
+    enabled: (w as SearcherState | undefined)?.isSearchEnabled ?? false,
+    searchText: (w as SearcherState | undefined)?.searchText ?? '',
+  }))
   const prevEnabledRef = useRef(enabled)
 
   const filter = filterFn ?? defaultFilterFn
 
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
-
   const setSearchText = useCallback(
     (text: string) => {
-      setWidget(id, { searchText: text })
+      widgetStoreActions.setWidget(id, { searchText: text })
     },
-    [id, setWidget],
+    [id],
   )
 
-  // Register tool on mount
+  // Register tool once — fn reads searchText from the store at execution time.
+  // Enabled is synced separately to avoid full re-registration on toggle.
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: SEARCHER_TOOL_ID,
       order,
-      enabled,
-      fn: async (data, config) => {
-        const searchTextFromConfig = (config?.searchText as string) || ''
+      enabled: false,
+      fn: async (data) => {
+        const widget = widgetStoreActions.getWidget<SearcherState>(id)
+        const currentSearchText = widget?.searchText ?? ''
 
         // Execute filter (can be sync or async)
-        const result = filter(data as EchartWidgetData, searchTextFromConfig)
+        const result = filter(data as EchartWidgetData, currentSearchText)
 
         // Return result directly (pipeline will handle Promise)
         return result
       },
-      config: { searchText },
       disables: [LOCK_SELECTION_TOOL_ID],
     })
 
-    return () => unregisterTool(id, SEARCHER_TOOL_ID)
-  }, [id, order, filter, registerTool, unregisterTool, enabled, searchText])
+    return () => widgetStoreActions.unregisterTool(id, SEARCHER_TOOL_ID)
+  }, [id, order, filter])
 
-  // Update config when search text changes (debounced)
-  const debouncedUpdateConfig = useCallback(
-    (text: string) => {
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current)
-      }
-      debounceTimeoutRef.current = setTimeout(() => {
-        updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: text })
-      }, debounceDelay)
-    },
-    [id, updateToolConfig, debounceDelay],
-  )
+  // Sync enabled from store — lightweight, no re-registration
+  useEffect(() => {
+    widgetStoreActions.setToolEnabled(id, SEARCHER_TOOL_ID, enabled)
+  }, [id, enabled])
+
+  // Trigger pipeline re-execution when search text changes (debounced).
+  // The fn reads searchText from the store, so we just need to trigger the pipeline.
+  const debouncedTriggerPipeline = useCallback(() => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current)
+    }
+    debounceTimeoutRef.current = setTimeout(() => {
+      widgetStoreActions.triggerToolPipeline(id)
+    }, debounceDelay)
+  }, [id, debounceDelay])
 
   // Auto-focus when enabled becomes true
   useEffect(() => {
@@ -120,18 +119,18 @@ export function Searcher({
     (event: React.ChangeEvent<HTMLInputElement>) => {
       const newValue = event.target.value
       setSearchText(newValue)
-      debouncedUpdateConfig(newValue)
+      debouncedTriggerPipeline()
     },
-    [debouncedUpdateConfig, setSearchText],
+    [debouncedTriggerPipeline, setSearchText],
   )
 
   const handleClear = useCallback(() => {
     setSearchText('')
-    updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: '' })
+    widgetStoreActions.triggerToolPipeline(id)
     if (inputRef.current) {
       inputRef.current.focus()
     }
-  }, [id, setSearchText, updateToolConfig])
+  }, [id, setSearchText])
 
   if (!enabled) {
     return null
@@ -188,10 +187,8 @@ const defaultFilterFn: SearcherFilterFn = (
   return Promise.resolve(
     data.map((series) =>
       series.filter((item) =>
-        Object.values(item).some(
-          (value) =>
-            typeof value === 'string' &&
-            value.toLowerCase().includes(lowerSearch),
+        Object.values(item).some((value) =>
+          String(value).toLowerCase().includes(lowerSearch),
         ),
       ),
     ),

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

@@ -49,7 +49,7 @@ describe('StackToggle', () => {
     const tool = widget?.registeredTools?.find(
       (t) => t.id === STACK_TOGGLE_TOOL_ID,
     )
-    expect(tool?.config?.stacked).toBe(true)
+    expect(tool?.enabled).toBe(true)
   })
 
   test('toggles back to unstacked mode', () => {
@@ -67,7 +67,7 @@ describe('StackToggle', () => {
     const tool = widget?.registeredTools?.find(
       (t) => t.id === STACK_TOGGLE_TOOL_ID,
     )
-    expect(tool?.config?.stacked).toBe(false)
+    expect(tool?.enabled).toBe(false)
   })
 
   test('has active state when in stacked mode', () => {
@@ -112,7 +112,7 @@ describe('StackToggle', () => {
     const tool = widget?.registeredTools?.find(
       (t) => t.id === STACK_TOGGLE_TOOL_ID,
     )
-    expect(tool?.config?.stacked).toBe(false)
+    expect(tool?.enabled).toBe(false)
   })
 
   test('initializes tool config with stacked values when defaultIsStacked is true', () => {
@@ -122,7 +122,7 @@ describe('StackToggle', () => {
     const tool = widget?.registeredTools?.find(
       (t) => t.id === STACK_TOGGLE_TOOL_ID,
     )
-    expect(tool?.config?.stacked).toBe(true)
+    expect(tool?.enabled).toBe(true)
   })
 
   test('applies stack to EChart series via config pipeline when toggling to stacked', async () => {

package/src/widgets/actions/stack-toggle/stack-toggle.tsx

@@ -1,6 +1,6 @@
 import { IconButton } from '@mui/material'
 import { useCallback, useEffect, useMemo } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
 import type { StackToggleProps, StackToggleState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
@@ -9,7 +9,7 @@ import { getEChartStackConfig } from '../../echart/utils'
 import { DEFAULT_STACK_GROUP } from '../../echart/const'
 import type { EchartWidgetState } from '../../echart/types'
 import type { EchartOptionsProps } from '../../echart/types'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 export const STACK_TOGGLE_TOOL_ID = 'stack-toggle'
 
@@ -34,19 +34,10 @@ export function StackToggle({
   Icon,
   IconButtonProps,
 }: StackToggleProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
-  const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
-
-  const storeIsStacked = useWidgetStore(
-    useShallow((state) => state.getWidget<StackToggleState>(id)?.isStacked),
-  )
-
-  const option = useWidgetStore(
-    useShallow((state) => state.getWidget<EchartWidgetState>(id)?.option),
-  )
+  const { storeIsStacked, option } = useWidgetSelector(id, (w) => ({
+    storeIsStacked: (w as StackToggleState | undefined)?.isStacked,
+    option: (w as EchartWidgetState | undefined)?.option,
+  }))
 
   const { hasMultiSeries, hasStackInSeries } = useMemo(() => {
     if (!option) return { hasMultiSeries: false, hasStackInSeries: false }
@@ -63,19 +54,18 @@ export function StackToggle({
   const effectiveDefaultIsStacked = hasStackInSeries || defaultIsStacked
   const isStacked = storeIsStacked ?? effectiveDefaultIsStacked
 
-  // Register config tool on mount
+  // Register config tool once — fn has no closure deps
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: STACK_TOGGLE_TOOL_ID,
       type: 'config',
       order: 10,
-      enabled: isStacked && hasMultiSeries,
-      fn: (currentConfig, toolConfig) => {
+      enabled: false,
+      fn: (currentConfig: unknown) => {
         const config = currentConfig as Record<string, unknown>
         const option = config.option as EchartOptionsProps | undefined
         if (!option) return currentConfig
 
-        const stacked = (toolConfig?.stacked as boolean) ?? false
         const series = Array.isArray(option.series)
           ? option.series
           : [option.series]
@@ -85,31 +75,33 @@ export function StackToggle({
             typeof existingStack === 'string'
               ? existingStack
               : DEFAULT_STACK_GROUP
-          return { ...s, ...getEChartStackConfig(stacked, stackGroup) }
+          return { ...s, ...getEChartStackConfig(stackGroup) }
         })
 
         return { ...config, option: { ...option, series: updatedSeries } }
       },
-      config: { stacked: isStacked },
     })
-    return () => unregisterTool(id, STACK_TOGGLE_TOOL_ID)
-  }, [id, registerTool, unregisterTool, isStacked, hasMultiSeries])
+    return () => widgetStoreActions.unregisterTool(id, STACK_TOGGLE_TOOL_ID)
+  }, [id])
 
-  // Sync tool enabled/config when state changes
+  // Sync enabled from store — lightweight, no re-registration
   useEffect(() => {
-    setToolEnabled(id, STACK_TOGGLE_TOOL_ID, isStacked && hasMultiSeries)
-    updateToolConfig(id, STACK_TOGGLE_TOOL_ID, { stacked: isStacked })
-  }, [id, isStacked, hasMultiSeries, setToolEnabled, updateToolConfig])
+    widgetStoreActions.setToolEnabled(
+      id,
+      STACK_TOGGLE_TOOL_ID,
+      isStacked && hasMultiSeries,
+    )
+  }, [id, isStacked, hasMultiSeries])
 
   // Initialize store with default value only if not already configured
   useEffect(() => {
     if (storeIsStacked !== undefined) return
-    setWidget(id, { isStacked: effectiveDefaultIsStacked })
-  }, [effectiveDefaultIsStacked, id, setWidget, storeIsStacked])
+    widgetStoreActions.setWidget(id, { isStacked: effectiveDefaultIsStacked })
+  }, [effectiveDefaultIsStacked, id, storeIsStacked])
 
   const handleToggle = useCallback(() => {
-    setWidget(id, { isStacked: !isStacked })
-  }, [isStacked, id, setWidget])
+    widgetStoreActions.setWidget(id, { isStacked: !isStacked })
+  }, [isStacked, id])
 
   const tooltipLabel = isStacked
     ? (labels?.unstacked ?? 'Disable stacking')

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