@carto/ps-react-ui 5.0.0-widgets.9 → 5.1.0

package/src/components/lasso-tool/lasso-tool.test.tsx

@@ -0,0 +1,700 @@
+import { describe, test, vi, expect, beforeEach } from 'vitest'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { LassoToolsUI } from './lasso-tool'
+import type { LassoToolsComponentProps } from './types'
+import { DEFAULT_LASSO_TOOLS_MODES_MAPPING } from './const'
+import type { LassoToolsModes } from '../types'
+import {
+  changeLassoToolsModeOptions,
+  DEFAULT_LASSO_TOOLS_MODES,
+} from '../../../tests/config'
+
+type LassoToolsMode =
+  'polygon' | 'rectangle' | 'circle' | 'lasso' | 'select' | 'lasso-select'
+
+function FullLassoToolsUI(props: Omit<LassoToolsComponentProps, 'children'>) {
+  return (
+    <LassoToolsUI {...props}>
+      <LassoToolsUI.Action />
+      <LassoToolsUI.OptionsMenu />
+      <LassoToolsUI.UndoRedo />
+      <LassoToolsUI.Chips />
+      <LassoToolsUI.SecondaryActions />
+    </LassoToolsUI>
+  )
+}
+
+describe('LassoToolsUI', () => {
+  const mockOnActionToggle = vi.fn()
+  const mockOnChangeMode = vi.fn()
+  const mockOnChipToggle = vi.fn()
+  const mockOnDelete = vi.fn()
+  const mockOnAllChipToggle = vi.fn()
+  const mockOnAllDelete = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test('should enable drawing', async () => {
+    const { container } = render(
+      <Component
+        enabled={false}
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const polygonButton = within(container).getByLabelText(
+      'Click on the map to draw your spatial filter',
+    )
+    await userEvent.click(polygonButton)
+
+    expect(mockOnActionToggle).toHaveBeenCalledWith(true)
+  })
+
+  for (const [mode, label] of Object.entries(changeLassoToolsModeOptions)) {
+    test(`should change mode to ${label}`, async () => {
+      const { container } = render(
+        <Component
+          enabled
+          modeSelected='polygon'
+          mockOnActionToggle={mockOnActionToggle}
+          mockOnChangeMode={mockOnChangeMode}
+          mockOnChipToggle={mockOnChipToggle}
+          mockOnDelete={mockOnDelete}
+          mockOnAllChipToggle={mockOnAllChipToggle}
+          mockOnAllDelete={mockOnAllDelete}
+        />,
+      )
+
+      const dropdownButton = within(container).getAllByRole('button')[1]!
+      await userEvent.click(dropdownButton)
+
+      const modeButton = screen.getByText(label)
+      await userEvent.click(modeButton)
+
+      expect(mockOnChangeMode).toHaveBeenCalledWith(mode)
+    })
+  }
+
+  test('options trigger has a real accessible name (not a broken aria-labelledby)', () => {
+    const { container } = render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const dropdownButton = within(container).getAllByRole('button')[1]!
+    expect(dropdownButton.getAttribute('aria-label')).toBe(
+      'Choose a drawing tool',
+    )
+  })
+
+  test('menu items are direct children of the menu (no div wrapper breaking arrow-key nav)', async () => {
+    const { container } = render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const dropdownButton = within(container).getAllByRole('button')[1]!
+    await userEvent.click(dropdownButton)
+
+    const menu = screen.getByRole('menu')
+    // Every direct child must be a menu item/divider, not a wrapping <div>
+    // (a MenuItem's own internals, e.g. ListItemIcon, do render nested divs).
+    // MUI's MenuList indexes its DOM children directly for arrow-key
+    // navigation and typeahead — a wrapper here silently breaks both.
+    expect(
+      Array.from(menu.children).some((child) => child.tagName === 'DIV'),
+    ).toBe(false)
+  })
+
+  test('should change polygons visibility when clicking on the chip', async () => {
+    const { container } = render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const chip = within(container).getAllByLabelText('Show drawing')[0]!
+    await userEvent.click(chip)
+
+    expect(mockOnChipToggle).toHaveBeenCalledWith('polygon-id-1', true)
+  })
+
+  test('should remove a polygon when clicking on chip-cancel-icon', async () => {
+    render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const cancelButton = screen.getAllByTestId('CancelIcon')[0]!
+    await userEvent.click(cancelButton)
+
+    expect(mockOnDelete).toHaveBeenCalledWith('polygon-id-1')
+  })
+
+  test('does not render draw geometries as chips', () => {
+    render(
+      <FullLassoToolsUI
+        enabled
+        values={[
+          { id: 'mask-1', label: 'Mask Area', visible: true, type: 'mask' },
+          {
+            id: 'draw-1',
+            label: 'Draw Sketch',
+            visible: true,
+            type: 'draw',
+          },
+          { id: 'legacy-1', label: 'Legacy Mask', visible: true },
+        ]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modeSelected='polygon'
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        onActionToggle={mockOnActionToggle}
+        onChangeMode={mockOnChangeMode}
+        onChipToggle={mockOnChipToggle}
+        onDelete={mockOnDelete}
+        onAllChipToggle={mockOnAllChipToggle}
+        onAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    expect(screen.getByText('Mask Area')).toBeTruthy()
+    expect(screen.getByText('Legacy Mask')).toBeTruthy()
+    expect(screen.queryByText('Draw Sketch')).toBeNull()
+  })
+
+  test('should change polygons visibility when clicking on Show/Hide All', async () => {
+    render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const optionsButton = screen.getByTestId('MoreVertOutlinedIcon')
+    await userEvent.click(optionsButton)
+
+    const showAllButton = await screen.findByRole('menuitem', {
+      name: 'Show all',
+    })
+    await userEvent.click(showAllButton)
+
+    expect(mockOnAllChipToggle).toHaveBeenCalled()
+  })
+
+  test('should remove all polygons when clicking on Delete All', async () => {
+    render(
+      <Component
+        enabled
+        modeSelected='polygon'
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChipToggle={mockOnChipToggle}
+        mockOnDelete={mockOnDelete}
+        mockOnAllChipToggle={mockOnAllChipToggle}
+        mockOnAllDelete={mockOnAllDelete}
+      />,
+    )
+
+    const optionsButton = screen.getByTestId('MoreVertOutlinedIcon')
+    await userEvent.click(optionsButton)
+
+    const deleteAllButton = await screen.findByRole('menuitem', {
+      name: 'Remove all',
+    })
+    await userEvent.click(deleteAllButton)
+
+    expect(mockOnAllDelete).toHaveBeenCalled()
+  })
+})
+
+describe('LassoToolsUI branches', () => {
+  const mockOnChipToggle = vi.fn()
+  const mockOnDelete = vi.fn()
+  const mockOnAllChipToggle = vi.fn()
+  const mockOnAllDelete = vi.fn()
+  const mockOnActionToggle = vi.fn()
+  const mockOnChangeMode = vi.fn()
+  // Required-callback overrides that satisfy the type. Each test below
+  // spreads this to pin down the prop set without breaking strict typing.
+  const requiredCallbacks = {
+    onActionToggle: mockOnActionToggle,
+    onChangeMode: mockOnChangeMode,
+    onAllChipToggle: mockOnAllChipToggle,
+    onAllDelete: mockOnAllDelete,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test('renders empty-state when no values', () => {
+    expect(() =>
+      render(
+        <FullLassoToolsUI
+          enabled
+          values={[]}
+          modes={
+            DEFAULT_LASSO_TOOLS_MODES as Partial<
+              LassoToolsModes<LassoToolsMode>
+            >
+          }
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          modeSelected='polygon'
+          onChipToggle={mockOnChipToggle}
+          onDelete={mockOnDelete}
+          {...requiredCallbacks}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  test('renders with enabled=false (modeSelectedValue=null branch)', () => {
+    expect(() =>
+      render(
+        <FullLassoToolsUI
+          enabled={false}
+          values={[{ id: 'p1', label: 'P1' }]}
+          modes={
+            DEFAULT_LASSO_TOOLS_MODES as Partial<
+              LassoToolsModes<LassoToolsMode>
+            >
+          }
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          modeSelected='polygon'
+          onChipToggle={mockOnChipToggle}
+          onDelete={mockOnDelete}
+          {...requiredCallbacks}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  test('keeps the selection modes enabled with an empty chips list', async () => {
+    // `values` is the chips list (masks only): a draw-only map has none, and
+    // disabling select there would leave its geometries unreachable.
+    const { container } = render(
+      <FullLassoToolsUI
+        enabled
+        values={[]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onChipToggle={mockOnChipToggle}
+        onDelete={mockOnDelete}
+        {...requiredCallbacks}
+      />,
+    )
+
+    await userEvent.click(within(container).getAllByRole('button')[1]!)
+
+    await userEvent.click(screen.getByText('Select features'))
+
+    expect(mockOnChangeMode).toHaveBeenCalledWith('select')
+  })
+
+  test('ignores modesMapping keys with no registered mode', async () => {
+    // Narrowed `modes` with the full mapping: the extra mapping entries have an
+    // icon but no `value`, so they must not reach the menu.
+    const { container } = render(
+      <FullLassoToolsUI
+        enabled
+        values={[]}
+        modes={
+          {
+            polygon: DEFAULT_LASSO_TOOLS_MODES.polygon,
+            rectangle: DEFAULT_LASSO_TOOLS_MODES.rectangle,
+          } as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onChipToggle={mockOnChipToggle}
+        onDelete={mockOnDelete}
+        {...requiredCallbacks}
+      />,
+    )
+
+    await userEvent.click(within(container).getAllByRole('button')[1]!)
+
+    const items = screen.getAllByRole('menuitem')
+    expect(items.map((item) => item.textContent)).toEqual([
+      'Polygon',
+      'Rectangle',
+    ])
+  })
+
+  test('hides the selection section when no selection mode is registered', async () => {
+    // Only drawing tools in `modes`, full mapping: the mapping-only `select` /
+    // `lasso-select` keys must not produce a heading with nothing under it.
+    const { container } = render(
+      <FullLassoToolsUI
+        enabled
+        values={[]}
+        modes={
+          {
+            polygon: DEFAULT_LASSO_TOOLS_MODES.polygon,
+            rectangle: DEFAULT_LASSO_TOOLS_MODES.rectangle,
+          } as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onChipToggle={mockOnChipToggle}
+        onDelete={mockOnDelete}
+        {...requiredCallbacks}
+      />,
+    )
+
+    await userEvent.click(within(container).getAllByRole('button')[1]!)
+
+    expect(screen.queryByText('Selection tools')).toBeNull()
+    expect(
+      screen.getAllByRole('menuitem').map((item) => item.textContent),
+    ).toEqual(['Polygon', 'Rectangle'])
+  })
+
+  test('falls back to first mode when modeSelected is unknown', () => {
+    expect(() =>
+      render(
+        <FullLassoToolsUI
+          enabled
+          values={[]}
+          modes={
+            DEFAULT_LASSO_TOOLS_MODES as Partial<
+              LassoToolsModes<LassoToolsMode>
+            >
+          }
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          modeSelected={'unknown' as never}
+          onChipToggle={mockOnChipToggle}
+          onDelete={mockOnDelete}
+          {...requiredCallbacks}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  test('renders without onActionToggle / onChangeMode (optional callbacks)', () => {
+    expect(() =>
+      render(
+        <FullLassoToolsUI
+          enabled
+          values={[{ id: 'p1', label: 'P1' }]}
+          modes={
+            DEFAULT_LASSO_TOOLS_MODES as Partial<
+              LassoToolsModes<LassoToolsMode>
+            >
+          }
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          modeSelected='polygon'
+          onChipToggle={mockOnChipToggle}
+          onDelete={mockOnDelete}
+          {...requiredCallbacks}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  test('hides SecondaryActions when there is only one value', () => {
+    const { container } = render(
+      <FullLassoToolsUI
+        enabled
+        values={[{ id: 'p1', label: 'Only one' }]}
+        modes={
+          DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+        }
+        modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+        modeSelected='polygon'
+        onChipToggle={mockOnChipToggle}
+        onDelete={mockOnDelete}
+        {...requiredCallbacks}
+      />,
+    )
+    // SecondaryActions slot should not render its menu trigger
+    expect(within(container).queryByLabelText('More')).toBeNull()
+  })
+
+  test('applies custom PaperProps.sx override', () => {
+    expect(() =>
+      render(
+        <FullLassoToolsUI
+          enabled
+          values={[]}
+          modes={
+            DEFAULT_LASSO_TOOLS_MODES as Partial<
+              LassoToolsModes<LassoToolsMode>
+            >
+          }
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          modeSelected='polygon'
+          PaperProps={
+            { sx: { backgroundColor: 'red' }, 'data-x': 'y' } as never
+          }
+          onChipToggle={mockOnChipToggle}
+          onDelete={mockOnDelete}
+          {...requiredCallbacks}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  test('renders with custom labels.action / labels.options overrides', () => {
+    expect(() =>
+      render(
+        <FullLassoToolsUI
+          enabled
+          values={[]}
+          modes={
+            DEFAULT_LASSO_TOOLS_MODES as Partial<
+              LassoToolsModes<LassoToolsMode>
+            >
+          }
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          modeSelected='polygon'
+          labels={
+            {
+              action: { enable: 'On', disable: 'Off' },
+              options: { mode: { title: 'Pick mode' } },
+            } as never
+          }
+          onChipToggle={mockOnChipToggle}
+          onDelete={mockOnDelete}
+          {...requiredCallbacks}
+        />,
+      ),
+    ).not.toThrow()
+  })
+
+  test('renders an action toggle when onActionToggle is provided', () => {
+    const onActionToggle = vi.fn()
+    expect(() =>
+      render(
+        <FullLassoToolsUI
+          enabled={false}
+          values={[]}
+          modes={
+            DEFAULT_LASSO_TOOLS_MODES as Partial<
+              LassoToolsModes<LassoToolsMode>
+            >
+          }
+          modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+          modeSelected='polygon'
+          onChipToggle={mockOnChipToggle}
+          onDelete={mockOnDelete}
+          {...requiredCallbacks}
+          onActionToggle={onActionToggle}
+        />,
+      ),
+    ).not.toThrow()
+  })
+})
+
+// Aux
+interface ComponentProps {
+  enabled: boolean
+  modeSelected: LassoToolsMode
+  mockOnActionToggle: () => void
+  mockOnChangeMode: () => void
+  mockOnChipToggle: () => void
+  mockOnDelete: () => void
+  mockOnAllChipToggle: () => void
+  mockOnAllDelete: () => void
+}
+
+const Component = ({
+  enabled,
+  modeSelected,
+  mockOnActionToggle,
+  mockOnChangeMode,
+  mockOnChipToggle,
+  mockOnDelete,
+  mockOnAllChipToggle,
+  mockOnAllDelete,
+}: ComponentProps) => {
+  return (
+    <FullLassoToolsUI
+      enabled={enabled}
+      values={[
+        {
+          id: 'polygon-id-1',
+          label: 'Polygon 1',
+        },
+        {
+          id: 'polygon-id-2',
+          label: 'Polygon 2',
+        },
+      ]}
+      modes={
+        DEFAULT_LASSO_TOOLS_MODES as Partial<LassoToolsModes<LassoToolsMode>>
+      }
+      modeSelected={modeSelected}
+      modesMapping={DEFAULT_LASSO_TOOLS_MODES_MAPPING}
+      onActionToggle={mockOnActionToggle}
+      onChangeMode={mockOnChangeMode}
+      onChipToggle={mockOnChipToggle}
+      onDelete={mockOnDelete}
+      onAllChipToggle={mockOnAllChipToggle}
+      onAllDelete={mockOnAllDelete}
+    />
+  )
+}
+
+describe('LassoToolsUI composition', () => {
+  const requiredCallbacks = {
+    onActionToggle: vi.fn(),
+    onChangeMode: vi.fn(),
+    onAllChipToggle: vi.fn(),
+    onAllDelete: vi.fn(),
+    onChipToggle: vi.fn(),
+    onDelete: vi.fn(),
+  }
+
+  const args = {
+    enabled: true,
+    values: [{ id: 'a', label: 'A', visible: true }],
+    modes: DEFAULT_LASSO_TOOLS_MODES as Partial<
+      LassoToolsModes<LassoToolsMode>
+    >,
+    modesMapping: DEFAULT_LASSO_TOOLS_MODES_MAPPING,
+    modeSelected: 'polygon' as const,
+    ...requiredCallbacks,
+  }
+
+  test('renders no blocks with empty children', () => {
+    const { container } = render(<LassoToolsUI {...args}>{null}</LassoToolsUI>)
+
+    expect(within(container).queryAllByRole('button')).toHaveLength(0)
+    expect(within(container).queryByText('A')).toBeNull()
+  })
+
+  test('renders all blocks with FullLassoToolsUI', () => {
+    const { container } = render(<FullLassoToolsUI {...args} />)
+
+    expect(
+      within(container).getByLabelText(
+        'Click on the map to draw your spatial filter',
+      ),
+    ).toBeTruthy()
+    expect(within(container).getByText('A')).toBeTruthy()
+    expect(within(container).getAllByRole('button').length).toBeGreaterThan(1)
+  })
+
+  test('interaction-mode options are reachable and usable by keyboard inside the menu', async () => {
+    // Regression: as a RadioGroup, MUI's MenuList skipped the section in
+    // arrow-key navigation and Tab closed the menu — keyboard users could
+    // never switch Mask/Draw.
+    const onChangeInteractionMode = vi.fn()
+    const { container } = render(
+      <FullLassoToolsUI
+        {...args}
+        interactionMode='mask'
+        onChangeInteractionMode={onChangeInteractionMode}
+      />,
+    )
+
+    const dropdownButton = within(container).getAllByRole('button')[1]!
+    await userEvent.click(dropdownButton)
+
+    const menu = screen.getByRole('menu')
+    const drawItem = screen.getByRole('menuitemradio', { name: 'Draw' })
+
+    // Arrow through the menu until focus lands on the Draw option. MUI's
+    // MenuList listens on the <ul>: fire there until focus enters the list,
+    // then on the focused item (bubbles up to the same handler).
+    let steps = 0
+    while (document.activeElement !== drawItem && steps < 20) {
+      const target = menu.contains(document.activeElement)
+        ? document.activeElement!
+        : menu
+      fireEvent.keyDown(target, { key: 'ArrowDown' })
+      steps += 1
+    }
+    expect(document.activeElement).toBe(drawItem)
+
+    // Enter activates it (ButtonBase keyboard behavior) without closing.
+    fireEvent.keyDown(drawItem, { key: 'Enter' })
+    expect(onChangeInteractionMode).toHaveBeenCalledWith('draw')
+    expect(screen.getByRole('menu')).toBeTruthy()
+  })
+
+  test('renders only the listed blocks with children', () => {
+    const { container } = render(
+      <LassoToolsUI {...args}>
+        <LassoToolsUI.Action />
+      </LassoToolsUI>,
+    )
+
+    // The block reads its props from the toolbar's context, so the call site
+    // needs none — and nothing else renders.
+    expect(
+      within(container).getByLabelText(
+        'Click on the map to draw your spatial filter',
+      ),
+    ).toBeTruthy()
+    expect(within(container).getAllByRole('button')).toHaveLength(1)
+    // The chips block wasn't listed, so no chip renders.
+    expect(within(container).queryByText('A')).toBeNull()
+  })
+
+  test('keeps a function sx passed through PaperProps', () => {
+    // Object spread silently dropped these: a function has no own enumerable
+    // properties, and an array would have become numeric keys.
+    const { container } = render(
+      <FullLassoToolsUI
+        {...args}
+        PaperProps={{ sx: () => ({ outlineStyle: 'dashed' }) }}
+      />,
+    )
+
+    const paper = container.querySelector('.MuiPaper-root')!
+    expect(getComputedStyle(paper).outlineStyle).toBe('dashed')
+  })
+})