@carto/ps-react-ui 5.3.0 → 6.1.0

package/src/widgets/actions/relative-data/relative-data.test.tsx

@@ -1,542 +1,71 @@
-import { describe, test, expect, beforeEach } from 'vitest'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import {
-  RelativeData,
-  RELATIVE_DATA_TOOL_ID,
-  RELATIVE_DATA_CONFIG_TOOL_ID,
-} from './relative-data'
-import { useWidgetStore } from '../../stores/widget-store'
-import type { EchartWidgetData } from '../../echart/types'
-import type { RelativeDataState } from './types'
-
-describe('RelativeData', () => {
-  const widgetId = 'test-relative-widget'
-
-  const mockData: EchartWidgetData = [
-    [
-      { category: 'A', value: 25 },
-      { category: 'B', value: 75 },
-    ],
-  ]
-
-  beforeEach(() => {
-    useWidgetStore.getState().clearWidgets()
-  })
-
-  test('renders relative data toggle button', () => {
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    expect(button).toBeTruthy()
-  })
-
-  test('shows relative tooltip when in absolute mode', () => {
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button', { name: 'Show relative values' })
-    expect(button).toBeTruthy()
-  })
-
-  test('toggles to relative mode and updates widget store with percentage values', async () => {
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    // Execute the pipeline with the source data
-    await useWidgetStore.getState().executeToolPipeline(widgetId, mockData)
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const data = widget?.data as EchartWidgetData
-
-    // Total is 100, so 25 becomes 25% and 75 becomes 75%
-    expect(data?.[0]?.[0]?.value).toBe(25)
-    expect(data?.[0]?.[1]?.value).toBe(75)
-    expect(data?.[0]?.[0]?.category).toBe('A')
-    expect(data?.[0]?.[1]?.category).toBe('B')
-  })
-
-  test('toggles back to absolute mode and restores original values', async () => {
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-
-    // Toggle to relative
-    fireEvent.click(button)
-    await useWidgetStore.getState().executeToolPipeline(widgetId, mockData)
-
-    // Toggle back to absolute
-    fireEvent.click(button)
-    await useWidgetStore.getState().executeToolPipeline(widgetId, mockData)
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const data = widget?.data as EchartWidgetData
-
-    expect(data?.[0]?.[0]?.value).toBe(25)
-    expect(data?.[0]?.[1]?.value).toBe(75)
-  })
-
-  test('has active state when in relative mode', () => {
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-
-    expect(button.getAttribute('data-active')).toBe('false')
-
-    fireEvent.click(button)
-
-    expect(button.getAttribute('data-active')).toBe('true')
-  })
-
-  test('starts in relative mode when defaultIsRelative is true', () => {
-    render(<RelativeData id={widgetId} defaultIsRelative />)
-
-    const button = screen.getByRole('button')
-    expect(button.getAttribute('data-active')).toBe('true')
-
-    // Should show absolute tooltip when in relative mode
-    expect(button.getAttribute('aria-label')).toBe('Show absolute values')
-  })
-
-  test('initializes tool state with defaultIsRelative on mount', async () => {
-    render(<RelativeData id={widgetId} defaultIsRelative />)
-
-    await waitFor(() => {
-      const widget = useWidgetStore.getState().getWidget(widgetId)
-      const tool = widget?.registeredTools?.find(
-        (t) => t.id === RELATIVE_DATA_TOOL_ID,
-      )
-      expect(tool?.enabled).toBe(true)
-    })
-  })
-
-  test('initializes tool state with false when defaultIsRelative is false', async () => {
-    render(<RelativeData id={widgetId} defaultIsRelative={false} />)
-
-    await waitFor(() => {
-      const widget = useWidgetStore.getState().getWidget(widgetId)
-      const tool = widget?.registeredTools?.find(
-        (t) => t.id === RELATIVE_DATA_TOOL_ID,
-      )
-      expect(tool?.enabled).toBe(false)
-    })
-  })
-
-  test('uses custom labels when provided', () => {
-    const customLabels = {
-      relative: 'Switch to %',
-      absolute: 'Switch to numbers',
-      ariaLabel: 'Toggle data mode',
-    }
-
-    render(<RelativeData id={widgetId} labels={customLabels} />)
-
-    const button = screen.getByRole('button', { name: 'Toggle data mode' })
-    expect(button).toBeTruthy()
-  })
-
-  test('handles data with multiple series', async () => {
-    const multiSeriesData: EchartWidgetData = [
-      [
-        { name: 'X', count: 10 },
-        { name: 'Y', count: 20 },
-      ],
-      [
-        { name: 'X', count: 30 },
-        { name: 'Y', count: 40 },
-      ],
-    ]
-
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    await useWidgetStore
-      .getState()
-      .executeToolPipeline(widgetId, multiSeriesData)
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const data = widget?.data as EchartWidgetData
-
-    // Total is 100, so values become 10%, 20%, 30%, 40%
-    expect(data?.[0]?.[0]?.count).toBe(10)
-    expect(data?.[0]?.[1]?.count).toBe(20)
-    expect(data?.[1]?.[0]?.count).toBe(30)
-    expect(data?.[1]?.[1]?.count).toBe(40)
-  })
-
-  test('handles zero total gracefully', async () => {
-    const zeroData: EchartWidgetData = [
-      [
-        { category: 'A', value: 0 },
-        { category: 'B', value: 0 },
-      ],
-    ]
-
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    await useWidgetStore.getState().executeToolPipeline(widgetId, zeroData)
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const data = widget?.data as EchartWidgetData
-
-    // Should preserve original data when total is 0
-    expect(data?.[0]?.[0]?.value).toBe(0)
-    expect(data?.[0]?.[1]?.value).toBe(0)
-  })
-
-  test('preserves string values during transformation', async () => {
-    const mixedData: EchartWidgetData = [
-      [
-        { label: 'First', value: 50, extra: 'text' },
-        { label: 'Second', value: 50, extra: 'more' },
-      ],
-    ]
-
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    await useWidgetStore.getState().executeToolPipeline(widgetId, mixedData)
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const data = widget?.data as EchartWidgetData
-
-    expect(data?.[0]?.[0]?.label).toBe('First')
-    expect(data?.[0]?.[0]?.extra).toBe('text')
-    expect(data?.[0]?.[1]?.label).toBe('Second')
-    expect(data?.[0]?.[1]?.extra).toBe('more')
-  })
-
-  test('renders custom icon when provided', () => {
-    const customIcon = <span data-testid='custom-icon'>%</span>
-
-    render(<RelativeData id={widgetId} Icon={customIcon} />)
-
-    expect(screen.getByTestId('custom-icon')).toBeTruthy()
-  })
-
-  test('passes IconButtonProps to the button', () => {
-    render(<RelativeData id={widgetId} IconButtonProps={{ disabled: true }} />)
-
-    const button = screen.getByRole('button')
-    expect(button.hasAttribute('disabled')).toBeTruthy()
-  })
-
-  test('registers both data and config tools on mount', async () => {
-    render(<RelativeData id={widgetId} />)
-
-    await waitFor(() => {
-      const widget = useWidgetStore.getState().getWidget(widgetId)
-      const dataTool = widget?.registeredTools?.find(
-        (t) => t.id === RELATIVE_DATA_TOOL_ID,
-      )
-      const configTool = widget?.registeredTools?.find(
-        (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
-      )
-      expect(dataTool).toBeTruthy()
-      expect(configTool).toBeTruthy()
-      expect(configTool?.type).toBe('config')
-      // Data tool disabled by default (isRelative=false)
-      expect(dataTool?.enabled).toBe(false)
-      // Config tool always enabled — it reads isRelative from store internally
-      expect(configTool?.enabled).toBe(true)
-    })
-  })
-
-  test('data tool enabled when toggled to relative mode', async () => {
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    await waitFor(() => {
-      const widget = useWidgetStore.getState().getWidget(widgetId)
-      const dataTool = widget?.registeredTools?.find(
-        (t) => t.id === RELATIVE_DATA_TOOL_ID,
-      )
-      expect(dataTool?.enabled).toBe(true)
-    })
-  })
-
-  test('stores isRelative in widget root state', () => {
-    render(<RelativeData id={widgetId} />)
-
-    // Default: isRelative=false in store
-    let widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as RelativeDataState | undefined)?.isRelative).toBe(false)
-
-    // Toggle to relative
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as RelativeDataState | undefined)?.isRelative).toBe(true)
-
-    // Toggle back
-    fireEvent.click(button)
-
-    widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as RelativeDataState | undefined)?.isRelative).toBe(false)
-  })
-
-  test('config tool does not apply formatter when sourceData is empty', async () => {
-    const customFormatter = (value: number) => `$${value}`
-    useWidgetStore
-      .getState()
-      .setWidget(widgetId, { formatter: customFormatter, sourceData: [] })
-
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    // Execute config pipeline — sourceData is empty, so formatter should pass through
-    await useWidgetStore
-      .getState()
-      .executeConfigPipeline(widgetId, { formatter: customFormatter, max: 200 })
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect(widget?.formatter).toBe(customFormatter)
-    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
-  })
-
-  test('config pipeline applies percentage formatter when in relative mode', async () => {
-    useWidgetStore
-      .getState()
-      .setWidget(widgetId, { max: 500, sourceData: mockData })
-
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    // Execute config pipeline
-    await useWidgetStore
-      .getState()
-      .executeConfigPipeline(widgetId, { max: 500 })
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as unknown as Record<string, unknown>)?.max).toBe(100)
-    expect(widget?.formatter).toBeDefined()
-    expect(typeof widget?.formatter).toBe('function')
-  })
-
-  test('config tool passes config through unchanged when not in relative mode', async () => {
-    const customFormatter = (value: number) => `$${value}`
-    useWidgetStore
-      .getState()
-      .setWidget(widgetId, { formatter: customFormatter, max: 200 })
-
-    render(<RelativeData id={widgetId} />)
-
-    // Execute config pipeline — config tool is enabled but isRelative=false in store,
-    // so it passes through the config unchanged
-    await useWidgetStore
-      .getState()
-      .executeConfigPipeline(widgetId, { formatter: customFormatter, max: 200 })
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect(widget?.formatter).toBe(customFormatter)
-    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
-  })
-
-  test('restores original formatter/max when toggling back to absolute', async () => {
-    const customFormatter = (value: number) => `$${value}`
-    useWidgetStore.getState().setWidget(widgetId, {
-      formatter: customFormatter,
-      max: 200,
-      sourceData: mockData,
-    })
-
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-
-    // Toggle to relative — captures originalFormatter/originalMax in store
-    fireEvent.click(button)
-
-    await useWidgetStore
-      .getState()
-      .executeConfigPipeline(widgetId, { max: 200 })
-
-    let widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as unknown as Record<string, unknown>)?.max).toBe(100)
-
-    // Toggle back to absolute — config tool restores originals from store
-    fireEvent.click(button)
-
-    await useWidgetStore
-      .getState()
-      .executeConfigPipeline(widgetId, { max: 200 })
-
-    widget = useWidgetStore.getState().getWidget(widgetId)
-    expect(widget?.formatter).toBe(customFormatter)
-    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
-  })
-
-  test('removes percentage formatter when toggling back with no original formatter', async () => {
-    // Widget has no formatter — originalFormatter will be captured as undefined
-    useWidgetStore.getState().setWidget(widgetId, { sourceData: mockData })
-
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-
-    // Toggle to relative — captures originalFormatter=undefined
-    fireEvent.click(button)
-
-    await useWidgetStore.getState().executeConfigPipeline(widgetId, {})
-
-    let widget = useWidgetStore.getState().getWidget(widgetId)
-    expect(widget?.formatter).toBeDefined()
-    expect(typeof widget?.formatter).toBe('function')
-
-    // Toggle back to absolute — should remove percentage formatter
-    fireEvent.click(button)
-
-    await useWidgetStore.getState().executeConfigPipeline(widgetId, {})
-
-    widget = useWidgetStore.getState().getWidget(widgetId)
-    expect(widget?.formatter).toBeUndefined()
-  })
-
-  test('removes percentage formatter when defaultIsRelative=true and toggling to absolute', async () => {
-    // Widget starts with defaultIsRelative=true and no formatter
-    useWidgetStore.getState().setWidget(widgetId, { sourceData: mockData })
-
-    render(<RelativeData id={widgetId} defaultIsRelative />)
-
-    // Pipeline runs with isRelative=true — applies percentage formatter
-    await useWidgetStore.getState().executeConfigPipeline(widgetId, {})
-
-    let widget = useWidgetStore.getState().getWidget(widgetId)
-    expect(widget?.formatter).toBeDefined()
-    expect(typeof widget?.formatter).toBe('function')
-
-    // Toggle to absolute (first toggle is OFF when defaultIsRelative=true)
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    await useWidgetStore.getState().executeConfigPipeline(widgetId, {})
-
-    widget = useWidgetStore.getState().getWidget(widgetId)
-    expect(widget?.formatter).toBeUndefined()
-  })
-
-  test('stores originalFormatter/originalMax in widget root on toggle', () => {
-    const customFormatter = (value: number) => `$${value}`
-    useWidgetStore
-      .getState()
-      .setWidget(widgetId, { formatter: customFormatter, max: 200 })
-
-    render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    const widget = useWidgetStore
-      .getState()
-      .getWidget<RelativeDataState>(widgetId)
-    expect(widget?.originalFormatter).toBe(customFormatter)
-    expect(widget?.originalMax).toBe(200)
-  })
-
-  test('restores original formatter/max when unmounting while in relative mode', async () => {
-    const customFormatter = (value: number) => `$${value}`
-    useWidgetStore
-      .getState()
-      .setWidget(widgetId, { formatter: customFormatter, max: 200 })
-
-    const { unmount } = render(<RelativeData id={widgetId} />)
-
-    const button = screen.getByRole('button')
-
-    // Toggle to relative — captures originalFormatter/originalMax in store
-    fireEvent.click(button)
-
-    await waitFor(() => {
-      const widget = useWidgetStore
-        .getState()
-        .getWidget<RelativeDataState>(widgetId)
-      expect(widget?.isRelative).toBe(true)
-      expect(widget?.originalFormatter).toBe(customFormatter)
-      expect(widget?.originalMax).toBe(200)
-    })
-
-    // Unmount while still in relative mode
-    unmount()
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect(widget?.formatter).toBe(customFormatter)
-    expect((widget as unknown as Record<string, unknown>)?.max).toBe(200)
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { render } from '@testing-library/react'
+import { Provider } from '../../provider/widget-provider'
+import { clearAllWidgetStores, getWidgetStore } from '../../stores'
+import { RelativeData } from './relative-data'
+
+beforeEach(() => clearAllWidgetStores())
+afterEach(() => clearAllWidgetStores())
+
+const fmtA = (n: number) => `A${n}`
+const fmtB = (n: number) => `B${n}`
+
+describe('<RelativeData> — rawFormatter-driven restoration', () => {
+  it('Provider mirrors the formatter prop into both rawFormatter and formatter', () => {
+    render(
+      <Provider id='rd1' data={[]} formatter={fmtA}>
+        <RelativeData initialEnabled={false} />
+      </Provider>,
+    )
+    const s = getWidgetStore('rd1').getState()
+    expect(s.rawFormatter).toBe(fmtA)
+    expect(s.formatter).toBe(fmtA)
   })
 
-  test('unregisters tools on unmount', async () => {
-    const { unmount } = render(<RelativeData id={widgetId} />)
-
-    await waitFor(() => {
-      const widget = useWidgetStore.getState().getWidget(widgetId)
-      expect(widget?.registeredTools?.length).toBeGreaterThan(0)
-    })
-
-    unmount()
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const dataTool = widget?.registeredTools?.find(
-      (t) => t.id === RELATIVE_DATA_TOOL_ID,
+  it('initialEnabled=true installs the percent formatter and leaves rawFormatter untouched', () => {
+    render(
+      <Provider id='rd2' data={[]} formatter={fmtA}>
+        <RelativeData initialEnabled={true} />
+      </Provider>,
     )
-    const configTool = widget?.registeredTools?.find(
-      (t) => t.id === RELATIVE_DATA_CONFIG_TOOL_ID,
+    const s = getWidgetStore('rd2').getState()
+    expect(s.rawFormatter).toBe(fmtA)
+    expect(typeof s.formatter).toBe('function')
+    expect(s.formatter).not.toBe(fmtA)
+    // Sanity: the override is the percent formatter (50 → "50%" via Intl).
+    expect(s.formatter?.(50)).toMatch(/%$/)
+  })
+
+  it('consumer prop change while enabled updates rawFormatter; effect re-applies percent', () => {
+    const { rerender } = render(
+      <Provider id='rd3' data={[]} formatter={fmtA}>
+        <RelativeData initialEnabled={true} />
+      </Provider>,
     )
-    expect(dataTool).toBeUndefined()
-    expect(configTool).toBeUndefined()
-  })
-
-  test('recalculates relative values when store data changes externally while in relative mode', async () => {
-    const initialData: EchartWidgetData = [
-      [
-        { category: 'A', value: 50 },
-        { category: 'B', value: 50 },
-      ],
-    ]
-
-    // Pre-populate the widget in the store with relative data
-    useWidgetStore.getState().setWidget(widgetId, {
-      data: initialData,
-    })
-
-    render(<RelativeData id={widgetId} defaultIsRelative />)
-
-    let widget
-    let data
-    await waitFor(() => {
-      widget = useWidgetStore.getState().getWidget(widgetId)
-      data = widget?.data as EchartWidgetData
-      // Initial data: 50/100 = 50%, 50/100 = 50%
-      expect(data?.[0]?.[0]?.value).toBe(50)
-      expect(data?.[0]?.[1]?.value).toBe(50)
-    })
-
-    // Simulate external store update with new absolute data
-    const newAbsoluteData: EchartWidgetData = [
-      [
-        { category: 'A', value: 25 },
-        { category: 'B', value: 75 },
-      ],
-    ]
-    useWidgetStore.getState().setWidget(widgetId, { data: newAbsoluteData })
-
-    // Component should detect external change and recalculate
-    // New data: 25/100 = 25%, 75/100 = 75%
-    widget = useWidgetStore.getState().getWidget(widgetId)
-    data = widget?.data as EchartWidgetData
-    expect(data?.[0]?.[0]?.value).toBe(25)
-    expect(data?.[0]?.[1]?.value).toBe(75)
+    const store = getWidgetStore('rd3')
+    expect(store.getState().rawFormatter).toBe(fmtA)
+    const beforePercent = store.getState().formatter
+
+    rerender(
+      <Provider id='rd3' data={[]} formatter={fmtB}>
+        <RelativeData initialEnabled={true} />
+      </Provider>,
+    )
+    const after = store.getState()
+    expect(after.rawFormatter).toBe(fmtB)
+    // Formatter is still the percent formatter (re-applied via the effect).
+    expect(after.formatter).not.toBe(fmtB)
+    expect(after.formatter).toBe(beforePercent)
+  })
+
+  it('initialEnabled=false leaves formatter equal to rawFormatter', () => {
+    render(
+      <Provider id='rd4' data={[]} formatter={fmtA}>
+        <RelativeData initialEnabled={false} />
+      </Provider>,
+    )
+    const s = getWidgetStore('rd4').getState()
+    expect(s.formatter).toBe(s.rawFormatter)
+    expect(s.formatter).toBe(fmtA)
   })
 })