@carto/ps-react-ui 5.0.0 → 6.0.0

package/src/widgets/echart/echart-ui.test.tsx

@@ -1,526 +1,330 @@
-import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest'
-import { render } from '@testing-library/react'
-import { EchartUI } from './echart-ui'
-import type { EChartsOption } from 'echarts'
-import * as echarts from 'echarts'
-import { resetSharedResizeObserver } from './shared-resize-observer'
-
-// Mock echarts module
-vi.mock('echarts', () => {
-  const mockChart = {
-    setOption: vi.fn(),
-    dispose: vi.fn(),
-    resize: vi.fn(),
-    on: vi.fn(),
-    off: vi.fn(),
-    getZr: vi.fn(() => ({
-      setCursorStyle: vi.fn(),
-    })),
-  }
-
-  return {
-    init: vi.fn(() => mockChart),
-  }
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { act, render } from '@testing-library/react'
+import type * as echarts from 'echarts'
+
+// ─── Hoisted mocks ──────────────────────────────────────────────────────────
+
+// Capture the mock chart so each test can introspect setOption / dispose calls.
+const mockChart = {
+  setOption: vi.fn(),
+  dispose: vi.fn(),
+  resize: vi.fn(),
+  on: vi.fn(),
+  off: vi.fn(),
+  dispatchAction: vi.fn(),
+  // Stubbed for the edge-label clamp; tests override per-case.
+  convertToPixel: vi.fn((_finder: unknown, index: number) =>
+    index === 0 ? 4 : 296,
+  ),
+  getWidth: vi.fn(() => 300),
+}
+const initSpy = vi.fn((...args: unknown[]): typeof mockChart => {
+  void args
+  return mockChart
 })
 
-describe('EchartUI', () => {
-  let mockChart: {
-    setOption: ReturnType<typeof vi.fn>
-    dispose: ReturnType<typeof vi.fn>
-    resize: ReturnType<typeof vi.fn>
-    on: ReturnType<typeof vi.fn>
-    off: ReturnType<typeof vi.fn>
-    getZr: ReturnType<typeof vi.fn>
+vi.mock('echarts', () => ({
+  __esModule: true,
+  init: (...args: unknown[]) => initSpy(...args),
+  // Fake text measurement: width ∝ character count, enough to make a long
+  // edge label overflow a near-edge tick in the clamp tests.
+  format: {
+    getTextRect: (text: unknown) => ({ width: String(text).length * 10 }),
+  },
+}))
+
+/** Invoke the `finished` listener the bridge bound on the mock chart. */
+function fireFinished(): void {
+  for (const [event, handler] of mockChart.on.mock.calls) {
+    if (event === 'finished') (handler as () => void)()
   }
-  let mockResizeObserver: {
-    observe: ReturnType<typeof vi.fn>
-    disconnect: ReturnType<typeof vi.fn>
-    unobserve: ReturnType<typeof vi.fn>
-  }
-  let resizeObserverCallback: ResizeObserverCallback | undefined
+}
 
-  const defaultProps = {
-    id: 'test-echart',
+/** Invoke the `legendselectchanged` listener the bridge bound on the mock chart. */
+function fireLegendSelectChanged(selected: Record<string, boolean>): void {
+  for (const [event, handler] of mockChart.on.mock.calls) {
+    if (event === 'legendselectchanged') {
+      ;(handler as (params: unknown) => void)({ selected })
+    }
   }
-
-  const basicOption: EChartsOption = {
-    title: {
-      text: 'Test Chart',
-    },
-    series: [
-      {
-        type: 'bar',
-        data: [1, 2, 3, 4, 5],
-      },
-    ],
+}
+
+// Resize observer mock — capture the callback so tests can trigger it.
+let resizeCb: (() => void) | null = null
+const observeResizeSpy = vi.fn((_node: HTMLElement, cb: () => void) => {
+  resizeCb = cb
+  return () => {
+    resizeCb = null
   }
+})
+vi.mock('./shared-resize-observer', () => ({
+  observeResize: (node: HTMLElement, cb: () => void) =>
+    observeResizeSpy(node, cb),
+}))
 
-  beforeEach(() => {
-    vi.clearAllMocks()
-
-    // Create a fresh mock chart instance for each test
-    mockChart = {
-      setOption: vi.fn(),
-      dispose: vi.fn(),
-      resize: vi.fn(),
-      on: vi.fn(),
-      off: vi.fn(),
-      getZr: vi.fn(() => ({
-        setCursorStyle: vi.fn(),
-      })),
-    }
-
-    // Make echarts.init return our mock chart
-    vi.mocked(echarts.init).mockReturnValue(
-      mockChart as unknown as echarts.ECharts,
-    )
-
-    // Reset the shared observer so each test gets a fresh one using the mock
-    resetSharedResizeObserver()
-
-    // Mock ResizeObserver
-    mockResizeObserver = {
-      observe: vi.fn(),
-      disconnect: vi.fn(),
-      unobserve: vi.fn(),
-    }
-
-    resizeObserverCallback = undefined
-
-    global.ResizeObserver = class {
-      constructor(callback: ResizeObserverCallback) {
-        resizeObserverCallback = callback
-      }
-      observe = mockResizeObserver.observe
-      disconnect = mockResizeObserver.disconnect
-      unobserve = mockResizeObserver.unobserve
-    } as unknown as typeof ResizeObserver
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  test('renders div container', () => {
-    const { container } = render(
-      <EchartUI {...defaultProps} option={basicOption} />,
-    )
-    const div = container.querySelector('div')
-    expect(div).toBeTruthy()
-  })
+import { EchartUI } from './echart-ui'
 
-  test('initializes echarts with default options', () => {
-    render(<EchartUI {...defaultProps} option={basicOption} />)
+beforeEach(() => {
+  mockChart.setOption.mockReset()
+  mockChart.dispose.mockReset()
+  mockChart.resize.mockReset()
+  mockChart.on.mockReset()
+  mockChart.off.mockReset()
+  mockChart.dispatchAction.mockReset()
+  mockChart.convertToPixel.mockClear()
+  mockChart.getWidth.mockClear()
+  initSpy.mockClear()
+  observeResizeSpy.mockClear()
+  resizeCb = null
+})
 
-    expect(echarts.init).toHaveBeenCalledWith(
-      expect.any(HTMLDivElement),
-      null,
-      expect.objectContaining({
-        renderer: 'svg',
-        height: 304,
-      }),
-    )
-  })
+const categoryOption = {
+  xAxis: { type: 'category', axisLabel: {} },
+  series: [{ type: 'bar', encode: { x: 'name', y: 'value' }, datasetIndex: 0 }],
+  dataset: [
+    {
+      source: [
+        { name: 'California', value: 3 },
+        { name: 'Texas', value: 2 },
+        { name: 'Wyoming', value: 1 },
+      ],
+    },
+  ],
+} as unknown as echarts.EChartsOption
 
-  test('initializes echarts with custom renderer', () => {
+describe('<EchartUI>', () => {
+  it('initialises echarts on mount with merged init opts and notifies onInstance', () => {
+    const onInstance = vi.fn()
     render(
       <EchartUI
-        {...defaultProps}
-        option={basicOption}
+        option={{ xAxis: { type: 'category' } }}
         init={{ renderer: 'canvas' }}
+        onInstance={onInstance}
       />,
     )
+    expect(initSpy).toHaveBeenCalledTimes(1)
+    // 3rd arg merges the default `{ renderer: 'svg' }` with the caller's
+    // init — canvas wins.
+    const initOpts = initSpy.mock.calls[0]![2] as Record<string, unknown>
+    expect(initOpts.renderer).toBe('canvas')
+    // No `height`: zrender would store it and every later `resize()` would
+    // snap back to it, so the chart could never grow into a fullscreen
+    // dialog. Height is container-driven instead.
+    expect(initOpts.height).toBeUndefined()
+    expect(onInstance).toHaveBeenCalledWith(mockChart)
+  })
 
-    expect(echarts.init).toHaveBeenCalledWith(
-      expect.any(HTMLDivElement),
-      null,
-      expect.objectContaining({
-        renderer: 'canvas',
-        height: 304,
-      }),
-    )
+  it('applies setOption on mount and adds `series` to replaceMerge on first paint', () => {
+    render(<EchartUI option={{ series: [{ type: 'bar', data: [1, 2, 3] }] }} />)
+    expect(mockChart.setOption).toHaveBeenCalledTimes(1)
+    const args = mockChart.setOption.mock.calls[0]!
+    expect(
+      (args[1] as { replaceMerge?: readonly string[] }).replaceMerge,
+    ).toContain('series')
   })
 
-  test('initializes echarts with custom height', () => {
+  it('merges caller-provided replaceMerge keys with structural fingerprints', () => {
     render(
       <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        init={{ height: 500 }}
+        option={{ series: [{ type: 'bar' }] }}
+        replaceMerge={['legend', 'grid']}
       />,
     )
-
-    expect(echarts.init).toHaveBeenCalledWith(
-      expect.any(HTMLDivElement),
-      null,
-      expect.objectContaining({
-        renderer: 'svg',
-        height: 500,
-      }),
-    )
+    const augmented = (
+      mockChart.setOption.mock.calls[0]![1] as {
+        replaceMerge?: readonly string[]
+      }
+    ).replaceMerge!
+    expect(augmented).toContain('legend')
+    expect(augmented).toContain('grid')
+    expect(augmented).toContain('series')
   })
 
-  test('initializes echarts with custom init options', () => {
-    render(
+  it('skips `series` in replaceMerge when only style fields change between renders', () => {
+    const onInstance = vi.fn()
+    const { rerender } = render(
       <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        init={{ renderer: 'canvas', height: 600, width: 800 }}
+        option={{
+          series: [{ type: 'bar', name: 'a', data: [1] }],
+        }}
+        onInstance={onInstance}
       />,
     )
-
-    expect(echarts.init).toHaveBeenCalledWith(
-      expect.any(HTMLDivElement),
-      null,
-      expect.objectContaining({
-        renderer: 'canvas',
-        height: 600,
-        width: 800,
-      }),
+    mockChart.setOption.mockClear()
+    rerender(
+      <EchartUI
+        option={{
+          // Same structural fields (type, name) — only itemStyle changed.
+          series: [
+            {
+              type: 'bar',
+              name: 'a',
+              data: [1],
+              itemStyle: { color: 'red' },
+            },
+          ],
+        }}
+        onInstance={onInstance}
+      />,
     )
+    const replaceMerge = (
+      mockChart.setOption.mock.calls[0]![1] as {
+        replaceMerge?: readonly string[]
+      }
+    ).replaceMerge
+    // No structural change → no `series` flag added; nothing else passed.
+    expect(replaceMerge).toBeUndefined()
   })
 
-  test('sets chart options on mount', () => {
-    render(<EchartUI {...defaultProps} option={basicOption} />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
-      lazyUpdate: true,
-      notMerge: true,
-    })
-  })
-
-  test('updates chart options when option prop changes', () => {
+  it('adds `series` to replaceMerge when a series field changes structurally', () => {
     const { rerender } = render(
-      <EchartUI {...defaultProps} option={basicOption} />,
+      <EchartUI option={{ series: [{ type: 'bar', name: 'a' }] }} />,
     )
-
-    const newOption: EChartsOption = {
-      title: {
-        text: 'Updated Chart',
-      },
-      series: [
-        {
-          type: 'line',
-          data: [5, 4, 3, 2, 1],
-        },
-      ],
-    }
-
-    rerender(<EchartUI {...defaultProps} option={newOption} />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(newOption, {
-      lazyUpdate: true,
-      notMerge: true,
-    })
+    mockChart.setOption.mockClear()
+    rerender(<EchartUI option={{ series: [{ type: 'line', name: 'a' }] }} />)
+    const replaceMerge = (
+      mockChart.setOption.mock.calls[0]![1] as {
+        replaceMerge?: readonly string[]
+      }
+    ).replaceMerge!
+    expect(replaceMerge).toContain('series')
   })
 
-  test('applies custom className', () => {
-    const { container } = render(
-      <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        className='custom-chart'
-      />,
+  it('adds `dataset` to replaceMerge when dataset length changes', () => {
+    const { rerender } = render(
+      <EchartUI option={{ dataset: [{ source: [] }] }} />,
     )
-    const div = container.querySelector('div')
-    expect(div?.className).toBe('custom-chart')
-  })
-
-  test('applies custom style', () => {
-    const customStyle = { width: '100%', height: '400px' }
-    const { container } = render(
-      <EchartUI {...defaultProps} option={basicOption} style={customStyle} />,
+    mockChart.setOption.mockClear()
+    rerender(
+      <EchartUI option={{ dataset: [{ source: [] }, { source: [] }] }} />,
     )
-    const div = container.querySelector('div')!
-    expect(div?.style.width).toBe('100%')
-    expect(div?.style.height).toBe('400px')
+    const replaceMerge = (
+      mockChart.setOption.mock.calls[0]![1] as {
+        replaceMerge?: readonly string[]
+      }
+    ).replaceMerge!
+    expect(replaceMerge).toContain('dataset')
   })
 
-  test('disposes chart instance on unmount', () => {
+  it('binds onEvents handlers and unbinds them on unmount', () => {
+    const handler = vi.fn()
     const { unmount } = render(
-      <EchartUI {...defaultProps} option={basicOption} />,
+      <EchartUI option={{}} onEvents={{ click: handler }} />,
     )
-
+    expect(mockChart.on).toHaveBeenCalledWith('click', handler)
     unmount()
-
-    expect(mockChart.dispose).toHaveBeenCalled()
+    expect(mockChart.off).toHaveBeenCalledWith('click', handler)
   })
 
-  test('sets up ResizeObserver on mount', () => {
-    render(<EchartUI {...defaultProps} option={basicOption} />)
-
-    // Verify ResizeObserver was used by checking observe was called
-    expect(mockResizeObserver.observe).toHaveBeenCalledWith(
-      expect.any(HTMLDivElement),
-    )
+  it('observes the container for resize and calls chart.resize on resize', () => {
+    render(<EchartUI option={{}} />)
+    expect(observeResizeSpy).toHaveBeenCalled()
+    expect(resizeCb).not.toBeNull()
+    act(() => resizeCb?.())
+    expect(mockChart.resize).toHaveBeenCalledTimes(1)
   })
 
-  test('unobserves element from shared ResizeObserver on unmount', () => {
-    const { unmount } = render(
-      <EchartUI {...defaultProps} option={basicOption} />,
-    )
-
+  it('disposes the chart and calls onInstance(null) on unmount', () => {
+    const onInstance = vi.fn()
+    const { unmount } = render(<EchartUI option={{}} onInstance={onInstance} />)
+    onInstance.mockClear()
     unmount()
-
-    // The shared observer calls unobserve() for the specific element, not disconnect()
-    expect(mockResizeObserver.unobserve).toHaveBeenCalled()
+    expect(onInstance).toHaveBeenCalledWith(null)
+    expect(mockChart.dispose).toHaveBeenCalledTimes(1)
   })
 
-  test('calls resize on chart when ResizeObserver triggers', () => {
-    render(<EchartUI {...defaultProps} option={basicOption} />)
-
-    // Trigger the shared observer's callback with a mock entry targeting the chart element
-    const chartElement = document.getElementById(defaultProps.id)!
-    const entries: ResizeObserverEntry[] = [
-      { target: chartElement } as unknown as ResizeObserverEntry,
-    ]
-    resizeObserverCallback!(entries, {} as ResizeObserver)
-
-    expect(mockChart.resize).toHaveBeenCalled()
+  it('restores every legend item when a legend click hides the last one', () => {
+    render(<EchartUI option={{}} />)
+    fireLegendSelectChanged({ A: false, B: false, C: false })
+    expect(mockChart.dispatchAction).toHaveBeenCalledWith({
+      type: 'legendAllSelect',
+    })
   })
 
-  test('accepts ref prop without errors', () => {
-    const chartRef = {
-      current: null,
-    } as unknown as React.RefObject<echarts.ECharts>
+  it('does nothing while at least one legend item stays visible', () => {
+    render(<EchartUI option={{}} />)
+    fireLegendSelectChanged({ A: true, B: false, C: false })
+    expect(mockChart.dispatchAction).not.toHaveBeenCalled()
+  })
 
-    // Component accepts ref as a prop but since it doesn't use forwardRef,
-    // the useImperativeHandle won't properly set the ref.
-    // This test verifies the component doesn't crash when ref is provided.
-    expect(() => {
-      render(<EchartUI {...defaultProps} ref={chartRef} option={basicOption} />)
-    }).not.toThrow()
+  it('clamps overflowing edge labels on `finished` (category x-axis)', () => {
+    render(<EchartUI option={categoryOption} />)
+    mockChart.setOption.mockClear()
+    // First tick at x=4, 'California' ~100px wide (half 50) → overflows left.
+    act(() => fireFinished())
+    expect(mockChart.setOption).toHaveBeenCalledTimes(1)
+    const applied = mockChart.setOption.mock.calls[0]![0] as {
+      xAxis: { axisLabel: { alignMinLabel: string | null } }
+    }
+    expect(applied.xAxis.axisLabel.alignMinLabel).toBe('left')
   })
 
-  test('attaches event listeners when onEvents prop is provided', () => {
-    const clickHandler = vi.fn()
-    const hoverHandler = vi.fn()
+  it('does not clamp again on a second `finished` with the same verdict', () => {
+    render(<EchartUI option={categoryOption} />)
+    act(() => fireFinished())
+    mockChart.setOption.mockClear()
+    act(() => fireFinished())
+    expect(mockChart.setOption).not.toHaveBeenCalled()
+  })
 
+  it('does not clamp a non-category (time) x-axis', () => {
     render(
       <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        onEvents={{
-          click: clickHandler,
-          mouseover: hoverHandler,
-        }}
+        option={
+          {
+            xAxis: { type: 'time', axisLabel: {} },
+            series: [{ type: 'line', encode: { x: 'name', y: 'value' } }],
+            dataset: [{ source: [{ name: 1, value: 2 }] }],
+          } as unknown as echarts.EChartsOption
+        }
       />,
     )
-
-    expect(mockChart.on).toHaveBeenCalledWith('click', clickHandler)
-    expect(mockChart.on).toHaveBeenCalledWith('mouseover', hoverHandler)
+    mockChart.setOption.mockClear()
+    act(() => fireFinished())
+    expect(mockChart.setOption).not.toHaveBeenCalled()
   })
 
-  test('updates event listeners when onEvents prop changes', () => {
-    const clickHandler1 = vi.fn()
-    const clickHandler2 = vi.fn()
-
+  it('treats a non-array series as a single-fingerprint signature', () => {
+    // The fingerprint helper handles both array AND object/single-series
+    // forms. Re-render with a *fresh* option object that has the same
+    // single-series shape — the apply effect re-runs (deps changed) but
+    // the fingerprint says nothing structural changed.
     const { rerender } = render(
       <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        onEvents={{
-          click: clickHandler1,
-        }}
+        option={{ series: { type: 'bar' } } as unknown as echarts.EChartsOption}
       />,
     )
-
-    expect(mockChart.on).toHaveBeenCalledWith('click', clickHandler1)
-
+    mockChart.setOption.mockClear()
     rerender(
       <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        onEvents={{
-          click: clickHandler2,
-        }}
+        option={{ series: { type: 'bar' } } as unknown as echarts.EChartsOption}
       />,
     )
-
-    expect(mockChart.off).toHaveBeenCalledWith('click')
-    expect(mockChart.on).toHaveBeenCalledWith('click', clickHandler2)
-  })
-
-  test('sets default cursor style when no click event is provided', () => {
-    const mockGetZr = vi.fn(() => ({
-      setCursorStyle: vi.fn(),
-    }))
-    mockChart.getZr = mockGetZr
-
-    render(<EchartUI {...defaultProps} option={basicOption} />)
-
-    expect(mockChart.on).toHaveBeenCalledWith('mousemove', expect.any(Function))
-  })
-
-  test('does not set default cursor style when click event is provided', () => {
-    const clickHandler = vi.fn()
-
-    render(
-      <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        onEvents={{
-          click: clickHandler,
-        }}
-      />,
-    )
-
-    // Should not attach mousemove handler when click is provided
-    const mousemoveCalls = mockChart.on.mock.calls.filter(
-      (call) => call[0] === 'mousemove',
-    )
-
-    expect(mousemoveCalls.length).toBe(0)
-  })
-
-  test('handles multiple event types simultaneously', () => {
-    const clickHandler = vi.fn()
-    const dblclickHandler = vi.fn()
-    const mouseoverHandler = vi.fn()
-    const mouseoutHandler = vi.fn()
-
-    render(
-      <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        onEvents={{
-          click: clickHandler,
-          dblclick: dblclickHandler,
-          mouseover: mouseoverHandler,
-          mouseout: mouseoutHandler,
-        }}
-      />,
-    )
-
-    expect(mockChart.on).toHaveBeenCalledWith('click', clickHandler)
-    expect(mockChart.on).toHaveBeenCalledWith('dblclick', dblclickHandler)
-    expect(mockChart.on).toHaveBeenCalledWith('mouseover', mouseoverHandler)
-    expect(mockChart.on).toHaveBeenCalledWith('mouseout', mouseoutHandler)
+    const replaceMerge = (
+      mockChart.setOption.mock.calls[0]![1] as {
+        replaceMerge?: readonly string[]
+      }
+    ).replaceMerge
+    expect(replaceMerge).toBeUndefined()
   })
 
-  test('reinitializes chart when init options change', () => {
-    vi.clearAllMocks() // Clear mocks from beforeEach
-
+  it('treats a non-array dataset as a single-fingerprint signature', () => {
     const { rerender } = render(
       <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        init={{ height: 300 }}
+        option={{ dataset: { source: [] } } as unknown as echarts.EChartsOption}
       />,
     )
-
-    expect(echarts.init).toHaveBeenCalledTimes(1)
-    expect(mockChart.dispose).not.toHaveBeenCalled()
-
+    mockChart.setOption.mockClear()
     rerender(
       <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        init={{ height: 400 }}
+        option={{ dataset: { source: [] } } as unknown as echarts.EChartsOption}
       />,
     )
-
-    expect(mockChart.dispose).toHaveBeenCalled()
-    expect(echarts.init).toHaveBeenCalledTimes(2)
-  })
-
-  test('handles empty onEvents object', () => {
-    render(<EchartUI {...defaultProps} option={basicOption} onEvents={{}} />)
-
-    // Should still set default mousemove handler
-    expect(mockChart.on).toHaveBeenCalledWith('mousemove', expect.any(Function))
-  })
-
-  test('generates unique id for container', () => {
-    const { container: container1 } = render(
-      <EchartUI {...defaultProps} id='test-echart-1' option={basicOption} />,
-    )
-    const { container: container2 } = render(
-      <EchartUI {...defaultProps} id='test-echart-2' option={basicOption} />,
-    )
-
-    const div1 = container1.querySelector('div')
-    const div2 = container2.querySelector('div')
-
-    expect(div1?.id).toBe('test-echart-1')
-    expect(div2?.id).toBe('test-echart-2')
-    expect(div1?.id).not.toBe(div2?.id)
-  })
-
-  test('handles complex chart options', () => {
-    const complexOption: EChartsOption = {
-      title: {
-        text: 'Complex Chart',
-        left: 'center',
-      },
-      tooltip: {
-        trigger: 'axis',
-      },
-      legend: {
-        data: ['Series 1', 'Series 2'],
-        bottom: 10,
-      },
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      },
-      yAxis: {
-        type: 'value',
-      },
-      series: [
-        {
-          name: 'Series 1',
-          type: 'line',
-          data: [120, 200, 150, 80, 70, 110, 130],
-        },
-        {
-          name: 'Series 2',
-          type: 'bar',
-          data: [220, 180, 190, 234, 290, 330, 310],
-        },
-      ],
-    }
-
-    render(<EchartUI {...defaultProps} option={complexOption} />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(complexOption, {
-      lazyUpdate: true,
-      notMerge: true,
-    })
-  })
-
-  test('does not break when ref is not provided', () => {
-    expect(() => {
-      render(<EchartUI {...defaultProps} option={basicOption} />)
-    }).not.toThrow()
-  })
-
-  test('handles undefined onEvents gracefully', () => {
-    render(
-      <EchartUI {...defaultProps} option={basicOption} onEvents={undefined} />,
-    )
-
-    expect(mockChart.on).toHaveBeenCalledWith('mousemove', expect.any(Function))
-  })
-
-  test('cleans up properly with multiple rerenders', () => {
-    const { rerender, unmount } = render(
-      <EchartUI {...defaultProps} option={basicOption} />,
-    )
-
-    const option2: EChartsOption = {
-      series: [{ type: 'line', data: [1, 2, 3] }],
-    }
-    rerender(<EchartUI {...defaultProps} option={option2} />)
-
-    const option3: EChartsOption = {
-      series: [{ type: 'bar', data: [3, 2, 1] }],
-    }
-    rerender(<EchartUI {...defaultProps} option={option3} />)
-
-    unmount()
-
-    expect(mockChart.dispose).toHaveBeenCalled()
-    expect(mockResizeObserver.unobserve).toHaveBeenCalled()
+    const replaceMerge = (
+      mockChart.setOption.mock.calls[0]![1] as {
+        replaceMerge?: readonly string[]
+      }
+    ).replaceMerge
+    expect(replaceMerge).toBeUndefined()
   })
 })