@carto/ps-react-ui 5.1.0 → 6.0.0

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

@@ -1,546 +1,231 @@
-import { describe, test, expect, beforeEach, vi } from 'vitest'
-import { render } from '@testing-library/react'
+import { useEffect } from 'react'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { act, render } from '@testing-library/react'
+import type * as echarts from 'echarts'
+import { Provider } from '../provider/widget-provider'
 import { Echart } from './echart'
-import { useWidgetStore } from '../stores/widget-store'
-import type { EchartWidgetState } from './types'
-import type { EChartsOption } from 'echarts'
-import * as echarts from 'echarts'
-
-// 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 type { OptionFactory } from './echart'
+import {
+  clearAllWidgetStores,
+  getEchartInstance,
+  getWidgetStore,
+} from '../stores'
+
+// Capture the option that EchartUI receives, since we don't render real ECharts in tests.
+const captured: {
+  option: echarts.EChartsOption | null
+  replaceMerge: readonly string[] | null
+  setOptions: number
+} = {
+  option: null,
+  replaceMerge: null,
+  setOptions: 0,
+}
+
+vi.mock('./echart-ui', () => ({
+  EchartUI: ({
+    option,
+    replaceMerge,
+    onInstance,
+  }: {
+    option: echarts.EChartsOption
+    replaceMerge: readonly string[]
+    onInstance?: (chart: echarts.ECharts | null) => void
+  }) => {
+    captured.option = option
+    captured.replaceMerge = replaceMerge
+    captured.setOptions++
+    // Mimic the real bridge: publish a fake instance on mount, clear on
+    // unmount. Cast through unknown so the test doesn't depend on the full
+    // ECharts surface.
+    useEffect(() => {
+      const fake = { __mock: true } as unknown as echarts.ECharts
+      onInstance?.(fake)
+      return () => onInstance?.(null)
+    }, [onInstance])
+    return null
+  },
+  DEFAULT_INIT_OPTS: { renderer: 'svg' },
+}))
+
+beforeEach(() => {
+  clearAllWidgetStores()
+  captured.option = null
+  captured.replaceMerge = null
+  captured.setOptions = 0
 })
-
-// Mock MUI theme
-vi.mock('@mui/material', async () => {
-  const actual = await vi.importActual('@mui/material')
-  return {
-    ...actual,
-    useTheme: () => ({
-      spacing: (value: number) => `${value * 8}px`,
-      palette: {
-        secondary: {
-          main: '#47db99',
-        },
-        grey: {
-          400: '#bdbdbd',
-          900: '#212121',
-        },
-        common: {
-          white: '#ffffff',
-          black: '#000000',
-        },
-        qualitative: {
-          bold: {
-            1: '#7F3C8D',
-            2: '#11A579',
-            3: '#3969AC',
-            4: '#F2B701',
-            5: '#E73F74',
-            6: '#80BA5A',
-            7: '#E68310',
-            8: '#008695',
-            9: '#CF1C90',
-            10: '#F97B72',
-          },
-        },
-      },
-      typography: {
-        caption: {
-          fontFamily: 'Roboto, sans-serif',
-        },
-      },
-    }),
+afterEach(() => clearAllWidgetStores())
+
+// Helper: build an OptionFactory whose structural branch returns `structural`
+// and whose merge branch passes the post-config-transforms option through
+// `mergeData(option, data, ctx)`.
+const makeFactory = (
+  structural: echarts.EChartsOption,
+  mergeData: (
+    option: echarts.EChartsOption,
+    data: unknown,
+  ) => echarts.EChartsOption,
+): OptionFactory => {
+  return (option, data) => {
+    if (option == null) return structural
+    return mergeData(option, data)
   }
-})
-
-describe('Echart', () => {
-  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>
-  }
-  let mockResizeObserver: {
-    observe: ReturnType<typeof vi.fn>
-    disconnect: ReturnType<typeof vi.fn>
-    unobserve: ReturnType<typeof vi.fn>
-  }
-
-  const basicOption: EChartsOption = {
-    title: {
-      text: 'Test Chart',
-    },
-    series: [
-      {
-        type: 'bar',
-        data: [1, 2, 3, 4, 5],
-      },
-    ],
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    useWidgetStore.getState().clearWidgets()
-
-    // 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,
+}
+
+describe('<Echart> bridge — owns the option factory directly', () => {
+  it('forwards the structural option to EchartUI synchronously on first render', () => {
+    const factory = makeFactory(
+      { xAxis: { type: 'category' } } as echarts.EChartsOption,
+      // Merge branch: return the option as-is so the structural option
+      // flows through to ECharts unchanged.
+      (option) => option,
     )
-
-    // Mock ResizeObserver
-    mockResizeObserver = {
-      observe: vi.fn(),
-      disconnect: vi.fn(),
-      unobserve: vi.fn(),
-    }
-
-    global.ResizeObserver = class {
-      observe = mockResizeObserver.observe
-      disconnect = mockResizeObserver.disconnect
-      unobserve = mockResizeObserver.unobserve
-    } as unknown as typeof ResizeObserver
-  })
-
-  test('returns null when widget does not exist in store', () => {
-    const { container } = render(<Echart id='non-existent-widget' />)
-    expect(container.firstChild).toBeNull()
-  })
-
-  test('renders EchartUI when widget exists in store', () => {
-    // Set up widget in store
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: basicOption,
-    } as EchartWidgetState)
-
-    const { container } = render(<Echart id='test-echart' />)
-
-    const div = container.querySelector('div')
-    expect(div).toBeTruthy()
-    expect(echarts.init).toHaveBeenCalled()
-  })
-
-  test('passes option from widget data to EchartUI', () => {
-    const customOption: EChartsOption = {
-      title: {
-        text: 'Custom Chart',
-      },
-      series: [
-        {
-          type: 'line',
-          data: [10, 20, 30],
-        },
-      ],
-    }
-
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: customOption,
-    } as EchartWidgetState)
-
-    render(<Echart id='test-echart' />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: {
-          text: 'Custom Chart',
-        },
-        series: [
-          {
-            type: 'line',
-            data: [10, 20, 30],
-          },
-        ],
-      }),
-      {
-        lazyUpdate: true,
-        notMerge: true,
-      },
+    render(
+      <Provider id='e1' data={[]}>
+        <Echart optionFactory={factory} />
+      </Provider>,
     )
-  })
-
-  test('passes onEvents from widget to EchartUI', () => {
-    const clickHandler = vi.fn()
-    const hoverHandler = vi.fn()
-
-    useWidgetStore.getState().setWidget<EchartWidgetState>('test-echart', {
-      type: 'echart',
-      option: basicOption,
-      onEvents: {
-        click: clickHandler,
-        mouseover: hoverHandler,
-      },
-    })
-
-    render(<Echart id='test-echart' />)
-
-    expect(mockChart.on).toHaveBeenCalledWith('click', clickHandler)
-    expect(mockChart.on).toHaveBeenCalledWith('mouseover', hoverHandler)
-  })
-
-  test('passes init options from widget to EchartUI', () => {
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: basicOption,
-      init: {
-        renderer: 'canvas',
-        height: 500,
-        width: 800,
-      },
-    } as EchartWidgetState)
-
-    render(<Echart id='test-echart' />)
-
-    expect(echarts.init).toHaveBeenCalledWith(
-      expect.any(HTMLDivElement),
-      null,
-      expect.objectContaining({
-        renderer: 'canvas',
-        height: 500,
-        width: 800,
-      }),
+    expect(captured.option).toEqual({ xAxis: { type: 'category' } })
+    // No `rawOptions` on the store — the option pipeline is Echart-local now.
+    expect(
+      (getWidgetStore('e1').getState() as unknown as { rawOptions?: unknown })
+        .rawOptions,
+    ).toBeUndefined()
+  })
+
+  it('fuses state.data into the option via the factory merge branch (dataset)', () => {
+    const factory = makeFactory(
+      { xAxis: { type: 'category' } } as echarts.EChartsOption,
+      (option, data) =>
+        ({
+          ...option,
+
+          dataset: Array.isArray(data)
+            ? (data as { name: string; value: number }[][]).map((source) => ({
+                source,
+              }))
+            : [],
+        }) as echarts.EChartsOption,
     )
-  })
-
-  test('handles widget with undefined onEvents', () => {
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: basicOption,
-      onEvents: undefined,
-    } as EchartWidgetState)
-
-    expect(() => {
-      render(<Echart id='test-echart' />)
-    }).not.toThrow()
-  })
-
-  test('handles widget with undefined init', () => {
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: basicOption,
-      init: undefined,
-    } as EchartWidgetState)
-
-    render(<Echart id='test-echart' />)
-
-    expect(echarts.init).toHaveBeenCalledWith(
-      expect.any(HTMLDivElement),
-      null,
-      expect.objectContaining({
-        renderer: 'svg',
-        height: 304,
-      }),
+    render(
+      <Provider id='e2' data={[[{ name: 'A', value: 1 }]]}>
+        <Echart optionFactory={factory} />
+      </Provider>,
     )
+    const captured2 = captured.option as { dataset: { source: unknown }[] }
+    expect(captured2.dataset).toHaveLength(1)
+    expect(captured2.dataset[0]?.source).toEqual([{ name: 'A', value: 1 }])
   })
 
-  test('re-renders when widget data changes', () => {
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: basicOption,
-    } as EchartWidgetState)
-
-    const { rerender } = render(<Echart id='test-echart' />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
-      lazyUpdate: true,
-      notMerge: true,
-    })
-
-    const newOption: EChartsOption = {
-      series: [
-        {
-          type: 'pie',
-          data: [{ value: 100 }, { value: 200 }],
-        },
-      ],
+  it('updates the option when a data transform changes state.data (no re-init)', () => {
+    interface Row {
+      name: string
+      value: number
     }
+    const factory = makeFactory(
+      { xAxis: { type: 'category' } } as echarts.EChartsOption,
+      (option, data) =>
+        ({
+          ...option,
+
+          // Mark each dataset with the record count so changes are observable.
+          dataset: Array.isArray(data)
+            ? (data as Row[][]).map((s) => ({
+                source: s,
+                id: `len:${s.length}`,
+              }))
+            : [],
+        }) as echarts.EChartsOption,
+    )
+    render(
+      <Provider
+        id='e3'
+        data={[
+          [
+            { name: 'A', value: 1 },
+            { name: 'B', value: 2 },
+            { name: 'C', value: 3 },
+          ],
+        ]}
+      >
+        <Echart optionFactory={factory} />
+      </Provider>,
+    )
 
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: newOption,
-    } as EchartWidgetState)
-
-    rerender(<Echart id='test-echart' />)
+    // Before transform: 3 records.
+    let dataset = (captured.option as { dataset: { id: string }[] }).dataset
+    expect(dataset[0]?.id).toBe('len:3')
 
-    expect(mockChart.setOption).toHaveBeenCalledWith(newOption, {
-      lazyUpdate: true,
-      notMerge: true,
+    // Register a data transform that filters out half the records.
+    act(() => {
+      getWidgetStore('e3').setState({
+        dataTransforms: [
+          {
+            id: 'cut',
+            type: 'data',
+            order: 1,
+            enabled: true,
+            fn: (input) => {
+              const arr = input as { name: string; value: number }[][]
+              return arr.map((s) => s.slice(0, 1))
+            },
+          },
+        ],
+      })
     })
-  })
-
-  test('returns null when widget is removed from store', () => {
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: basicOption,
-    } as EchartWidgetState)
-
-    const { container, rerender } = render(<Echart id='test-echart' />)
-
-    expect(container.querySelector('div')).toBeTruthy()
-
-    useWidgetStore.getState().removeWidget('test-echart')
-    rerender(<Echart id='test-echart' />)
-
-    expect(container.firstChild).toBeNull()
-  })
-
-  test('handles complex chart options with multiple series', () => {
-    const complexOption: EChartsOption = {
-      title: {
-        text: 'Multi-Series Chart',
-      },
-      tooltip: {
-        trigger: 'axis',
-      },
-      legend: {
-        data: ['Series 1', 'Series 2', 'Series 3'],
-      },
-      xAxis: {
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
-      },
-      yAxis: {
-        type: 'value',
-      },
-      series: [
-        {
-          name: 'Series 1',
-          type: 'line',
-          data: [10, 20, 30, 40, 50],
-        },
-        {
-          name: 'Series 2',
-          type: 'bar',
-          data: [15, 25, 35, 45, 55],
-        },
-        {
-          name: 'Series 3',
-          type: 'scatter',
-          data: [5, 15, 25, 35, 45],
-        },
-      ],
-    }
-
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: complexOption,
-    } as EchartWidgetState)
 
-    render(<Echart id='test-echart' />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(complexOption, {
-      lazyUpdate: true,
-      notMerge: true,
-    })
+    // Bridge should have re-rendered with post-pipeline data: 1 record.
+    dataset = (captured.option as { dataset: { id: string }[] }).dataset
+    expect(dataset[0]?.id).toBe('len:1')
   })
 
-  test('handles widget with all optional properties', () => {
-    const clickHandler = vi.fn()
-    const fullWidget: EchartWidgetState = {
-      id: 'test-echart',
-      type: 'echart',
-      data: [],
-      isFetching: false,
-      option: basicOption,
-      isLoading: false,
-      visible: true,
-      onEvents: {
-        click: clickHandler,
-      },
-      init: {
-        renderer: 'canvas',
-        height: 600,
-      },
-    }
-
-    useWidgetStore.getState().setWidget('test-echart', fullWidget)
-
-    render(<Echart id='test-echart' />)
-
-    expect(echarts.init).toHaveBeenCalledWith(
-      expect.any(HTMLDivElement),
-      null,
-      expect.objectContaining({
-        renderer: 'canvas',
-        height: 600,
-      }),
+  it('applies configTransforms to the rendered option and forwards replaceMerge', () => {
+    const factory = makeFactory(
+      { xAxis: { type: 'category' } } as echarts.EChartsOption,
+      (option) => option,
     )
-    expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
-      lazyUpdate: true,
-      notMerge: true,
-    })
-    expect(mockChart.on).toHaveBeenCalledWith('click', clickHandler)
-  })
-
-  test('handles multiple Echart instances with different IDs', () => {
-    useWidgetStore.getState().setWidget('chart-1', {
-      id: 'chart-1',
-      type: 'echart',
-      option: basicOption,
-    } as EchartWidgetState)
-
-    useWidgetStore.getState().setWidget('chart-2', {
-      id: 'chart-2',
-      type: 'echart',
-      option: {
-        series: [{ type: 'line', data: [5, 10, 15] }],
-      },
-    } as EchartWidgetState)
-
-    const { container: container1 } = render(<Echart id='chart-1' />)
-    const { container: container2 } = render(<Echart id='chart-2' />)
-
-    expect(container1.querySelector('div')).toBeTruthy()
-    expect(container2.querySelector('div')).toBeTruthy()
-    expect(echarts.init).toHaveBeenCalledTimes(2)
-  })
-
-  test('handles empty series data', () => {
-    const emptyOption: EChartsOption = {
-      series: [],
-    }
-
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: emptyOption,
-    } as EchartWidgetState)
-
-    render(<Echart id='test-echart' />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(emptyOption, {
-      lazyUpdate: true,
-      notMerge: true,
-    })
-  })
-
-  test('handles widget data as unknown type (runtime typing)', () => {
-    // widget.data is typed as unknown at compile time but EChartsOption at runtime
-    const widgetData: unknown = basicOption
-
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: widgetData as EChartsOption,
-    } as EchartWidgetState)
-
-    render(<Echart id='test-echart' />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: basicOption.title,
-        series: basicOption.series,
-      }),
-      {
-        lazyUpdate: true,
-        notMerge: true,
-      },
+    render(
+      <Provider id='e-cfg' data={[]}>
+        <Echart optionFactory={factory} />
+      </Provider>,
     )
-  })
 
-  test('passes through all event handlers from widget', () => {
-    const handlers = {
-      click: vi.fn(),
-      dblclick: vi.fn(),
-      mousedown: vi.fn(),
-      mouseup: vi.fn(),
-      mouseover: vi.fn(),
-      mouseout: vi.fn(),
-      mousemove: vi.fn(),
-    }
+    // Before transform: untouched structural; replaceMerge is the default.
+    expect(captured.option).toEqual({ xAxis: { type: 'category' } })
+    expect(captured.replaceMerge).toEqual(['toolbox'])
 
-    useWidgetStore.getState().setWidget<EchartWidgetState>('test-echart', {
-      type: 'echart',
-      option: basicOption,
-      onEvents: handlers,
+    // Register a config transform that stamps a field onto the option and
+    // contributes a `replaceMergeKeys` entry.
+    act(() => {
+      getWidgetStore('e-cfg').setState({
+        configTransforms: [
+          {
+            id: 'stamp',
+            type: 'config',
+            order: 1,
+            enabled: true,
+            replaceMergeKeys: ['stamp'],
+            fn: (o) => ({ ...(o as object), stamp: true }),
+          },
+        ],
+      })
     })
 
-    render(<Echart id='test-echart' />)
-
-    Object.entries(handlers).forEach(([eventName, handler]) => {
-      expect(mockChart.on).toHaveBeenCalledWith(eventName, handler)
-    })
+    // After transform: option carries the mutation, replaceMerge is
+    // deduped+sorted with the default and the transform's keys.
+    expect((captured.option as { stamp?: boolean }).stamp).toBe(true)
+    expect(captured.replaceMerge).toEqual(['stamp', 'toolbox'])
   })
 
-  test('component updates when switching between different widget IDs', () => {
-    useWidgetStore.getState().setWidget('chart-a', {
-      id: 'chart-a',
-      type: 'echart',
-      option: basicOption,
-    } as EchartWidgetState)
-
-    useWidgetStore.getState().setWidget('chart-b', {
-      id: 'chart-b',
-      type: 'echart',
-      option: { series: [{ type: 'line', data: [1, 2, 3] }] },
-    } as EchartWidgetState)
-
-    const { rerender } = render(<Echart id='chart-a' />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
-      lazyUpdate: true,
-      notMerge: true,
-    })
-
-    rerender(<Echart id='chart-b' />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(
-      { series: [{ type: 'line', data: [1, 2, 3] }] },
-      {
-        lazyUpdate: true,
-        notMerge: true,
-      },
+  it('publishes the live ECharts instance to the per-id registry on mount and clears on unmount', () => {
+    const factory = makeFactory({} as echarts.EChartsOption, (option) => option)
+    const { unmount } = render(
+      <Provider id='e-instance' data={[]}>
+        <Echart optionFactory={factory} />
+      </Provider>,
     )
-  })
-
-  test('disposes chart when component unmounts', () => {
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: basicOption,
-    } as EchartWidgetState)
-
-    const { unmount } = render(<Echart id='test-echart' />)
-
+    expect(getEchartInstance('e-instance')).not.toBeNull()
     unmount()
-
-    expect(mockChart.dispose).toHaveBeenCalled()
+    expect(getEchartInstance('e-instance')).toBeNull()
   })
 })