@carto/ps-react-ui 5.1.0 → 6.0.0

package/src/widgets/actions/lock-selection/lock-selection.test.tsx

@@ -1,198 +1,301 @@
-import { describe, test, expect, beforeEach } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { LockSelection, LOCK_SELECTION_TOOL_ID } from './lock-selection'
-import { useWidgetStore } from '../../stores/widget-store'
-import type { EchartWidgetData } from '../../echart/types'
-import type { LockSelectionState } from './types'
-import { WidgetLoader } from '../../loader/loader'
-
-// Test data
-const mockData: EchartWidgetData = [
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Provider } from '../../provider/widget-provider'
+import { clearAllWidgetStores, getWidgetStore } from '../../stores'
+import { LockSelection } from './lock-selection'
+import { filterByLockedItems } from './transforms'
+import { filterTableByLockedRows } from '../../table/transforms'
+
+beforeEach(() => clearAllWidgetStores())
+afterEach(() => clearAllWidgetStores())
+
+const DATA = [
   [
-    { name: 'Electronics', value: 440 },
-    { name: 'Clothing', value: 280 },
-    { name: 'Books', value: 100 },
+    { name: 'A', value: 10 },
+    { name: 'B', value: 20 },
+    { name: 'C', value: 30 },
   ],
 ]
 
-describe('LockSelection', () => {
-  const widgetId = 'test-lock-selection'
-
-  beforeEach(() => {
-    useWidgetStore.getState().clearWidgets()
+describe('<LockSelection>', () => {
+  it('disables the trigger when nothing is selected and nothing is locked', () => {
+    render(
+      <Provider id='ls1' data={DATA}>
+        <LockSelection
+          selection={[]}
+          lockedItems={[]}
+          onLockChange={() => undefined}
+          labels={{ disabled: 'Pick rows' }}
+        />
+      </Provider>,
+    )
+    const btn = screen.getByRole('button', { name: 'Pick rows' })
+    expect(btn.getAttribute('disabled')).not.toBeNull()
   })
 
-  test('renders nothing when no selections', () => {
-    const { container } = render(
-      <LockSelection id={widgetId} selectedItems={[]} />,
+  it('shows the lock label when selection is non-empty and not locked', () => {
+    render(
+      <Provider id='ls2' data={DATA}>
+        <LockSelection
+          selection={['A']}
+          lockedItems={[]}
+          onLockChange={() => undefined}
+          labels={{ lock: 'Lock these' }}
+        />
+      </Provider>,
     )
-
-    expect(container.firstChild).toBeNull()
+    const btn = screen.getByRole('button', { name: 'Lock these' })
+    expect(btn.getAttribute('aria-pressed')).toBe('false')
+    expect(btn.getAttribute('disabled')).toBeNull()
   })
 
-  test('renders lock button when there are selections', () => {
-    render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
-
-    const button = screen.getByRole('button')
-    expect(button).toBeTruthy()
+  it('shows the unlock label when locked and aria-pressed=true', () => {
+    render(
+      <Provider id='ls3' data={DATA}>
+        <LockSelection
+          selection={['A']}
+          lockedItems={['A']}
+          onLockChange={() => undefined}
+          labels={{ unlock: 'Release' }}
+        />
+      </Provider>,
+    )
+    const btn = screen.getByRole('button', { name: 'Release' })
+    expect(btn.getAttribute('aria-pressed')).toBe('true')
   })
 
-  test('shows lock tooltip when unlocked', () => {
-    render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
-
-    const button = screen.getByRole('button', { name: 'Lock selection' })
-    expect(button).toBeTruthy()
+  it('snapshots selection on lock — onLockChange called with current selection', () => {
+    const onLockChange = vi.fn()
+    render(
+      <Provider id='ls4' data={DATA}>
+        <LockSelection
+          selection={['A', 'B']}
+          lockedItems={[]}
+          onLockChange={onLockChange}
+          labels={{ lock: 'Lock' }}
+        />
+      </Provider>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Lock' }))
+    expect(onLockChange).toHaveBeenCalledTimes(1)
+    expect(onLockChange).toHaveBeenCalledWith(['A', 'B'])
   })
 
-  test('shows unlock tooltip when locked', () => {
-    render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
-
-    // Lock by clicking the button
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    const unlockedButton = screen.getByRole('button', {
-      name: 'Unlock selection',
-    })
-    expect(unlockedButton).toBeTruthy()
+  it('clears the lock — onLockChange called with empty array', () => {
+    const onLockChange = vi.fn()
+    render(
+      <Provider id='ls5' data={DATA}>
+        <LockSelection
+          selection={['A']}
+          lockedItems={['A', 'B']}
+          onLockChange={onLockChange}
+          labels={{ unlock: 'Unlock' }}
+        />
+      </Provider>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Unlock' }))
+    expect(onLockChange).toHaveBeenCalledWith([])
   })
 
-  test('toggles isLocked in tool state when clicked', () => {
-    render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const tool = widget?.registeredTools?.find(
-      (t) => t.id === LOCK_SELECTION_TOOL_ID,
+  it('registers a data transform that filters when locked, restores when unlocked', () => {
+    const { rerender } = render(
+      <Provider id='ls6' data={DATA}>
+        <LockSelection
+          selection={['A']}
+          lockedItems={['A']}
+          onLockChange={() => undefined}
+        />
+      </Provider>,
     )
-    expect(tool?.enabled).toBe(true)
+    const locked = getWidgetStore('ls6').getState().data as unknown[][]
+    expect(locked).toEqual([[{ name: 'A', value: 10 }]])
+
+    rerender(
+      <Provider id='ls6' data={DATA}>
+        <LockSelection
+          selection={['A']}
+          lockedItems={[]}
+          onLockChange={() => undefined}
+        />
+      </Provider>,
+    )
+    const unlocked = getWidgetStore('ls6').getState().data as unknown[][]
+    // With no lockedItems and the transform disabled, the pipeline returns
+    // raw data. All three rows should be present.
+    expect(unlocked.flat().length).toBe(3)
   })
 
-  test('filters data in store when locking', async () => {
-    const selectedItems = ['Electronics']
-
+  it('uses a custom filterFn instead of filterByLockedItems when supplied', () => {
+    const customFilter = vi.fn(
+      (data: unknown, locked: readonly (string | number)[]) =>
+        (data as unknown[][]).map((series) =>
+          series.filter((_, i) => locked.includes(i)),
+        ),
+    )
     render(
-      <WidgetLoader
-        id={widgetId}
-        type='test'
-        data={mockData}
-        isLoading={false}
-        isFetching={false}
-      >
-        <LockSelection id={widgetId} selectedItems={selectedItems} />
-      </WidgetLoader>,
+      <Provider id='ls8' data={DATA}>
+        <LockSelection
+          selection={[0]}
+          lockedItems={[0]}
+          onLockChange={() => undefined}
+          filterFn={customFilter}
+        />
+      </Provider>,
     )
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    await useWidgetStore.getState().executeToolPipeline(widgetId, mockData)
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect(widget?.data).toEqual([[{ name: 'Electronics', value: 440 }]])
+    // Third argument is `filterKey`, undefined when the prop is omitted.
+    expect(customFilter).toHaveBeenCalledWith(DATA, [0], undefined)
+    const locked = getWidgetStore('ls8').getState().data as unknown[][]
+    expect(locked).toEqual([[{ name: 'A', value: 10 }]])
   })
 
-  test('clears locked items when unlocking', () => {
-    render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
-
-    // Lock first
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    // Then unlock
-    fireEvent.click(button)
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const tool = widget?.registeredTools?.find(
-      (t) => t.id === LOCK_SELECTION_TOOL_ID,
+  it('does not rebuild the registered transform when filterFn gets a fresh identity but lockedItems is unchanged', () => {
+    // Mirrors the documented usage in table/transforms.ts: an inline lambda
+    // closing over `filterFn`, a new function identity on every render.
+    // `SELECTION`/`LOCKED` are hoisted so their *reference* stays stable
+    // across renders — only `filterFn`'s identity should vary here.
+    const SELECTION = ['A']
+    const LOCKED = ['A']
+    let renderCount = 0
+    const Wrapper = () => {
+      renderCount++
+      return (
+        <LockSelection
+          selection={SELECTION}
+          lockedItems={LOCKED}
+          onLockChange={() => undefined}
+          filterFn={(data, locked) => filterByLockedItems(data, locked)}
+        />
+      )
+    }
+    const { rerender } = render(
+      <Provider id='ls9' data={DATA}>
+        <Wrapper />
+      </Provider>,
     )
-    expect(tool?.enabled).toBe(false)
-  })
-
-  test('clears lock state when selectedItems becomes empty while locked', () => {
-    // Simulate remount: isLocked persists in store but selectedItems is now empty
-    useWidgetStore
-      .getState()
-      .setWidget(widgetId, { isLocked: true, lockedItems: ['Electronics'] })
-
-    render(<LockSelection id={widgetId} selectedItems={[]} />)
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as LockSelectionState | undefined)?.isLocked).toBe(false)
-    expect((widget as LockSelectionState | undefined)?.lockedItems).toEqual([])
+    const firstTransforms = getWidgetStore('ls9').getState().dataTransforms
+    rerender(
+      <Provider id='ls9' data={DATA}>
+        <Wrapper />
+      </Provider>,
+    )
+    expect(renderCount).toBe(2)
+    const secondTransforms = getWidgetStore('ls9').getState().dataTransforms
+    // Same reference — `useMemoPair`'s `useCallback` only depends on
+    // `lockedItems`, so a fresh inline `filterFn` each render must not
+    // rebuild the transform pair.
+    expect(secondTransforms).toBe(firstTransforms)
+    const locked = getWidgetStore('ls9').getState().data as unknown[][]
+    expect(locked).toEqual([[{ name: 'A', value: 10 }]])
   })
 
-  test('has active state when locked', () => {
-    render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    expect(button.getAttribute('data-active')).toBe('true')
+  it('rebuilds the transform when filterKey changes, with a stable filterFn reference', () => {
+    // `filterFn` is passed by reference here, so `filterKey` is the only
+    // thing that varies — and it has to be enough on its own. Nothing else
+    // would tell the pipeline the key changed: `filterFn`'s identity is not
+    // a dependency, and `rawData`/`dataTransforms` are the only recompute
+    // keys, so the widget would keep the rows matched by the old key.
+    const SELECTION = ['A']
+    const LOCKED = ['A']
+    const renderWith = (keyColumn: string) => (
+      <Provider id='ls-key' data={DATA}>
+        <LockSelection
+          selection={SELECTION}
+          lockedItems={LOCKED}
+          onLockChange={() => undefined}
+          // No closure: the key travels through `filterFn`'s third argument.
+          filterFn={filterTableByLockedRows}
+          filterKey={keyColumn}
+        />
+      </Provider>
+    )
+    const { rerender } = render(renderWith('id'))
+    const first = getWidgetStore('ls-key').getState().dataTransforms
+    rerender(renderWith('code'))
+    const second = getWidgetStore('ls-key').getState().dataTransforms
+    expect(second).not.toBe(first)
   })
 
-  test('has inactive state when unlocked', () => {
-    render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
+  it('hands filterKey to filterFn as its third argument', () => {
+    // The identity check above cannot see this: an implementation that put
+    // `filterKey` in the deps but dropped it from the call still produces a
+    // new transform. That is the exact failure the component warns about, and
+    // it has to be pinned on the value, not the reference.
+    const spy = vi.fn(() => [] as unknown[])
+    const SELECTION = ['A']
+    const LOCKED = ['A']
+    render(
+      <Provider id='ls-key-value' data={DATA}>
+        <LockSelection
+          selection={SELECTION}
+          lockedItems={LOCKED}
+          onLockChange={() => undefined}
+          filterFn={spy}
+          filterKey='code'
+        />
+      </Provider>,
+    )
 
-    const button = screen.getByRole('button')
-    expect(button.getAttribute('data-active')).toBe('false')
+    expect(spy).toHaveBeenCalledWith(DATA, LOCKED, 'code')
   })
 
-  test('uses custom labels', () => {
-    render(
-      <LockSelection
-        id={widgetId}
-        selectedItems={['Electronics']}
-        labels={{
-          lock: 'Bloquear selección',
-          unlock: 'Desbloquear selección',
-          ariaLabel: 'Toggle lock',
-        }}
-      />,
+  it('lets the destination feed a different lockedItems set later', () => {
+    const { rerender } = render(
+      <Provider id='ls7' data={DATA}>
+        <LockSelection
+          selection={['A']}
+          lockedItems={['A']}
+          onLockChange={() => undefined}
+        />
+      </Provider>,
+    )
+    expect(
+      (getWidgetStore('ls7').getState().data as unknown[][]).flat(),
+    ).toEqual([{ name: 'A', value: 10 }])
+
+    rerender(
+      <Provider id='ls7' data={DATA}>
+        <LockSelection
+          selection={['A', 'B', 'C']}
+          lockedItems={['B', 'C']}
+          onLockChange={() => undefined}
+        />
+      </Provider>,
     )
+    expect(
+      (getWidgetStore('ls7').getState().data as unknown[][]).flat(),
+    ).toEqual([
+      { name: 'B', value: 20 },
+      { name: 'C', value: 30 },
+    ])
+  })
+})
 
-    const button = screen.getByRole('button', { name: 'Toggle lock' })
-    expect(button).toBeTruthy()
+describe('filterByLockedItems', () => {
+  it('returns input unchanged when locked set is empty', () => {
+    expect(filterByLockedItems(DATA, [])).toBe(DATA)
   })
 
-  test('filters multiple series when locking', async () => {
-    const multiSeriesData: EchartWidgetData = [
+  it('keeps only items whose name is in the locked set, preserving series shape', () => {
+    const out = filterByLockedItems(DATA, ['A', 'C']) as unknown[][]
+    expect(out).toEqual([
       [
-        { name: 'Electronics', value: 440 },
-        { name: 'Clothing', value: 280 },
+        { name: 'A', value: 10 },
+        { name: 'C', value: 30 },
       ],
+    ])
+  })
+
+  it('handles numeric names', () => {
+    const data = [
       [
-        { name: 'Electronics', value: 520 },
-        { name: 'Clothing', value: 350 },
+        { name: 1, value: 10 },
+        { name: 2, value: 20 },
       ],
     ]
-    const selectedItems = ['Electronics']
-
-    render(
-      <WidgetLoader
-        id={widgetId}
-        type='test'
-        data={multiSeriesData}
-        isLoading={false}
-        isFetching={false}
-      >
-        <LockSelection id={widgetId} selectedItems={selectedItems} />
-      </WidgetLoader>,
-    )
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    await useWidgetStore
-      .getState()
-      .executeToolPipeline(widgetId, multiSeriesData)
+    expect(filterByLockedItems(data, [2])).toEqual([[{ name: 2, value: 20 }]])
+  })
 
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect(widget?.data).toEqual([
-      [{ name: 'Electronics', value: 440 }],
-      [{ name: 'Electronics', value: 520 }],
-    ])
+  it('returns input unchanged when input is not array-shaped', () => {
+    expect(filterByLockedItems('nope', ['A'])).toBe('nope')
   })
 })