@carto/ps-react-ui 5.0.0-widgets.8 → 5.0.0

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

@@ -0,0 +1,804 @@
+/**
+ * Tests for LassoGeometryToolbarUI — the shell, its context and the connected
+ * actions: type toggle, rename popover (Enter/blur commit, no-op on
+ * empty/unchanged), lock toggle, delete, and the locked read-only behavior
+ * (every action but unlock disabled).
+ *
+ * Most cases render the full composition the app-level module ships
+ * (`apps/storybook/stories/modules/lasso/geometry-toolbar.tsx`), so they double
+ * as the end-to-end check that the nine connected actions work together — the
+ * coverage that left the library when the default block moved out.
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { cleanup, render, fireEvent, screen } from '@testing-library/react'
+import { LassoGeometryToolbarUI } from './geometry-toolbar'
+
+/** Same gating as the app-level module (`modules/lasso/geometry-toolbar.tsx`). */
+function FullComposition({
+  showStyle = true,
+  showBooleanOps = true,
+  showLock = true,
+  showDelete = true,
+}: {
+  showStyle?: boolean
+  showBooleanOps?: boolean
+  showLock?: boolean
+  showDelete?: boolean
+} = {}) {
+  return (
+    <>
+      <LassoGeometryToolbarUI.Color />
+      <LassoGeometryToolbarUI.Fill />
+      <LassoGeometryToolbarUI.Stroke />
+      {showStyle && <LassoGeometryToolbarUI.Divider />}
+      <LassoGeometryToolbarUI.EditGeometry />
+      <LassoGeometryToolbarUI.Label />
+      <LassoGeometryToolbarUI.EditProperties />
+      <LassoGeometryToolbarUI.Duplicate />
+      {showBooleanOps && <LassoGeometryToolbarUI.Divider />}
+      <LassoGeometryToolbarUI.ToggleType />
+      <LassoGeometryToolbarUI.Union />
+      <LassoGeometryToolbarUI.Split />
+      <LassoGeometryToolbarUI.Subtract />
+      <LassoGeometryToolbarUI.Intersect />
+      {(showLock || showDelete) && <LassoGeometryToolbarUI.Divider />}
+      <LassoGeometryToolbarUI.Lock />
+      {showLock && showDelete && <LassoGeometryToolbarUI.Divider />}
+      <LassoGeometryToolbarUI.Delete />
+    </>
+  )
+}
+
+function setup(
+  props: Partial<Parameters<typeof LassoGeometryToolbarUI>[0]> = {},
+) {
+  const handlers = {
+    onToggleType: vi.fn(),
+    onRename: vi.fn(),
+    onSetTextPresentation: vi.fn(),
+    onToggleLock: vi.fn(),
+    onDelete: vi.fn(),
+  }
+  render(
+    <LassoGeometryToolbarUI
+      type='mask'
+      label='Mask 1'
+      defaultTextColor='black'
+      {...handlers}
+      {...props}
+    >
+      <FullComposition />
+    </LassoGeometryToolbarUI>,
+  )
+  return handlers
+}
+
+describe('LassoGeometryToolbarUI', () => {
+  it('toggles mask -> draw', () => {
+    const { onToggleType } = setup({ type: 'mask' })
+    fireEvent.click(screen.getByRole('button', { name: 'Switch to drawing' }))
+    expect(onToggleType).toHaveBeenCalledWith('draw')
+  })
+
+  it('toggles draw -> mask', () => {
+    const { onToggleType } = setup({ type: 'draw' })
+    fireEvent.click(screen.getByRole('button', { name: 'Switch to mask' }))
+    expect(onToggleType).toHaveBeenCalledWith('mask')
+  })
+
+  it('marks the mask button pressed when type is mask', () => {
+    setup({ type: 'mask' })
+    expect(
+      screen
+        .getByRole('button', { name: 'Switch to drawing' })
+        .getAttribute('aria-pressed'),
+    ).toBe('true')
+  })
+
+  it('marks the mask button not-pressed when type is draw', () => {
+    setup({ type: 'draw' })
+    expect(
+      screen
+        .getByRole('button', { name: 'Switch to mask' })
+        .getAttribute('aria-pressed'),
+    ).toBe('false')
+  })
+
+  it('marks the lock button pressed when locked', () => {
+    setup({ locked: true })
+    expect(
+      screen
+        .getByRole('button', { name: 'Unlock' })
+        .getAttribute('aria-pressed'),
+    ).toBe('true')
+  })
+
+  it('focuses the rename input when the popover opens, once', () => {
+    setup({ label: 'Mask 1' })
+    fireEvent.click(screen.getByRole('button', { name: 'Label' }))
+
+    const input = screen.getByRole('textbox')
+    expect(document.activeElement).toBe(input)
+
+    // Typing must not re-focus: the caret would jump in browsers that treat a
+    // focus() on the active element as a reset.
+    const focus = vi.spyOn(input as HTMLInputElement, 'focus')
+    fireEvent.change(input, { target: { value: 'Downtown' } })
+    expect(focus).not.toHaveBeenCalled()
+  })
+
+  it('commits a new label on Enter', () => {
+    const { onRename } = setup({ label: 'Mask 1' })
+    fireEvent.click(screen.getByRole('button', { name: 'Label' }))
+    const input = screen.getByRole('textbox')
+    fireEvent.change(input, { target: { value: 'Downtown' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onRename).toHaveBeenCalledWith('Downtown')
+  })
+
+  it('does not call onRename when the label is unchanged', () => {
+    const { onRename } = setup({ label: 'Mask 1' })
+    fireEvent.click(screen.getByRole('button', { name: 'Label' }))
+    const input = screen.getByRole('textbox')
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onRename).not.toHaveBeenCalled()
+  })
+
+  it('commits the rename only once (blur after Enter does not double-fire)', () => {
+    const { onRename } = setup({ label: 'Mask 1' })
+    fireEvent.click(screen.getByRole('button', { name: 'Label' }))
+    const input = screen.getByRole('textbox')
+    fireEvent.change(input, { target: { value: 'Downtown' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    fireEvent.blur(input)
+    expect(onRename).toHaveBeenCalledTimes(1)
+  })
+
+  it('discards the rename on Escape (does not call onRename)', () => {
+    const { onRename } = setup({ label: 'Mask 1' })
+    fireEvent.click(screen.getByRole('button', { name: 'Label' }))
+    const input = screen.getByRole('textbox')
+    fireEvent.change(input, { target: { value: 'Downtown' } })
+    fireEvent.keyDown(input, { key: 'Escape' })
+    fireEvent.blur(input)
+    expect(onRename).not.toHaveBeenCalled()
+  })
+
+  it('applies Show on map live via onSetTextPresentation', () => {
+    const { onSetTextPresentation } = setup({ label: 'Mask 1' })
+    fireEvent.click(screen.getByRole('button', { name: 'Label' }))
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Show on map' }))
+    expect(onSetTextPresentation).toHaveBeenCalledWith({ textVisible: true })
+  })
+
+  it('hides Show on map when forceTextVisible is set', () => {
+    setup({
+      label: 'Text',
+      forceTextVisible: true,
+      properties: { textVisible: true },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Label' }))
+    expect(screen.queryByRole('checkbox', { name: 'Show on map' })).toBeNull()
+    expect(
+      screen.getByRole('button', { name: 'Bold' }).hasAttribute('disabled'),
+    ).toBe(false)
+  })
+
+  it('disables Color/Bold/Italic while Show on map is off', () => {
+    setup({ label: 'Mask 1', properties: { textVisible: false } })
+    fireEvent.click(screen.getByRole('button', { name: 'Label' }))
+    expect(
+      screen.getByRole('button', { name: 'Color' }).hasAttribute('disabled'),
+    ).toBe(true)
+    expect(
+      screen.getByRole('button', { name: 'Bold' }).hasAttribute('disabled'),
+    ).toBe(true)
+    expect(
+      screen.getByRole('button', { name: 'Italic' }).hasAttribute('disabled'),
+    ).toBe(true)
+  })
+
+  it('toggles bold live when Show on map is on', () => {
+    const { onSetTextPresentation } = setup({
+      label: 'Mask 1',
+      properties: { textVisible: true },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'Label' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Bold' }))
+    expect(onSetTextPresentation).toHaveBeenCalledWith({ textBold: true })
+  })
+
+  it('locks an unlocked geometry', () => {
+    const { onToggleLock } = setup({ locked: false })
+    fireEvent.click(screen.getByRole('button', { name: 'Lock' }))
+    expect(onToggleLock).toHaveBeenCalledWith(true)
+  })
+
+  it('unlocks a locked geometry', () => {
+    const { onToggleLock } = setup({ locked: true })
+    fireEvent.click(screen.getByRole('button', { name: 'Unlock' }))
+    expect(onToggleLock).toHaveBeenCalledWith(false)
+  })
+
+  it('deletes the geometry', () => {
+    const { onDelete } = setup()
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
+    expect(onDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows the style pickers for draw geometries with a style handler', () => {
+    const onSetStyle = vi.fn()
+    setup({
+      type: 'draw',
+      style: { color: 'yellow', fill: 'none', stroke: 'default' },
+      onSetStyle,
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Color' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Pink' }))
+    expect(onSetStyle).toHaveBeenCalledWith({ color: 'pink' })
+
+    expect(screen.getByRole('button', { name: 'Fill' })).toBeDefined()
+    expect(screen.getByRole('button', { name: 'Stroke' })).toBeDefined()
+  })
+
+  it('hides the style pickers for mask geometries', () => {
+    setup({
+      type: 'mask',
+      style: { color: 'yellow', fill: 'none', stroke: 'default' },
+      onSetStyle: vi.fn(),
+    })
+
+    expect(screen.queryByRole('button', { name: 'Color' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Fill' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Stroke' })).toBeNull()
+  })
+
+  it('hides the style pickers when no onSetStyle handler is given', () => {
+    setup({
+      type: 'draw',
+      style: { color: 'yellow', fill: 'none', stroke: 'default' },
+    })
+
+    expect(screen.queryByRole('button', { name: 'Color' })).toBeNull()
+  })
+
+  it('shows the Edit geometry action when a handler is provided', () => {
+    const onEditGeometry = vi.fn()
+    setup({ onEditGeometry })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Edit geometry' }))
+    expect(onEditGeometry).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides the Edit geometry action without a handler', () => {
+    setup()
+    expect(screen.queryByRole('button', { name: 'Edit geometry' })).toBeNull()
+  })
+
+  it('disables the Edit geometry action when locked', () => {
+    setup({ onEditGeometry: vi.fn(), locked: true })
+    expect(
+      screen
+        .getByRole('button', { name: 'Edit geometry' })
+        .hasAttribute('disabled'),
+    ).toBe(true)
+  })
+
+  it('enables the merge action only with 2+ selected and none locked', () => {
+    const onUnion = vi.fn()
+    const { unmount } = render(
+      <LassoGeometryToolbarUI
+        type='mask'
+        label='Mask 1'
+        selectionCount={1}
+        onToggleType={vi.fn()}
+        onRename={vi.fn()}
+        onSetTextPresentation={vi.fn()}
+        onToggleLock={vi.fn()}
+        onDelete={vi.fn()}
+        onUnion={onUnion}
+      >
+        <FullComposition />
+      </LassoGeometryToolbarUI>,
+    )
+    expect(
+      screen
+        .getByRole('button', { name: 'Merge geometries' })
+        .hasAttribute('disabled'),
+    ).toBe(true)
+    unmount()
+
+    setup({ selectionCount: 2, onUnion })
+    fireEvent.click(screen.getByRole('button', { name: 'Merge geometries' }))
+    expect(onUnion).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides the merge action without a handler', () => {
+    setup({ selectionCount: 3 })
+    expect(
+      screen.queryByRole('button', { name: 'Merge geometries' }),
+    ).toBeNull()
+  })
+
+  it('enables the split action only when splittable', () => {
+    const onSplit = vi.fn()
+    const { unmount } = render(
+      <LassoGeometryToolbarUI type='mask' label='Mask 1' onSplit={onSplit}>
+        <FullComposition />
+      </LassoGeometryToolbarUI>,
+    )
+    // A plain Polygon selection is not splittable.
+    expect(
+      screen
+        .getByRole('button', { name: 'Split geometry' })
+        .hasAttribute('disabled'),
+    ).toBe(true)
+    unmount()
+
+    setup({ splittable: true, onSplit })
+    fireEvent.click(screen.getByRole('button', { name: 'Split geometry' }))
+    expect(onSplit).toHaveBeenCalledTimes(1)
+  })
+
+  it('enables subtract and intersect only with 2+ selected', () => {
+    const onSubtract = vi.fn()
+    const onIntersect = vi.fn()
+    const { unmount } = render(
+      <LassoGeometryToolbarUI
+        type='mask'
+        label='Mask 1'
+        selectionCount={1}
+        onSubtract={onSubtract}
+        onIntersect={onIntersect}
+      >
+        <FullComposition />
+      </LassoGeometryToolbarUI>,
+    )
+    const disabled = (name: string) =>
+      screen.getByRole('button', { name }).hasAttribute('disabled')
+    expect(disabled('Subtract geometries')).toBe(true)
+    expect(disabled('Intersect geometries')).toBe(true)
+    unmount()
+
+    setup({ selectionCount: 2, onSubtract, onIntersect })
+    fireEvent.click(screen.getByRole('button', { name: 'Subtract geometries' }))
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Intersect geometries' }),
+    )
+    expect(onSubtract).toHaveBeenCalledTimes(1)
+    expect(onIntersect).toHaveBeenCalledTimes(1)
+  })
+
+  it('duplicate works on a single selection but not while locked', () => {
+    const onDuplicate = vi.fn()
+    setup({ onDuplicate })
+    fireEvent.click(screen.getByRole('button', { name: 'Duplicate' }))
+    expect(onDuplicate).toHaveBeenCalledTimes(1)
+
+    cleanup()
+    setup({ locked: true, onDuplicate })
+    expect(
+      screen
+        .getByRole('button', { name: 'Duplicate' })
+        .hasAttribute('disabled'),
+    ).toBe(true)
+  })
+
+  it('hides the geometry-operation actions without handlers', () => {
+    setup({ selectionCount: 2, splittable: true })
+    expect(screen.queryByRole('button', { name: 'Split geometry' })).toBeNull()
+    expect(
+      screen.queryByRole('button', { name: 'Subtract geometries' }),
+    ).toBeNull()
+    expect(
+      screen.queryByRole('button', { name: 'Intersect geometries' }),
+    ).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Duplicate' })).toBeNull()
+  })
+
+  it('disables the single-target actions on a multi-selection', () => {
+    setup({ selectionCount: 3, onEditGeometry: vi.fn() })
+
+    const disabled = (name: string) =>
+      screen.getByRole('button', { name }).hasAttribute('disabled')
+    expect(disabled('Label')).toBe(true)
+    expect(disabled('Edit geometry')).toBe(true)
+    // Batch actions stay available.
+    expect(disabled('Switch to drawing')).toBe(false)
+    expect(disabled('Delete')).toBe(false)
+  })
+
+  it('disables batch actions when anyLocked, keeping the lock toggle usable', () => {
+    const onToggleLock = vi.fn()
+    setup({ selectionCount: 2, anyLocked: true, locked: false, onToggleLock })
+
+    expect(
+      screen
+        .getByRole('button', { name: 'Switch to drawing' })
+        .hasAttribute('disabled'),
+    ).toBe(true)
+    expect(
+      screen.getByRole('button', { name: 'Delete' }).hasAttribute('disabled'),
+    ).toBe(true)
+
+    // Partially locked selection: the lock button locks the whole selection.
+    const lock = screen.getByRole('button', { name: 'Lock' })
+    expect(lock.hasAttribute('disabled')).toBe(false)
+    fireEvent.click(lock)
+    expect(onToggleLock).toHaveBeenCalledWith(true)
+  })
+
+  it('disables every action but unlock when locked', () => {
+    const handlers = setup({ locked: true })
+    const disabled = (name: string) =>
+      screen.getByRole('button', { name }).hasAttribute('disabled')
+    expect(disabled('Switch to drawing')).toBe(true)
+    expect(disabled('Label')).toBe(true)
+    expect(disabled('Delete')).toBe(true)
+    // Unlock stays enabled.
+    const unlock = screen.getByRole('button', { name: 'Unlock' })
+    expect(unlock.hasAttribute('disabled')).toBe(false)
+    fireEvent.click(unlock)
+    expect(handlers.onToggleLock).toHaveBeenCalledWith(false)
+  })
+
+  describe('composition', () => {
+    it('renders only the listed actions, in the given order', () => {
+      render(
+        <LassoGeometryToolbarUI
+          type='mask'
+          label='Mask 1'
+          onToggleType={vi.fn()}
+          onRename={vi.fn()}
+          onSetTextPresentation={vi.fn()}
+          onToggleLock={vi.fn()}
+          onDelete={vi.fn()}
+        >
+          <LassoGeometryToolbarUI.Delete />
+          <LassoGeometryToolbarUI.Divider />
+          <LassoGeometryToolbarUI.Label />
+        </LassoGeometryToolbarUI>,
+      )
+
+      expect(
+        screen.getAllByRole('button').map((b) => b.getAttribute('aria-label')),
+      ).toEqual(['Delete', 'Label'])
+      // Wired but not listed: nothing renders.
+      expect(
+        screen.queryByRole('button', { name: 'Switch to drawing' }),
+      ).toBeNull()
+      expect(screen.queryByRole('button', { name: 'Lock' })).toBeNull()
+    })
+
+    it("disables the stroke picker's None while the fill is none (and vice versa)", () => {
+      // Both at `none` would leave the feature invisible — the store refuses
+      // it; the pickers gray the option out upfront.
+      render(
+        <LassoGeometryToolbarUI
+          type='draw'
+          label='Drawing 1'
+          style={{ color: 'yellow', fill: 'none', stroke: 'default' }}
+          onSetStyle={vi.fn()}
+        >
+          <FullComposition />
+        </LassoGeometryToolbarUI>,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Stroke' }))
+      expect(
+        screen
+          .getByRole('menuitem', { name: 'None' })
+          .getAttribute('aria-disabled'),
+      ).toBe('true')
+
+      cleanup()
+
+      render(
+        <LassoGeometryToolbarUI
+          type='draw'
+          label='Drawing 1'
+          style={{ color: 'yellow', fill: 'filled', stroke: 'none' }}
+          onSetStyle={vi.fn()}
+        >
+          <FullComposition />
+        </LassoGeometryToolbarUI>,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Fill' }))
+      expect(
+        screen
+          .getByRole('menuitem', { name: 'None' })
+          .getAttribute('aria-disabled'),
+      ).toBe('true')
+      // Only None is affected; the rest of the picker stays usable.
+      expect(
+        screen
+          .getByRole('menuitem', { name: 'Opacity' })
+          .getAttribute('aria-disabled'),
+      ).toBeNull()
+    })
+
+    it('lets an explicit prop override the context', () => {
+      render(
+        <LassoGeometryToolbarUI type='mask' label='Mask 1' onDelete={vi.fn()}>
+          <LassoGeometryToolbarUI.Delete disabled label='Nope' />
+        </LassoGeometryToolbarUI>,
+      )
+
+      const button = screen.getByRole('button', { name: 'Nope' })
+      expect(button.hasAttribute('disabled')).toBe(true)
+    })
+
+    it('merges a partial option-label override with the context, keeping the rest', () => {
+      render(
+        <LassoGeometryToolbarUI
+          type='draw'
+          label='Drawing 1'
+          style={{ color: 'yellow', fill: 'none', stroke: 'default' }}
+          onSetStyle={vi.fn()}
+          labels={{ color: { options: { green: 'Verde', pink: 'Rosa' } } }}
+        >
+          <LassoGeometryToolbarUI.Color
+            labels={{ options: { green: 'Vert' } }}
+          />
+        </LassoGeometryToolbarUI>,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Color' }))
+      // Overridden at the call site.
+      expect(screen.getByRole('menuitem', { name: 'Vert' })).toBeDefined()
+      // Untouched by the override: still the context's translation, not the
+      // English default nor dropped entirely.
+      expect(screen.getByRole('menuitem', { name: 'Rosa' })).toBeDefined()
+    })
+
+    it('throws when an action renders outside the toolbar', () => {
+      // The alternative is a button that silently does nothing.
+      expect(() => render(<LassoGeometryToolbarUI.Delete />)).toThrow(
+        /must render inside <LassoGeometryToolbarUI>/,
+      )
+    })
+  })
+
+  describe('Edit properties', () => {
+    function openEditProperties(
+      props: Partial<Parameters<typeof LassoGeometryToolbarUI>[0]> = {},
+    ) {
+      const handlers = {
+        onEditProperties: vi.fn(),
+      }
+      render(
+        <LassoGeometryToolbarUI
+          type='mask'
+          label='Mask 1'
+          properties={{ city: 'NYC' }}
+          {...handlers}
+          {...props}
+        >
+          <FullComposition />
+        </LassoGeometryToolbarUI>,
+      )
+      fireEvent.click(screen.getByRole('button', { name: 'Edit properties' }))
+      return handlers
+    }
+
+    it('hides the action without a handler', () => {
+      render(
+        <LassoGeometryToolbarUI type='mask' label='Mask 1' properties={{}}>
+          <FullComposition />
+        </LassoGeometryToolbarUI>,
+      )
+      expect(
+        screen.queryByRole('button', { name: 'Edit properties' }),
+      ).toBeNull()
+    })
+
+    it('shows freeform properties only (no locked text row)', () => {
+      openEditProperties({ properties: { city: 'NYC', notes: 'x' } })
+      const textboxes = screen.getAllByRole('textbox')
+      const values = textboxes.map((el) => (el as HTMLInputElement).value)
+      expect(values).toEqual(['city', 'NYC', 'notes', 'x'])
+      expect((textboxes[0] as HTMLInputElement).disabled).toBe(false)
+    })
+
+    it('filters system keys out of full properties before showing the KV editor', () => {
+      openEditProperties({
+        properties: {
+          label: 'Mask 1',
+          textVisible: true,
+          textColor: 'pink',
+          city: 'NYC',
+        },
+      })
+      const values = screen
+        .getAllByRole('textbox')
+        .map((el) => (el as HTMLInputElement).value)
+      expect(values).toEqual(['city', 'NYC'])
+    })
+
+    it('autofocuses the first key on open', () => {
+      openEditProperties()
+      expect(document.activeElement).toBe(screen.getAllByRole('textbox')[0])
+    })
+
+    it('commits the draft on outside click when valid', () => {
+      const { onEditProperties } = openEditProperties()
+      const textboxes = screen.getAllByRole('textbox')
+      fireEvent.change(textboxes[1]!, { target: { value: 'LA' } })
+      fireEvent.click(document.querySelector('.MuiBackdrop-root')!)
+      expect(onEditProperties).toHaveBeenCalledWith({
+        city: 'LA',
+      })
+      expect(screen.queryByRole('textbox')).toBeNull()
+    })
+
+    it('keeps the popover open with an error when the outside-click draft is invalid', () => {
+      const { onEditProperties } = openEditProperties()
+      fireEvent.change(screen.getAllByRole('textbox')[0]!, {
+        target: { value: '' },
+      })
+      fireEvent.click(document.querySelector('.MuiBackdrop-root')!)
+      expect(onEditProperties).not.toHaveBeenCalled()
+      expect(screen.getByText('Key is required')).toBeDefined()
+      expect(screen.getAllByRole('textbox').length).toBeGreaterThan(0)
+    })
+
+    it('discards on Escape regardless of validity', () => {
+      const { onEditProperties } = openEditProperties()
+      const cityKey = screen.getAllByRole('textbox')[0]!
+      fireEvent.change(cityKey, { target: { value: '' } })
+      fireEvent.keyDown(cityKey, { key: 'Escape' })
+      expect(onEditProperties).not.toHaveBeenCalled()
+      expect(screen.queryByRole('textbox')).toBeNull()
+    })
+
+    it('adds a row on "Add property" and focuses its key input', () => {
+      openEditProperties({ properties: { city: 'NYC' } })
+      fireEvent.click(screen.getByRole('button', { name: 'Add property' }))
+      const textboxes = screen.getAllByRole('textbox')
+      expect(textboxes).toHaveLength(4)
+      expect(document.activeElement).toBe(textboxes[2])
+    })
+
+    it('Enter in a key field focuses its value field', () => {
+      openEditProperties()
+      const textboxes = screen.getAllByRole('textbox')
+      fireEvent.keyDown(textboxes[0]!, { key: 'Enter' })
+      expect(document.activeElement).toBe(textboxes[1])
+    })
+
+    it('Enter in the last row value adds a new row when valid', () => {
+      openEditProperties()
+      fireEvent.keyDown(screen.getAllByRole('textbox')[1]!, { key: 'Enter' })
+      expect(screen.getAllByRole('textbox')).toHaveLength(4)
+    })
+
+    it('Enter in a value field that is not last focuses the next row key', () => {
+      openEditProperties({
+        properties: { city: 'NYC', country: 'US' },
+      })
+      const textboxes = screen.getAllByRole('textbox')
+      fireEvent.keyDown(textboxes[1]!, { key: 'Enter' }) // city value -> country key
+      expect(document.activeElement).toBe(textboxes[2])
+    })
+
+    it('removes a custom row entirely on its ×', () => {
+      openEditProperties({ properties: { city: 'NYC', notes: 'x' } })
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Remove property: city' }),
+      )
+      expect(screen.getAllByRole('textbox')).toHaveLength(2)
+    })
+
+    it('removes a freeform text key on its × like any other property', () => {
+      openEditProperties({ properties: { text: 'Downtown' } })
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Remove property: text' }),
+      )
+      expect(screen.queryAllByRole('textbox')).toHaveLength(0)
+    })
+
+    it('blocks a reserved system key', () => {
+      openEditProperties({ properties: { city: 'NYC' } })
+      fireEvent.click(screen.getByRole('button', { name: 'Add property' }))
+      fireEvent.change(screen.getAllByRole('textbox')[2]!, {
+        target: { value: 'textVisible' },
+      })
+      expect(screen.getByText('Reserved key')).toBeDefined()
+    })
+
+    it('discards when the selection changes while open, never committing', () => {
+      const onEditProperties = vi.fn()
+      const { rerender } = render(
+        <LassoGeometryToolbarUI
+          type='mask'
+          label='Mask 1'
+          properties={{ city: 'NYC' }}
+          selectedIds={['a']}
+          onEditProperties={onEditProperties}
+        >
+          <FullComposition />
+        </LassoGeometryToolbarUI>,
+      )
+      fireEvent.click(screen.getByRole('button', { name: 'Edit properties' }))
+      expect(screen.getAllByRole('textbox').length).toBeGreaterThan(0)
+
+      rerender(
+        <LassoGeometryToolbarUI
+          type='mask'
+          label='Mask 2'
+          properties={{ city: 'LA' }}
+          selectedIds={['b']}
+          onEditProperties={onEditProperties}
+        >
+          <FullComposition />
+        </LassoGeometryToolbarUI>,
+      )
+
+      expect(onEditProperties).not.toHaveBeenCalled()
+      expect(screen.queryByRole('textbox')).toBeNull()
+    })
+  })
+
+  describe('Label / Edit properties mutual exclusion', () => {
+    function setupBoth(
+      props: Partial<Parameters<typeof LassoGeometryToolbarUI>[0]> = {},
+    ) {
+      const handlers = {
+        onRename: vi.fn(),
+        onSetTextPresentation: vi.fn(),
+        onEditProperties: vi.fn(),
+      }
+      render(
+        <LassoGeometryToolbarUI
+          type='mask'
+          label='Mask 1'
+          defaultTextColor='black'
+          properties={{ city: 'NYC' }}
+          {...handlers}
+          {...props}
+        >
+          <FullComposition />
+        </LassoGeometryToolbarUI>,
+      )
+      return handlers
+    }
+
+    it('opening Edit properties commits and closes an open Label popover', () => {
+      const { onRename } = setupBoth()
+      fireEvent.click(screen.getByRole('button', { name: 'Label' }))
+      fireEvent.change(screen.getByRole('textbox', { name: 'Name' }), {
+        target: { value: 'Downtown Core' },
+      })
+
+      // The open Label popover's Modal `aria-hides` every sibling — including
+      // the rest of the toolbar — so the Edit properties button must be
+      // queried with `hidden: true` to still click it.
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Edit properties', hidden: true }),
+      )
+
+      expect(onRename).toHaveBeenCalledWith('Downtown Core')
+      expect(screen.queryByRole('textbox', { name: 'Name' })).toBeNull()
+    })
+
+    it('opening Label discards an open Edit properties popover, even with an invalid draft', () => {
+      const { onEditProperties } = setupBoth({
+        properties: { city: 'NYC' },
+      })
+      fireEvent.click(screen.getByRole('button', { name: 'Edit properties' }))
+      fireEvent.change(screen.getAllByRole('textbox')[0]!, {
+        target: { value: '' },
+      })
+
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Label', hidden: true }),
+      )
+
+      expect(onEditProperties).not.toHaveBeenCalled()
+      // Name field (+ checkbox etc.); Edit properties' rows are gone.
+      expect(screen.getByRole('textbox', { name: 'Name' })).toBeDefined()
+    })
+  })
+})