@carto/ps-react-ui 5.3.0 → 6.1.0

package/src/widgets/wrapper/wrapper.test.tsx

@@ -1,365 +0,0 @@
-import { describe, test, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { WidgetWrapper } from './wrapper'
-import { useWidgetStore } from '../stores/widget-store'
-import type { WrapperState } from './types'
-
-describe('WidgetWrapper', () => {
-  beforeEach(() => {
-    useWidgetStore.getState().clearWidgets()
-    // Pre-set the widget in the store with required base fields
-    useWidgetStore.getState().setWidget<WrapperState>('test-wrapper', {
-      type: 'wrapper',
-      title: 'Test Title',
-      isLoading: false,
-      visible: true,
-      collapsed: false,
-      disabled: false,
-    })
-  })
-
-  const defaultProps = {
-    id: 'test-wrapper',
-    title: 'Test Title',
-    children: <div>Test Content</div>,
-  }
-
-  test('renders correctly with default props', () => {
-    render(<WidgetWrapper {...defaultProps} />)
-    expect(screen.getByText('Test Content')).toBeTruthy()
-  })
-
-  test('initializes widget state in store', () => {
-    render(<WidgetWrapper {...defaultProps} />)
-
-    const widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget).toBeTruthy()
-    expect(widget.id).toBe('test-wrapper')
-    expect(widget.title).toBe('Test Title')
-    expect(widget.isLoading).toBe(false)
-    // collapsed and disabled are set via props, undefined when not passed
-    expect(widget.collapsed).toBeUndefined()
-    expect(widget.disabled).toBeUndefined()
-    expect(widget.visible).toBe(true)
-  })
-
-  test('updates widget state when props change', () => {
-    // Render with Title 1
-    const { rerender } = render(
-      <WidgetWrapper {...defaultProps} title='Title 1' />,
-    )
-
-    let widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget.title).toBe('Title 1')
-
-    // Rerender with Title 2
-    rerender(<WidgetWrapper {...defaultProps} title='Title 2' />)
-
-    widget = useWidgetStore.getState().widgets['test-wrapper'] as WrapperState
-    expect(widget.title).toBe('Title 2')
-  })
-
-  test('initializes with collapsed state', () => {
-    render(<WidgetWrapper {...defaultProps} defaultCollapsed={true} />)
-
-    const widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget.collapsed).toBe(true)
-  })
-
-  test('initializes with disabled state', () => {
-    render(<WidgetWrapper {...defaultProps} disabled={true} />)
-
-    const widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget.disabled).toBe(true)
-  })
-
-  test('initializes with isLoading state', () => {
-    useWidgetStore
-      .getState()
-      .setWidget<WrapperState>('test-wrapper', { isLoading: true })
-    render(<WidgetWrapper {...defaultProps} />)
-
-    const widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget.isLoading).toBe(true)
-  })
-
-  test('handles collapse toggle correctly', () => {
-    const onChangeCollapsed = vi.fn()
-    useWidgetStore
-      .getState()
-      .setWidget<WrapperState>('test-wrapper', { collapsed: false })
-    render(
-      <WidgetWrapper {...defaultProps} onChangeCollapsed={onChangeCollapsed} />,
-    )
-
-    // Find the accordion and click to collapse
-    const accordion = screen.getByRole('button')
-    fireEvent.click(accordion)
-
-    expect(onChangeCollapsed).toHaveBeenCalledTimes(1)
-    const widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget.collapsed).toBe(true)
-  })
-
-  test('handles expand correctly', () => {
-    const onChangeCollapsed = vi.fn()
-    render(
-      <WidgetWrapper
-        {...defaultProps}
-        defaultCollapsed={true}
-        onChangeCollapsed={onChangeCollapsed}
-      />,
-    )
-
-    const accordion = screen.getByRole('button')
-    fireEvent.click(accordion)
-
-    expect(onChangeCollapsed).toHaveBeenCalledTimes(1)
-    const widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget.collapsed).toBe(false)
-  })
-
-  test('returns null when widget is not in store', () => {
-    // Clear the store to simulate widget not being set
-    const { container } = render(<WidgetWrapper {...defaultProps} />)
-
-    // Force the widget to be removed
-    useWidgetStore.getState().removeWidget('test-wrapper')
-
-    // Re-render to trigger the null check
-    render(
-      <WidgetWrapper id='non-existent-widget' title='Non-existent'>
-        <div>Content</div>
-      </WidgetWrapper>,
-    )
-
-    // The component should render initially
-    expect(container).toBeTruthy()
-  })
-
-  test('passes sx prop to WrapperUI', () => {
-    const sx = { backgroundColor: 'red' }
-    render(<WidgetWrapper {...defaultProps} sx={sx} />)
-
-    // Component should render (sx is passed through)
-    expect(screen.getByText('Test Content')).toBeTruthy()
-  })
-
-  test('passes actions to WrapperUI', () => {
-    const actions = [<button key='action1'>Action 1</button>]
-    render(<WidgetWrapper {...defaultProps} actions={actions} />)
-
-    expect(screen.getByText('Action 1')).toBeTruthy()
-  })
-
-  test('passes options to WrapperUI', () => {
-    const options = [
-      {
-        label: 'Option 1',
-        onClick: vi.fn(),
-      },
-    ]
-    render(<WidgetWrapper {...defaultProps} options={options} />)
-
-    // Options button should be rendered
-    const optionsButton = screen.getByLabelText('Options')
-    expect(optionsButton).toBeTruthy()
-  })
-
-  test('passes labels to WrapperUI', () => {
-    const labels = {
-      options: {
-        title: 'Custom Options',
-      },
-    }
-    render(<WidgetWrapper {...defaultProps} labels={labels} />)
-
-    // Component should render with labels
-    expect(screen.getByText('Test Content')).toBeTruthy()
-  })
-
-  test('updates widget when all props change', () => {
-    useWidgetStore.getState().setWidget<WrapperState>('test-wrapper', {
-      title: 'Initial Title',
-      collapsed: false,
-      disabled: false,
-      isLoading: false,
-    })
-    const { rerender } = render(<WidgetWrapper {...defaultProps} />)
-
-    useWidgetStore.getState().setWidget<WrapperState>('test-wrapper', {
-      title: 'Updated Title',
-      collapsed: true,
-      disabled: true,
-      isLoading: true,
-    })
-    rerender(<WidgetWrapper {...defaultProps} />)
-
-    const widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget.title).toBe('Updated Title')
-    expect(widget.collapsed).toBe(true)
-    expect(widget.disabled).toBe(true)
-    expect(widget.isLoading).toBe(true)
-  })
-
-  test('handles missing optional props', () => {
-    render(
-      <WidgetWrapper id='test-wrapper' title='Test Title'>
-        <div>Content</div>
-      </WidgetWrapper>,
-    )
-
-    const widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget.isLoading).toBe(false)
-    // collapsed and disabled are set via props, undefined when not passed
-    expect(widget.collapsed).toBeUndefined()
-    expect(widget.disabled).toBeUndefined()
-  })
-
-  test('renders WrapperUI with accordion', () => {
-    render(<WidgetWrapper {...defaultProps} />)
-
-    // Should render WrapperUI with accordion
-    const accordion = screen.getByRole('button')
-    expect(accordion).toBeTruthy()
-    expect(screen.getByText('Test Content')).toBeTruthy()
-  })
-
-  test('reads title from store when widget exists', () => {
-    // Pre-populate store with widget
-    useWidgetStore.getState().setWidget<WrapperState>('test-wrapper', {
-      type: 'wrapper',
-      title: 'Store Title',
-      isLoading: false,
-      visible: true,
-    })
-
-    render(
-      <WidgetWrapper id='test-wrapper' title='Store Title'>
-        <div>Content</div>
-      </WidgetWrapper>,
-    )
-
-    // Should display title from store
-    const widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget.title).toBe('Store Title')
-  })
-
-  test('renders actions even when widget is collapsed', () => {
-    const actions = [<button key='action1'>Action 1</button>]
-    useWidgetStore
-      .getState()
-      .setWidget<WrapperState>('test-wrapper', { collapsed: true })
-    render(<WidgetWrapper {...defaultProps} actions={actions} />)
-
-    // Actions are visible in the AccordionSummary even when collapsed
-    expect(screen.getByText('Action 1')).toBeTruthy()
-  })
-
-  test('shows actions when widget is expanded', () => {
-    const actions = [<button key='action1'>Action 1</button>]
-    useWidgetStore
-      .getState()
-      .setWidget<WrapperState>('test-wrapper', { collapsed: false })
-    render(<WidgetWrapper {...defaultProps} actions={actions} />)
-
-    // Actions should be visible when expanded
-    expect(screen.getByText('Action 1')).toBeTruthy()
-  })
-
-  test('actions remain visible when collapsing/expanding', () => {
-    const actions = [<button key='action1'>Action 1</button>]
-    useWidgetStore
-      .getState()
-      .setWidget<WrapperState>('test-wrapper', { collapsed: false })
-    const { rerender } = render(
-      <WidgetWrapper {...defaultProps} actions={actions} />,
-    )
-
-    // Actions visible when expanded
-    expect(screen.getByText('Action 1')).toBeTruthy()
-
-    // Collapse the widget
-    useWidgetStore
-      .getState()
-      .setWidget<WrapperState>('test-wrapper', { collapsed: true })
-    rerender(<WidgetWrapper {...defaultProps} actions={actions} />)
-
-    // Actions remain visible when collapsed (in AccordionSummary)
-    expect(screen.getByText('Action 1')).toBeTruthy()
-  })
-
-  test('isLoading state is independent from other states', () => {
-    useWidgetStore
-      .getState()
-      .setWidget<WrapperState>('test-wrapper', { isLoading: true })
-    render(<WidgetWrapper {...defaultProps} />)
-
-    const widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-
-    // isLoading in store
-    expect(widget.isLoading).toBe(true)
-  })
-
-  test('updates isLoading when state changes', () => {
-    useWidgetStore
-      .getState()
-      .setWidget<WrapperState>('test-wrapper', { isLoading: false })
-    const { rerender } = render(<WidgetWrapper {...defaultProps} />)
-
-    let widget = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widget.isLoading).toBe(false)
-
-    useWidgetStore
-      .getState()
-      .setWidget<WrapperState>('test-wrapper', { isLoading: true })
-    rerender(<WidgetWrapper {...defaultProps} />)
-
-    widget = useWidgetStore.getState().widgets['test-wrapper'] as WrapperState
-    expect(widget.isLoading).toBe(true)
-  })
-
-  test('widget state persists across re-renders', () => {
-    const { rerender } = render(
-      <WidgetWrapper {...defaultProps} title='Persistent Title' />,
-    )
-
-    const widgetBefore = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widgetBefore.title).toBe('Persistent Title')
-
-    // Re-render without changing props
-    rerender(<WidgetWrapper {...defaultProps} title='Persistent Title' />)
-
-    const widgetAfter = useWidgetStore.getState().widgets[
-      'test-wrapper'
-    ] as WrapperState
-    expect(widgetAfter.title).toBe('Persistent Title')
-    expect(widgetAfter).toBeTruthy()
-  })
-})

package/src/widgets/wrapper/wrapper.tsx

@@ -1,60 +0,0 @@
-import type { WrapperProps, WrapperState } from './types'
-import { WrapperUI } from './wrapper-ui'
-import { widgetStoreActions } from '../stores/widget-store'
-import { useLayoutEffect } from 'react'
-
-/**
- * Container component providing a collapsible header with title, action buttons, and options menu for widgets. Syncs collapse, disabled, and title state with the widget store.
- *
- * @example
- * ```tsx
- * <WidgetWrapper
- *   id="my-widget"
- *   title="Sales Overview"
- *   actions={[<Download key="download" id="my-widget" items={downloads} />]}
- * >
- *   {children}
- * </WidgetWrapper>
- * ```
- */
-export function WidgetWrapper({
-  id,
-  title,
-  defaultCollapsed,
-  disabled,
-  sx,
-  actions,
-  options,
-  labels,
-  children,
-  onChangeCollapsed,
-}: WrapperProps) {
-  useLayoutEffect(() => {
-    widgetStoreActions.setWidget<WrapperState>(id, {
-      collapsed: defaultCollapsed,
-      disabled,
-      title,
-    })
-  }, [defaultCollapsed, disabled, title, id])
-
-  const handleChangeCollapsed = (
-    event: React.SyntheticEvent<Element, Event>,
-    expanded: boolean,
-  ) => {
-    onChangeCollapsed?.(event, expanded)
-    widgetStoreActions.setWidget<WrapperState>(id, { collapsed: !expanded })
-  }
-
-  return (
-    <WrapperUI
-      id={id}
-      labels={labels}
-      actions={actions}
-      options={options}
-      sx={sx}
-      onChangeCollapsed={handleChangeCollapsed}
-    >
-      {children}
-    </WrapperUI>
-  )
-}

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

@@ -1,180 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { act, fireEvent, render, screen } from '@testing-library/react'
-import type { ECharts } from 'echarts'
-import { BrushToggle } from './brush-toggle'
-import { Provider } from '../../provider/widget-provider'
-import {
-  applyTransforms,
-  clearAllWidgetStores,
-  getWidgetStore,
-  setEchartInstance,
-} from '../../stores'
-
-interface ChartHandlers {
-  finished?: () => void
-}
-
-interface MockChart {
-  dispatchAction: ReturnType<typeof vi.fn>
-  on: (ev: string, cb: () => void) => void
-  off: (ev: string, cb: () => void) => void
-  __handlers: ChartHandlers
-}
-
-function makeMockChart(): MockChart {
-  const handlers: ChartHandlers = {}
-  return {
-    dispatchAction: vi.fn(),
-    on: (ev, cb) => {
-      if (ev === 'finished') handlers.finished = cb
-    },
-    off: (ev) => {
-      if (ev === 'finished') handlers.finished = undefined
-    },
-    __handlers: handlers,
-  }
-}
-
-beforeEach(() => clearAllWidgetStores())
-afterEach(() => clearAllWidgetStores())
-
-describe('<BrushToggle>', () => {
-  it('starts disabled by default', () => {
-    render(
-      <Provider id='bt-1' data={[]}>
-        <BrushToggle />
-      </Provider>,
-    )
-    expect(screen.getByLabelText('Enable brush selection')).toBeTruthy()
-  })
-
-  it('respects initialEnabled=true', () => {
-    render(
-      <Provider id='bt-2' data={[]}>
-        <BrushToggle initialEnabled />
-      </Provider>,
-    )
-    expect(screen.getByLabelText('Disable brush selection')).toBeTruthy()
-  })
-
-  it('clicking enables the transform — brush config appears in the post-pipeline option', () => {
-    render(
-      <Provider id='bt-3' data={[1]}>
-        <BrushToggle />
-      </Provider>,
-    )
-    fireEvent.click(screen.getByLabelText('Enable brush selection'))
-    // configTransforms now apply inside <Widget.Echart>; replay the
-    // pipeline locally over a blank structural option.
-    const configTransforms = getWidgetStore('bt-3').getState().configTransforms
-    const opts = applyTransforms({}, configTransforms) as {
-      brush?: { xAxisIndex?: string }
-    }
-    expect(opts.brush).toBeTruthy()
-    expect(opts.brush?.xAxisIndex).toBe('all')
-  })
-
-  it('dispatches takeGlobalCursor with brush config when enabled and a chart is registered', () => {
-    const chart = makeMockChart()
-    setEchartInstance('bt-4', chart as unknown as ECharts)
-    render(
-      <Provider id='bt-4' data={[1]}>
-        <BrushToggle initialEnabled />
-      </Provider>,
-    )
-    expect(chart.dispatchAction).toHaveBeenCalledWith({
-      type: 'takeGlobalCursor',
-      key: 'brush',
-      brushOption: { brushType: 'lineX', brushMode: 'multiple' },
-    })
-  })
-
-  it("re-dispatches takeGlobalCursor on the chart's 'finished' event", () => {
-    const chart = makeMockChart()
-    setEchartInstance('bt-5', chart as unknown as ECharts)
-    render(
-      <Provider id='bt-5' data={[1]}>
-        <BrushToggle initialEnabled />
-      </Provider>,
-    )
-    chart.dispatchAction.mockClear()
-    act(() => chart.__handlers.finished?.())
-    expect(chart.dispatchAction).toHaveBeenCalledWith({
-      type: 'takeGlobalCursor',
-      key: 'brush',
-      brushOption: { brushType: 'lineX', brushMode: 'multiple' },
-    })
-  })
-
-  it('on disable: clears the global cursor and wipes drawn areas', () => {
-    const chart = makeMockChart()
-    setEchartInstance('bt-6', chart as unknown as ECharts)
-    render(
-      <Provider id='bt-6' data={[1]}>
-        <BrushToggle initialEnabled />
-      </Provider>,
-    )
-    chart.dispatchAction.mockClear()
-    fireEvent.click(screen.getByLabelText('Disable brush selection'))
-    expect(chart.dispatchAction).toHaveBeenCalledWith({
-      type: 'takeGlobalCursor',
-    })
-    expect(chart.dispatchAction).toHaveBeenCalledWith({
-      type: 'brush',
-      areas: [],
-    })
-  })
-
-  it('honors brushType=rect and brushMode=single', () => {
-    const chart = makeMockChart()
-    setEchartInstance('bt-7', chart as unknown as ECharts)
-    render(
-      <Provider id='bt-7' data={[1]}>
-        <BrushToggle initialEnabled brushType='rect' brushMode='single' />
-      </Provider>,
-    )
-    expect(chart.dispatchAction).toHaveBeenCalledWith({
-      type: 'takeGlobalCursor',
-      key: 'brush',
-      brushOption: { brushType: 'rect', brushMode: 'single' },
-    })
-  })
-
-  it('wipes drawn brush areas when an external selection is cleared while enabled', () => {
-    const chart = makeMockChart()
-    setEchartInstance('bt-9', chart as unknown as ECharts)
-    const { rerender } = render(
-      <Provider id='bt-9' data={[1]}>
-        <BrushToggle initialEnabled selection={['a', 'b']} />
-      </Provider>,
-    )
-    chart.dispatchAction.mockClear()
-    rerender(
-      <Provider id='bt-9' data={[1]}>
-        <BrushToggle initialEnabled selection={[]} />
-      </Provider>,
-    )
-    expect(chart.dispatchAction).toHaveBeenCalledWith({
-      type: 'brush',
-      areas: [],
-    })
-  })
-
-  it('attaches the cursor reactively when the chart arrives *after* the toggle mounts', () => {
-    const chart = makeMockChart()
-    render(
-      <Provider id='bt-8' data={[1]}>
-        <BrushToggle initialEnabled />
-      </Provider>,
-    )
-    // Chart not yet registered — no dispatch should have happened.
-    expect(chart.dispatchAction).not.toHaveBeenCalled()
-    // Simulate the bridge mounting and publishing the instance.
-    act(() => setEchartInstance('bt-8', chart as unknown as ECharts))
-    expect(chart.dispatchAction).toHaveBeenCalledWith({
-      type: 'takeGlobalCursor',
-      key: 'brush',
-      brushOption: { brushType: 'lineX', brushMode: 'multiple' },
-    })
-  })
-})