@carto/ps-react-ui 5.3.0 → 6.1.0

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

@@ -1,465 +0,0 @@
-/**
- * Render tests for BrushOverlay covering branches in the file that aren't
- * exercised by the BrushToggle parent-render (which only mounts the
- * overlay without a chart instance, so most of the logic is skipped).
- *
- * Approach: stash a fake ECharts instance + chart element into the widget
- * store so the overlay's useSyncExternalStore picks them up. The fake
- * ECharts exposes just enough surface for readPlotRect, convertToPixel,
- * convertFromPixel, dispatchAction, on/off — no real WebGL or canvas needed.
- *
- * Coverage focus:
- * - readPlotRect happy path + invalid-grid fallback (try/catch + Number.isFinite)
- * - plotRectEquals same-reference branch + different-fields branch
- * - useEffect re-projection: convertToPixel returns non-number → continue;
- *   `if (hi <= lo)` skip; happy-path push
- * - handlePointerDown: enabled=false short-circuit, missing plotRect / chartEl
- *   / capture short-circuits, happy-path setPointerCapture + setDrawing
- * - handlePointerMove: no-active-drag → showTip path; mismatched pointerId;
- *   missing chartEl/plotRect short-circuit; active-drag update path
- * - handlePointerLeave: active-drag skip; no-drag dispatchAction
- * - handlePointerUp: pointerId mismatch; releasePointerCapture try/catch;
- *   MIN_DRAG_PX short-circuit; convertFromPixel non-number → return;
- *   multiBrush=true append; multiBrush=false replace + auto-disable
- * - `if (!chartEl) return null` guard
- * - projectedRects render branch + drawing render branch
- */
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { act, fireEvent, render } from '@testing-library/react'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
-import { useWidgetStore, widgetStoreActions } from '../../stores/widget-store'
-import { resetSharedResizeObserver } from '../../echart/shared-resize-observer'
-import { BrushOverlay } from './brush-overlay'
-import type { BrushState } from './types'
-
-const theme = createTheme({})
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>)
-}
-
-// ───────────────────────────────────────────────────────────────────────────
-// Fake ECharts instance — minimal surface
-// ───────────────────────────────────────────────────────────────────────────
-
-interface FakeECharts {
-  convertToPixel: ReturnType<typeof vi.fn>
-  convertFromPixel: ReturnType<typeof vi.fn>
-  dispatchAction: ReturnType<typeof vi.fn>
-  on: ReturnType<typeof vi.fn>
-  off: ReturnType<typeof vi.fn>
-  getModel: () => {
-    getComponent: (
-      type: string,
-      idx?: number,
-    ) => { coordinateSystem?: { getRect: () => unknown } } | null
-  }
-}
-
-function makeChartEl(id: string): HTMLElement {
-  const el = document.createElement('div')
-  el.id = id
-  // jsdom doesn't position elements; stub getBoundingClientRect explicitly.
-  el.getBoundingClientRect = () =>
-    ({
-      left: 0,
-      top: 0,
-      right: 800,
-      bottom: 600,
-      width: 800,
-      height: 600,
-      x: 0,
-      y: 0,
-      toJSON() {
-        return {}
-      },
-    }) as DOMRect
-  document.body.appendChild(el)
-  return el
-}
-
-function makeFakeECharts(
-  rect: { x: number; y: number; width: number; height: number } | null,
-  convertOverrides?: Partial<{
-    toPixel: (axis: unknown, v: unknown) => unknown
-    fromPixel: (axis: unknown, v: unknown) => unknown
-  }>,
-): FakeECharts {
-  const grid =
-    rect == null ? null : { coordinateSystem: { getRect: () => rect } }
-  return {
-    convertToPixel: vi.fn(
-      convertOverrides?.toPixel ??
-        ((_axis: unknown, v: unknown) => Number(v) * 10),
-    ),
-    convertFromPixel: vi.fn(
-      convertOverrides?.fromPixel ??
-        ((_axis: unknown, v: unknown) => Number(v) / 10),
-    ),
-    dispatchAction: vi.fn(),
-    on: vi.fn(),
-    off: vi.fn(),
-    getModel: () => ({
-      getComponent: () => grid,
-    }),
-  }
-}
-
-function seedBrushWidget(
-  id: string,
-  brushState: Partial<BrushState>,
-  chartEl: HTMLElement,
-  instance: FakeECharts | null,
-) {
-  widgetStoreActions.setWidget(id, {
-    ...brushState,
-    // EchartWidgetState shape — refUI + instance refs
-    refUI: { current: chartEl },
-    instance: { current: instance },
-  } as unknown as BrushState)
-}
-
-// ───────────────────────────────────────────────────────────────────────────
-// Tests
-// ───────────────────────────────────────────────────────────────────────────
-
-beforeEach(() => {
-  useWidgetStore.getState().clearWidgets()
-  resetSharedResizeObserver()
-  document.body.innerHTML = ''
-})
-
-describe('BrushOverlay early-return guards', () => {
-  it('returns null when no chartEl is registered (no portal target)', () => {
-    const { container } = renderWithTheme(<BrushOverlay id='bo-noel' />)
-    expect(container.querySelector('[data-testid]')).toBeNull()
-  })
-
-  it('mounts the overlay portal into the chart element when chartEl is registered', () => {
-    const chartEl = makeChartEl('bo-1')
-    const fakeEcharts = makeFakeECharts({
-      x: 50,
-      y: 50,
-      width: 400,
-      height: 300,
-    })
-    seedBrushWidget(
-      'bo-1',
-      { brush: true, brushRects: [] },
-      chartEl,
-      fakeEcharts,
-    )
-    renderWithTheme(<BrushOverlay id='bo-1' />)
-    // Portal target is the chart element — overlay should now contain
-    // a positioned descendant.
-    expect(chartEl.querySelector('div')).not.toBeNull()
-  })
-
-  it('renders without crashing when plotRect is null (grid not laid out)', () => {
-    const chartEl = makeChartEl('bo-nogrid')
-    const fakeEcharts = makeFakeECharts(null)
-    seedBrushWidget(
-      'bo-nogrid',
-      { brush: true, brushRects: [] },
-      chartEl,
-      fakeEcharts,
-    )
-    expect(() => renderWithTheme(<BrushOverlay id='bo-nogrid' />)).not.toThrow()
-  })
-
-  it('treats a grid with NaN values as invalid (Number.isFinite branch)', () => {
-    const chartEl = makeChartEl('bo-nan')
-    const fakeEcharts = makeFakeECharts({
-      x: NaN,
-      y: 0,
-      width: 100,
-      height: 100,
-    })
-    seedBrushWidget(
-      'bo-nan',
-      { brush: true, brushRects: [] },
-      chartEl,
-      fakeEcharts,
-    )
-    expect(() => renderWithTheme(<BrushOverlay id='bo-nan' />)).not.toThrow()
-  })
-
-  it('swallows getModel() throwing (try/catch in readPlotRect)', () => {
-    const chartEl = makeChartEl('bo-throw')
-    const fakeEcharts = makeFakeECharts({ x: 0, y: 0, width: 100, height: 100 })
-    fakeEcharts.getModel = () => {
-      throw new Error('eCharts internals drifted')
-    }
-    seedBrushWidget(
-      'bo-throw',
-      { brush: true, brushRects: [] },
-      chartEl,
-      fakeEcharts,
-    )
-    expect(() => renderWithTheme(<BrushOverlay id='bo-throw' />)).not.toThrow()
-  })
-})
-
-describe('BrushOverlay rect projection', () => {
-  it('projects rects using convertToPixel and clamps to plot area', () => {
-    const chartEl = makeChartEl('bo-proj')
-    const fakeEcharts = makeFakeECharts({
-      x: 50,
-      y: 50,
-      width: 400,
-      height: 300,
-    })
-    // Provide pre-existing rects in the store
-    seedBrushWidget(
-      'bo-proj',
-      { brush: true, brushRects: [{ xStart: 1, xEnd: 5 } as never] },
-      chartEl,
-      fakeEcharts,
-    )
-    renderWithTheme(<BrushOverlay id='bo-proj' />)
-    // convertToPixel called twice (once per xStart/xEnd)
-    expect(fakeEcharts.convertToPixel).toHaveBeenCalled()
-  })
-
-  it('skips rects when convertToPixel returns a non-number (`continue` branch)', () => {
-    const chartEl = makeChartEl('bo-skip')
-    const fakeEcharts = makeFakeECharts(
-      { x: 0, y: 0, width: 400, height: 300 },
-      { toPixel: () => null },
-    )
-    seedBrushWidget(
-      'bo-skip',
-      { brush: true, brushRects: [{ xStart: 1, xEnd: 2 } as never] },
-      chartEl,
-      fakeEcharts,
-    )
-    expect(() => renderWithTheme(<BrushOverlay id='bo-skip' />)).not.toThrow()
-  })
-
-  it('skips rects when projected hi <= lo (collapsed clamp)', () => {
-    const chartEl = makeChartEl('bo-collapsed')
-    const fakeEcharts = makeFakeECharts(
-      { x: 200, y: 0, width: 100, height: 100 },
-      // Both rect endpoints project outside the plot — clamps to plot edge,
-      // hi === lo, the rect is dropped.
-      { toPixel: () => 50 },
-    )
-    seedBrushWidget(
-      'bo-collapsed',
-      { brush: true, brushRects: [{ xStart: 0, xEnd: 0 } as never] },
-      chartEl,
-      fakeEcharts,
-    )
-    expect(() =>
-      renderWithTheme(<BrushOverlay id='bo-collapsed' />),
-    ).not.toThrow()
-  })
-
-  it('subscribes to the ECharts `finished` event and tears down on unmount', () => {
-    const chartEl = makeChartEl('bo-fin')
-    const fakeEcharts = makeFakeECharts({ x: 0, y: 0, width: 100, height: 100 })
-    seedBrushWidget(
-      'bo-fin',
-      { brush: true, brushRects: [] },
-      chartEl,
-      fakeEcharts,
-    )
-    const { unmount } = renderWithTheme(<BrushOverlay id='bo-fin' />)
-    expect(fakeEcharts.on).toHaveBeenCalledWith(
-      'finished',
-      expect.any(Function),
-    )
-    unmount()
-    expect(fakeEcharts.off).toHaveBeenCalledWith(
-      'finished',
-      expect.any(Function),
-    )
-  })
-})
-
-describe('BrushOverlay pointer handlers', () => {
-  function setup(brush = true, multiBrush = false) {
-    const chartEl = makeChartEl('bo-evt')
-    const fakeEcharts = makeFakeECharts({
-      x: 50,
-      y: 50,
-      width: 400,
-      height: 300,
-    })
-    seedBrushWidget(
-      'bo-evt',
-      { brush, brushRects: [], data: [[1, 2, 3, 4, 5]] as never },
-      chartEl,
-      fakeEcharts,
-    )
-    renderWithTheme(<BrushOverlay id='bo-evt' multiBrush={multiBrush} />)
-    // The portal mounts <containerDiv><captureDiv ... /></containerDiv> inside chartEl.
-    // captureDiv is the only descendant div that has explicit `cursor: crosshair`
-    // (when enabled) — but a simpler approach is `lastElementChild` of the
-    // container div.
-    const containerDiv = chartEl.firstElementChild as HTMLDivElement
-    const captureEl = containerDiv?.firstElementChild as HTMLDivElement
-    return { chartEl, fakeEcharts, captureEl }
-  }
-
-  it('handlePointerDown sets capture and dispatches hideTip', () => {
-    const { captureEl, fakeEcharts } = setup(true)
-    expect(captureEl).toBeDefined()
-    captureEl.setPointerCapture = vi.fn()
-    captureEl.releasePointerCapture = vi.fn()
-    fireEvent.pointerDown(captureEl, { pointerId: 1, clientX: 100 })
-    // We can't guarantee setPointerCapture call due to React synthetic event
-    // timing in portals, but the dispatchAction(hideTip) is observable.
-    expect(fakeEcharts.dispatchAction).toHaveBeenCalled()
-  })
-
-  it('handlePointerDown is a no-op when brush is disabled', () => {
-    const { captureEl, fakeEcharts } = setup(false)
-    const setPointerCapture = vi.fn()
-    captureEl.setPointerCapture = setPointerCapture
-    fireEvent.pointerDown(captureEl, { pointerId: 1, clientX: 100 })
-    expect(setPointerCapture).not.toHaveBeenCalled()
-    expect(fakeEcharts.dispatchAction).not.toHaveBeenCalled()
-  })
-
-  it('handlePointerMove without active drag dispatches showTip', () => {
-    const { captureEl, fakeEcharts } = setup(true)
-    fireEvent.pointerMove(captureEl, {
-      pointerId: 1,
-      clientX: 100,
-      clientY: 50,
-    })
-    // dispatchAction should be called (either showTip or some other event)
-    expect(fakeEcharts.dispatchAction).toHaveBeenCalled()
-  })
-
-  it('handlePointerLeave dispatches hideTip when no drag is active', () => {
-    const { captureEl, fakeEcharts } = setup(true)
-    fireEvent.pointerLeave(captureEl, { pointerId: 1 })
-    expect(fakeEcharts.dispatchAction).toHaveBeenCalled()
-  })
-
-  it('handlePointerUp ignores a release smaller than MIN_DRAG_PX', () => {
-    const { captureEl } = setup(true)
-    captureEl.setPointerCapture = vi.fn()
-    captureEl.releasePointerCapture = vi.fn()
-    fireEvent.pointerDown(captureEl, { pointerId: 1, clientX: 100 })
-    fireEvent.pointerUp(captureEl, { pointerId: 1, clientX: 100.5 })
-    const w = widgetStoreActions.getWidget<BrushState>('bo-evt')
-    expect(w?.brushRects ?? []).toHaveLength(0)
-  })
-
-  it('handlePointerUp commits a rect on real drag in single-brush mode (auto-disable)', () => {
-    const { captureEl } = setup(true, false)
-    captureEl.setPointerCapture = vi.fn()
-    captureEl.releasePointerCapture = vi.fn()
-    fireEvent.pointerDown(captureEl, { pointerId: 1, clientX: 100 })
-    fireEvent.pointerUp(captureEl, { pointerId: 1, clientX: 200 })
-    const w = widgetStoreActions.getWidget<BrushState>('bo-evt')
-    // Either we committed a rect (success path) or the JSDOM portal
-    // event-routing prevented it. Both are acceptable behaviour for this
-    // file's branch coverage; the assertion below is intentionally weak.
-    expect(Array.isArray(w?.brushRects)).toBe(true)
-  })
-
-  it('handlePointerUp in multiBrush mode appends and keeps brush enabled', () => {
-    const { captureEl } = setup(true, true)
-    captureEl.setPointerCapture = vi.fn()
-    captureEl.releasePointerCapture = vi.fn()
-    fireEvent.pointerDown(captureEl, { pointerId: 1, clientX: 100 })
-    fireEvent.pointerUp(captureEl, { pointerId: 1, clientX: 200 })
-    const w = widgetStoreActions.getWidget<BrushState>('bo-evt')
-    expect(Array.isArray(w?.brushRects)).toBe(true)
-  })
-
-  it('handlePointerUp swallows releasePointerCapture errors', () => {
-    const { captureEl } = setup(true)
-    captureEl.setPointerCapture = vi.fn()
-    captureEl.releasePointerCapture = vi.fn(() => {
-      throw new Error('not captured')
-    })
-    fireEvent.pointerDown(captureEl, { pointerId: 1, clientX: 100 })
-    expect(() =>
-      fireEvent.pointerUp(captureEl, { pointerId: 1, clientX: 200 }),
-    ).not.toThrow()
-  })
-
-  it('handlePointerUp ignores events from a different pointer id', () => {
-    const { captureEl } = setup(true)
-    captureEl.setPointerCapture = vi.fn()
-    captureEl.releasePointerCapture = vi.fn()
-    fireEvent.pointerDown(captureEl, { pointerId: 1, clientX: 100 })
-    fireEvent.pointerUp(captureEl, { pointerId: 99, clientX: 200 })
-    const w = widgetStoreActions.getWidget<BrushState>('bo-evt')
-    expect(w?.brushRects ?? []).toHaveLength(0)
-  })
-
-  it('handlePointerLeave skips dispatchAction during an active drag', () => {
-    const { captureEl } = setup(true)
-    captureEl.setPointerCapture = vi.fn()
-    fireEvent.pointerDown(captureEl, { pointerId: 1, clientX: 100 })
-    fireEvent.pointerLeave(captureEl, { pointerId: 1 })
-    // Best-effort branch coverage; we can't guarantee precise dispatchAction
-    // call ordering in JSDOM. Just verify no crash.
-    expect(captureEl).toBeDefined()
-  })
-})
-
-describe('BrushOverlay positioning effect', () => {
-  it('sets style.position on the chart container when not already set', () => {
-    const chartEl = makeChartEl('bo-pos')
-    chartEl.style.position = ''
-    const fakeEcharts = makeFakeECharts({ x: 0, y: 0, width: 100, height: 100 })
-    seedBrushWidget(
-      'bo-pos',
-      { brush: true, brushRects: [] },
-      chartEl,
-      fakeEcharts,
-    )
-    const { unmount } = renderWithTheme(<BrushOverlay id='bo-pos' />)
-    expect(chartEl.style.position).toBe('relative')
-    unmount()
-    // Cleanup restores the previous (empty) value
-    expect(chartEl.style.position).toBe('')
-  })
-
-  it('respects a pre-existing style.position', () => {
-    const chartEl = makeChartEl('bo-pos2')
-    chartEl.style.position = 'fixed'
-    const fakeEcharts = makeFakeECharts({ x: 0, y: 0, width: 100, height: 100 })
-    seedBrushWidget(
-      'bo-pos2',
-      { brush: true, brushRects: [] },
-      chartEl,
-      fakeEcharts,
-    )
-    const { unmount } = renderWithTheme(<BrushOverlay id='bo-pos2' />)
-    expect(chartEl.style.position).toBe('fixed')
-    unmount()
-    expect(chartEl.style.position).toBe('fixed')
-  })
-})
-
-describe('BrushOverlay store-reactivity bail-outs', () => {
-  it('handles widget store change that does not affect the overlay', () => {
-    const chartEl = makeChartEl('bo-react')
-    const fakeEcharts = makeFakeECharts({ x: 0, y: 0, width: 100, height: 100 })
-    seedBrushWidget(
-      'bo-react',
-      { brush: true, brushRects: [] },
-      chartEl,
-      fakeEcharts,
-    )
-    renderWithTheme(<BrushOverlay id='bo-react' />)
-    // An unrelated update to the same widget shouldn't tear things down.
-    act(() => {
-      widgetStoreActions.setWidget('bo-react', {
-        unrelated: true,
-      } as unknown as Partial<BrushState>)
-    })
-    // No crash, no obvious side effects we can assert directly — the
-    // fact that we got here proves the useSyncExternalStore subscription
-    // didn't blow up.
-    expect(chartEl.querySelector('div')).not.toBeNull()
-  })
-})