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

package/src/legend/stores/legend-store.test.ts

@@ -0,0 +1,701 @@
+import { createElement } from 'react'
+import { afterEach, describe, expect, it } from 'vitest'
+import {
+  createLegendStore,
+  clearAllLegendStores,
+} from './legend-store-registry'
+import {
+  selectAllGroupsCollapsed,
+  selectGroupVisibility,
+  selectLayersByGroup,
+  selectOrderedGroups,
+  selectVisibleLayersGrouped,
+} from './selectors'
+import type { LegendLayerInput, LegendVariable } from './types'
+
+const cat: LegendVariable = {
+  type: 'category',
+  items: [{ label: 'A', color: '#000' }],
+}
+
+const layers: LegendLayerInput[] = [
+  { id: 'a', name: 'A', variables: [cat] },
+  { id: 'b', name: 'B', variables: [cat] },
+  { id: 'c', name: 'C', variables: [cat], groupId: 'g1' },
+  { id: 'd', name: 'D', variables: [cat], groupId: 'g1' },
+]
+
+afterEach(() => clearAllLegendStores())
+
+describe('legend store', () => {
+  it('seeds interactive defaults (visible/opacity/collapsed/order)', () => {
+    const store = createLegendStore('s', { layers })
+    const a = store.getState().layers.a!
+    expect(a.visible).toBe(true)
+    expect(a.opacity).toBe(1)
+    expect(a.collapsed).toBe(false)
+    expect(a.order).toBe(0)
+    expect(store.getState().layers.b!.order).toBe(1)
+  })
+
+  it('setVisibility / setCollapsed / setSectionValue mutate the layer', () => {
+    const store = createLegendStore('s', {
+      layers: [
+        {
+          id: 'a',
+          name: 'A',
+          variables: [cat],
+          sections: [{ id: 's1', options: ['x', 'pop'], active: 'x' }],
+        },
+      ],
+    })
+    const s = store.getState()
+    s.setVisibility('a', false)
+    s.setCollapsed('a', true)
+    s.setSectionValue('a', 's1', 'pop')
+    const a = store.getState().layers.a!
+    expect(a.visible).toBe(false)
+    expect(a.collapsed).toBe(true)
+    expect(a.sections![0]!.active).toBe('pop')
+  })
+
+  it('setSectionValue validates the section and option', () => {
+    const sections = [
+      { id: 's1', title: 'Global', options: ['x', 'y'], active: 'x' },
+      { id: 's2', title: 'Vars', options: ['m', 'n'], active: 'm' },
+    ]
+    const store = createLegendStore('s', {
+      layers: [{ id: 'a', name: 'A', variables: [cat], sections }],
+    })
+    const before = store.getState().layers
+
+    store.getState().setSectionValue('a', 'nope', 'y') // unknown section
+    store.getState().setSectionValue('a', 's1', 'zzz') // option not offered
+    store.getState().setSectionValue('zz', 's1', 'y') // unknown layer
+    expect(store.getState().layers).toBe(before) // all no-ops
+
+    // Sections keep independent actives.
+    store.getState().setSectionValue('a', 's2', 'n')
+    const after = store.getState().layers.a!.sections!
+    expect(after[0]!.active).toBe('x')
+    expect(after[1]!.active).toBe('n')
+  })
+
+  it('_sync preserves user-picked section actives (structure follows props)', () => {
+    const sections = [
+      { id: 's1', options: ['x', 'y'], active: 'x' },
+      { id: 's2', options: ['m', 'n'], active: 'm' },
+    ]
+    const input = [{ id: 'a', name: 'A', variables: [cat], sections }]
+    const store = createLegendStore('s', { layers: input })
+    store.getState().setSectionValue('a', 's1', 'y')
+
+    // Re-sync with a NEW sections reference (renamed layer): the user's pick
+    // survives because s1 still exists and 'y' is still offered.
+    store.getState()._sync(
+      [
+        {
+          id: 'a',
+          name: 'A renamed',
+          variables: [cat],
+          sections: sections.map((x) => ({ ...x })),
+        },
+      ],
+      [],
+    )
+    let after = store.getState().layers.a!
+    expect(after.name).toBe('A renamed')
+    expect(after.sections![0]!.active).toBe('y')
+
+    // If the pick is no longer among the options, the incoming active wins.
+    store.getState()._sync(
+      [
+        {
+          id: 'a',
+          name: 'A',
+          variables: [cat],
+          sections: [{ id: 's1', options: ['x', 'z'], active: 'z' }],
+        },
+      ],
+      [],
+    )
+    after = store.getState().layers.a!
+    expect(after.sections![0]!.active).toBe('z')
+  })
+
+  it('setOpacity clamps to 0–1', () => {
+    const store = createLegendStore('s', { layers })
+    store.getState().setOpacity('a', 5)
+    expect(store.getState().layers.a!.opacity).toBe(1)
+    store.getState().setOpacity('a', -2)
+    expect(store.getState().layers.a!.opacity).toBe(0)
+  })
+
+  it('group setters cascade visibility/collapse to members', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [
+        { id: 'g1', label: 'One' },
+        { id: 'g2', label: 'Two' },
+      ],
+    })
+    // Group visibility cascades to the member layers (c, d).
+    store.getState().setGroupVisibility('g1', false)
+    store.getState().setGroupCollapsed('g1', true)
+    expect(store.getState().layers.c!.visible).toBe(false)
+    expect(store.getState().layers.d!.visible).toBe(false)
+    expect(selectGroupVisibility(store.getState(), 'g1')).toBe('hidden')
+    expect(store.getState().groups.g1!.collapsed).toBe(true)
+  })
+
+  it('a group with no visible member starts collapsed', () => {
+    const store = createLegendStore('s', {
+      layers: layers.map((l) =>
+        l.groupId === 'g1' ? { ...l, visible: false } : l,
+      ),
+      groups: [
+        { id: 'g1', label: 'One' },
+        { id: 'g2', label: 'Empty' },
+      ],
+    })
+    expect(store.getState().groups.g1!.collapsed).toBe(true)
+    // No members at all also counts as "nothing enabled".
+    expect(store.getState().groups.g2!.collapsed).toBe(true)
+  })
+
+  it('a group with at least one visible member starts expanded', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [{ id: 'g1', label: 'One' }],
+    })
+    expect(store.getState().groups.g1!.collapsed).toBe(false)
+  })
+
+  it('selectGroupVisibility derives the tri-state from member layers', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [{ id: 'g1', label: 'One' }],
+    })
+    expect(selectGroupVisibility(store.getState(), 'g1')).toBe('visible')
+    store.getState().setVisibility('c', false)
+    expect(selectGroupVisibility(store.getState(), 'g1')).toBe('mixed')
+    store.getState().setVisibility('d', false)
+    expect(selectGroupVisibility(store.getState(), 'g1')).toBe('hidden')
+    // Empty / unknown groups read as visible.
+    expect(selectGroupVisibility(store.getState(), 'nope')).toBe('visible')
+  })
+
+  it('hiding a layer individually never collapses its group', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [{ id: 'g1', label: 'One' }],
+    })
+    store.getState().setVisibility('c', false)
+    store.getState().setVisibility('d', false) // group now derived-hidden
+    expect(store.getState().groups.g1!.collapsed).toBe(false)
+  })
+
+  it('group cascade preserves each member layer collapse snapshot', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [{ id: 'g1', label: 'One' }],
+    })
+    store.getState().setCollapsed('c', true) // manual collapse on one member
+    store.getState().setGroupVisibility('g1', false)
+    store.getState().setGroupVisibility('g1', true)
+    expect(store.getState().layers.c!.collapsed).toBe(true) // persisted
+    expect(store.getState().layers.d!.collapsed).toBe(false) // restored default
+  })
+
+  it('hiding a mixed group leaves already-hidden members untouched', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [{ id: 'g1', label: 'One' }],
+    })
+    store.getState().setVisibility('c', false) // c hidden, snapshot: expanded
+    store.getState().setGroupVisibility('g1', false) // hides d only
+    store.getState().setGroupVisibility('g1', true) // shows both
+    expect(store.getState().layers.c!.visible).toBe(true)
+    expect(store.getState().layers.c!.collapsed).toBe(false) // own snapshot
+    expect(store.getState().layers.d!.visible).toBe(true)
+  })
+
+  it('setGroupVisibility no-ops at the target state and on empty groups', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [
+        { id: 'g1', label: 'One' },
+        { id: 'empty', label: 'Empty' },
+      ],
+    })
+    const before = store.getState()
+    store.getState().setGroupVisibility('g1', true) // already all visible
+    store.getState().setGroupVisibility('empty', false) // no members
+    expect(store.getState().layers).toBe(before.layers)
+    expect(store.getState().groups).toBe(before.groups)
+
+    store.getState().setGroupVisibility('g1', false)
+    const hidden = store.getState()
+    store.getState().setGroupVisibility('g1', false) // double-hide
+    expect(store.getState().layers).toBe(hidden.layers)
+  })
+
+  it('_sync preserves interactive state of known layers and drops vanished ones', () => {
+    const store = createLegendStore('s', { layers })
+    store.getState().setVisibility('a', false)
+    store.getState().setOpacity('a', 0.3)
+
+    // Re-sync with updated name for "a" and without "b".
+    store.getState()._sync(
+      [
+        { id: 'a', name: 'A renamed', variables: [cat] },
+        { id: 'c', name: 'C', variables: [cat], groupId: 'g1' },
+      ],
+      [],
+    )
+
+    const a = store.getState().layers.a!
+    expect(a.name).toBe('A renamed') // static field follows props
+    expect(a.visible).toBe(false) // interactive state preserved
+    expect(a.opacity).toBe(0.3)
+    expect(store.getState().layers.b).toBeUndefined() // vanished layer dropped
+  })
+
+  it('normalizes duplicate sibling orders to dense indexes', () => {
+    const store = createLegendStore('s', {
+      layers: [
+        { id: 'x', name: 'X', variables: [cat], order: 5 },
+        { id: 'y', name: 'Y', variables: [cat], order: 5 },
+        { id: 'z', name: 'Z', variables: [cat], order: 6 },
+      ],
+    })
+    // Ties broken by input position → dense 0,1,2.
+    expect(store.getState().layers.x!.order).toBe(0)
+    expect(store.getState().layers.y!.order).toBe(1)
+    expect(store.getState().layers.z!.order).toBe(2)
+    expect(
+      selectLayersByGroup(store.getState(), undefined).map((l) => l.id),
+    ).toEqual(['x', 'y', 'z'])
+  })
+
+  it('_sync with identical input is a no-op preserving object identity', () => {
+    const store = createLegendStore('s', { layers })
+    const before = store.getState()
+
+    store.getState()._sync(layers, [])
+
+    const after = store.getState()
+    expect(after.layers).toBe(before.layers) // record identity kept
+    expect(after.layers.a).toBe(before.layers.a) // entity identity kept
+  })
+
+  it('visibility drives collapse: hide → collapsed, show → expanded', () => {
+    const store = createLegendStore('s', { layers })
+    store.getState().setVisibility('a', false)
+    expect(store.getState().layers.a!.collapsed).toBe(true)
+    store.getState().setVisibility('a', true)
+    expect(store.getState().layers.a!.collapsed).toBe(false)
+  })
+
+  it('manual collapse persists across hide/show', () => {
+    const store = createLegendStore('s', { layers })
+    store.getState().setCollapsed('a', true) // manual collapse
+    store.getState().setVisibility('a', false)
+    expect(store.getState().layers.a!.collapsed).toBe(true)
+    store.getState().setVisibility('a', true)
+    expect(store.getState().layers.a!.collapsed).toBe(true) // persisted
+  })
+
+  it('manual expand persists: hide collapses, show restores expanded', () => {
+    const store = createLegendStore('s', { layers })
+    store.getState().setCollapsed('a', true)
+    store.getState().setCollapsed('a', false) // manual expand
+    store.getState().setVisibility('a', false)
+    expect(store.getState().layers.a!.collapsed).toBe(true) // hidden = collapsed
+    store.getState().setVisibility('a', true)
+    expect(store.getState().layers.a!.collapsed).toBe(false) // restored
+  })
+
+  it('manual toggle while hidden wins on the next show', () => {
+    const store = createLegendStore('s', { layers })
+    store.getState().setVisibility('a', false) // snapshot: expanded
+    store.getState().setCollapsed('a', true) // manual choice while hidden
+    store.getState().setVisibility('a', true)
+    expect(store.getState().layers.a!.collapsed).toBe(true)
+  })
+
+  it('double-hide is a no-op and does not corrupt the snapshot', () => {
+    const store = createLegendStore('s', { layers })
+    store.getState().setVisibility('a', false)
+    store.getState().setVisibility('a', false) // idempotent
+    store.getState().setVisibility('a', true)
+    expect(store.getState().layers.a!.collapsed).toBe(false) // pre-hide state
+  })
+
+  it('group visibility drives group collapse with the same persistence', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [{ id: 'g1', label: 'One' }],
+    })
+    store.getState().setGroupVisibility('g1', false)
+    expect(store.getState().groups.g1!.collapsed).toBe(true)
+    store.getState().setGroupVisibility('g1', true)
+    expect(store.getState().groups.g1!.collapsed).toBe(false)
+
+    store.getState().setGroupCollapsed('g1', true) // manual
+    store.getState().setGroupVisibility('g1', false)
+    store.getState().setGroupVisibility('g1', true)
+    expect(store.getState().groups.g1!.collapsed).toBe(true) // persisted
+  })
+
+  it('_sync treats a re-created group icon of the same type/props as unchanged', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [
+        { id: 'g1', label: 'One', icon: createElement('span', null, 'icon') },
+      ],
+    })
+    const before = store.getState().groups
+
+    // New element instance each call (as a consumer re-rendering inline
+    // would produce), but same type and shallow-equal props.
+    store
+      .getState()
+      ._sync(layers, [
+        { id: 'g1', label: 'One', icon: createElement('span', null, 'icon') },
+      ])
+
+    expect(store.getState().groups).toBe(before) // no sync at all
+  })
+
+  it('_sync detects a real icon change (different type/props)', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [
+        { id: 'g1', label: 'One', icon: createElement('span', null, 'icon') },
+      ],
+    })
+
+    const newIcon = createElement('div', null, 'icon')
+    store.getState()._sync(layers, [{ id: 'g1', label: 'One', icon: newIcon }])
+
+    expect(store.getState().groups.g1!.icon).toBe(newIcon)
+  })
+
+  it('_sync detects a same-type/same-props icon with a different key as changed', () => {
+    const store = createLegendStore('s', {
+      groups: [
+        {
+          id: 'g1',
+          label: 'One',
+          icon: createElement('span', { key: 'a' }, 'icon'),
+        },
+      ],
+    })
+
+    const newIcon = createElement('span', { key: 'b' }, 'icon')
+    store.getState()._sync([], [{ id: 'g1', label: 'One', icon: newIcon }])
+
+    expect(store.getState().groups.g1!.icon).toBe(newIcon)
+  })
+
+  it('_sync preserves the collapse snapshot of a hidden layer', () => {
+    const store = createLegendStore('s', { layers })
+    store.getState().setCollapsed('a', true) // manual collapse
+    store.getState().setVisibility('a', false)
+
+    store.getState()._sync(layers, []) // Provider re-sync while hidden
+
+    store.getState().setVisibility('a', true)
+    expect(store.getState().layers.a!.collapsed).toBe(true) // snapshot survived
+  })
+
+  it('_sync replaces only the entities that changed', () => {
+    const store = createLegendStore('s', { layers })
+    const before = store.getState()
+
+    // Unchanged layers reuse the fixture inputs (stable `variables` array
+    // references — the documented contract for identity-preserving syncs).
+    store
+      .getState()
+      ._sync(
+        [
+          { ...layers[0]!, name: 'A renamed' },
+          layers[1]!,
+          layers[2]!,
+          layers[3]!,
+        ],
+        [],
+      )
+
+    const after = store.getState()
+    expect(after.layers).not.toBe(before.layers)
+    expect(after.layers.a).not.toBe(before.layers.a) // renamed → new object
+    expect(after.layers.b).toBe(before.layers.b) // untouched → same object
+  })
+
+  // ─── Imperative add/remove/update ──────────────────────────────────────────
+
+  it('setLegendLayer adds a new layer with seeded defaults + appended order', () => {
+    const store = createLegendStore('s', { layers })
+    store.getState().setLegendLayer({ id: 'e', name: 'E', variables: [cat] }) // ungrouped
+
+    const e = store.getState().layers.e!
+    expect(e.visible).toBe(true)
+    expect(e.opacity).toBe(1)
+    expect(e.collapsed).toBe(false)
+    // Ungrouped bucket was a,b (orders 0,1) → new layer appends at 2.
+    expect(e.order).toBe(2)
+    // Untouched layers keep their identity.
+    expect(store.getState().layers.a).toBeDefined()
+  })
+
+  it('setLegendLayer appends within the target group bucket', () => {
+    const store = createLegendStore('s', { layers })
+    store
+      .getState()
+      .setLegendLayer({ id: 'e', name: 'E', variables: [cat], groupId: 'g1' })
+    expect(
+      selectLayersByGroup(store.getState(), 'g1').map((l) => l.id),
+    ).toEqual(['c', 'd', 'e'])
+  })
+
+  it('setLegendLayer updates an existing layer, preserving interactive state', () => {
+    const store = createLegendStore('s', {
+      layers: [
+        {
+          id: 'a',
+          name: 'A',
+          variables: [cat],
+          sections: [
+            { id: 's1', title: 'By', options: ['x', 'y'], active: 'x' },
+          ],
+        },
+      ],
+    })
+    store.getState().setVisibility('a', false)
+    store.getState().setSectionValue('a', 's1', 'y')
+
+    store.getState().setLegendLayer({
+      id: 'a',
+      name: 'A renamed',
+      variables: [cat],
+      sections: [{ id: 's1', title: 'By', options: ['x', 'y'], active: 'x' }],
+    })
+
+    const a = store.getState().layers.a!
+    expect(a.name).toBe('A renamed') // static field follows input
+    expect(a.visible).toBe(false) // interactive state preserved
+    expect(a.sections![0]!.active).toBe('y') // user pick preserved (mergeSections)
+  })
+
+  it('setLegendLayer with identical input is a no-op (identity preserved)', () => {
+    const store = createLegendStore('s', { layers })
+    const before = store.getState()
+    store.getState().setLegendLayer(layers[0]!) // same id, same content
+    expect(store.getState().layers).toBe(before.layers)
+  })
+
+  it('removeLegendLayer drops the layer and re-densifies sibling order', () => {
+    const store = createLegendStore('s', { layers })
+    store.getState().removeLegendLayer('a')
+    expect(store.getState().layers.a).toBeUndefined()
+    // b was order 1 → re-densified to 0.
+    expect(store.getState().layers.b!.order).toBe(0)
+
+    const before = store.getState()
+    store.getState().removeLegendLayer('nope') // unknown → no-op
+    expect(store.getState().layers).toBe(before.layers)
+  })
+
+  it('setLegendGroup before its layers leaves the group expandable, not collapsed forever', () => {
+    // Registering the group first is a legitimate imperative order, but the
+    // group has no members at that point. Inferring "nothing visible" from
+    // that seeded collapsed: true, and `prev?.collapsed` then won every
+    // later merge — the group could never be opened.
+    const store = createLegendStore('s', { layers: [], groups: [] })
+    store.getState().setLegendGroup({ id: 'g9', label: 'Later' })
+    expect(store.getState().groups.g9!.collapsed).toBe(false)
+
+    store.getState().setLegendLayer({
+      id: 'z',
+      name: 'Z',
+      groupId: 'g9',
+      visible: true,
+      variables: [],
+    })
+    store.getState().setLegendGroup({ id: 'g9', label: 'Later renamed' })
+    expect(store.getState().groups.g9!.collapsed).toBe(false)
+  })
+
+  it('setLegendGroup leaves an all-hidden member list expanded, unlike the bulk sync', () => {
+    // The price of the fix, pinned so it stays deliberate: the imperative
+    // path can't tell "no members yet" from "no visible members", so it never
+    // infers collapse. `syncState` sees the whole batch and still does.
+    const store = createLegendStore('s', { layers: [], groups: [] })
+    store.getState().setLegendLayer({
+      id: 'hidden-1',
+      name: 'H1',
+      groupId: 'g7',
+      visible: false,
+      variables: [],
+    })
+    store.getState().setLegendGroup({ id: 'g7', label: 'All hidden' })
+
+    expect(store.getState().groups.g7!.collapsed).toBe(false)
+
+    const synced = createLegendStore('s2', {
+      layers: [
+        { id: 'hidden-1', name: 'H1', groupId: 'g7', visible: false },
+      ] as never,
+      groups: [{ id: 'g7', label: 'All hidden' }],
+    })
+    expect(synced.getState().groups.g7!.collapsed).toBe(true)
+  })
+
+  it('setLegendGroup still honours an explicit collapsed: true', () => {
+    const store = createLegendStore('s', { layers: [], groups: [] })
+    store
+      .getState()
+      .setLegendGroup({ id: 'g8', label: 'Closed', collapsed: true })
+    expect(store.getState().groups.g8!.collapsed).toBe(true)
+  })
+
+  it('setLegendGroup adds/updates a group; removeLegendGroup un-groups members', () => {
+    const store = createLegendStore('s', {
+      layers,
+      groups: [{ id: 'g1', label: 'One' }],
+    })
+    store.getState().setLegendGroup({ id: 'g2', label: 'Two' })
+    expect(selectOrderedGroups(store.getState()).map((g) => g.id)).toEqual([
+      'g1',
+      'g2',
+    ])
+
+    store.getState().setLegendGroup({ id: 'g1', label: 'One renamed' })
+    expect(store.getState().groups.g1!.label).toBe('One renamed')
+
+    // Removing g1 keeps its members (c, d) as ungrouped rows.
+    store.getState().removeLegendGroup('g1')
+    expect(store.getState().groups.g1).toBeUndefined()
+    expect(store.getState().layers.c!.groupId).toBeUndefined()
+    expect(store.getState().layers.d!.groupId).toBeUndefined()
+    expect(
+      selectLayersByGroup(store.getState(), undefined).map((l) => l.id),
+    ).toContain('c')
+  })
+})
+
+describe('moveLayer / moveGroup', () => {
+  // a, b ungrouped; c, d, e in g1; f in g2.
+  const moveLayers: LegendLayerInput[] = [
+    { id: 'a', name: 'A', variables: [cat] },
+    { id: 'b', name: 'B', variables: [cat] },
+    { id: 'c', name: 'C', variables: [cat], groupId: 'g1' },
+    { id: 'd', name: 'D', variables: [cat], groupId: 'g1' },
+    { id: 'e', name: 'E', variables: [cat], groupId: 'g1' },
+    { id: 'f', name: 'F', variables: [cat], groupId: 'g2' },
+  ]
+  const moveGroups = [
+    { id: 'g1', label: 'G1' },
+    { id: 'g2', label: 'G2' },
+    { id: 'g3', label: 'G3' },
+  ]
+  const orderedIds = (
+    s: ReturnType<ReturnType<typeof createLegendStore>['getState']>,
+    groupId: string | undefined,
+  ) => selectLayersByGroup(s, groupId).map((l) => l.id)
+
+  it('reorders within the bucket with dense orders', () => {
+    const store = createLegendStore('s', {
+      layers: moveLayers,
+      groups: moveGroups,
+    })
+    store.getState().moveLayer('e', 0)
+    expect(orderedIds(store.getState(), 'g1')).toEqual(['e', 'c', 'd'])
+    expect(
+      selectLayersByGroup(store.getState(), 'g1').map((l) => l.order),
+    ).toEqual([0, 1, 2])
+    // Other buckets untouched.
+    expect(orderedIds(store.getState(), undefined)).toEqual(['a', 'b'])
+    expect(orderedIds(store.getState(), 'g2')).toEqual(['f'])
+  })
+
+  it('moves ungrouped layers within their own bucket', () => {
+    const store = createLegendStore('s', {
+      layers: moveLayers,
+      groups: moveGroups,
+    })
+    store.getState().moveLayer('b', 0)
+    expect(orderedIds(store.getState(), undefined)).toEqual(['b', 'a'])
+  })
+
+  it('clamps the target index and no-ops on unknown ids / same position', () => {
+    const store = createLegendStore('s', {
+      layers: moveLayers,
+      groups: moveGroups,
+    })
+    store.getState().moveLayer('c', 99) // clamped to the end of g1
+    expect(orderedIds(store.getState(), 'g1')).toEqual(['d', 'e', 'c'])
+
+    const before = store.getState().layers
+    store.getState().moveLayer('nope', 0)
+    store.getState().moveLayer('c', 2) // already there
+    expect(store.getState().layers).toBe(before)
+  })
+
+  it('moveGroup reorders the group list and survives a resync', () => {
+    const store = createLegendStore('s', {
+      layers: moveLayers,
+      groups: moveGroups,
+    })
+    store.getState().moveGroup('g3', 0)
+    expect(selectOrderedGroups(store.getState()).map((g) => g.id)).toEqual([
+      'g3',
+      'g1',
+      'g2',
+    ])
+    // A provider resync with the original inputs preserves the user's order.
+    store.getState()._sync(moveLayers, moveGroups)
+    expect(selectOrderedGroups(store.getState()).map((g) => g.id)).toEqual([
+      'g3',
+      'g1',
+      'g2',
+    ])
+
+    const before = store.getState().groups
+    store.getState().moveGroup('nope', 0)
+    expect(store.getState().groups).toBe(before)
+  })
+})
+
+describe('summary selectors', () => {
+  // a, b ungrouped; c, d in g1 — plus a second group for cross-group checks.
+  const groupedLayers: LegendLayerInput[] = [
+    ...layers,
+    { id: 'e', name: 'E', variables: [cat], groupId: 'g2' },
+  ]
+  const groups = [
+    { id: 'g1', label: 'G1' },
+    { id: 'g2', label: 'G2' },
+  ]
+
+  it('selectVisibleLayersGrouped lists only visible layers, ungrouped last', () => {
+    const store = createLegendStore('s', { layers: groupedLayers, groups })
+    store.getState().setVisibility('d', false)
+    store.getState().setVisibility('e', false) // g2 fully hidden → dropped
+    const sections = selectVisibleLayersGrouped(store.getState())
+    expect(sections.map((x) => x.group?.id)).toEqual(['g1', undefined])
+    expect(sections[0]!.layers.map((l) => l.id)).toEqual(['c'])
+    expect(sections[1]!.layers.map((l) => l.id)).toEqual(['a', 'b'])
+  })
+
+  it('selectAllGroupsCollapsed flips only when every group is collapsed', () => {
+    const store = createLegendStore('s', { layers: groupedLayers, groups })
+    expect(selectAllGroupsCollapsed(store.getState())).toBe(false)
+    store.getState().setGroupCollapsed('g1', true)
+    expect(selectAllGroupsCollapsed(store.getState())).toBe(false)
+    store.getState().setGroupCollapsed('g2', true)
+    expect(selectAllGroupsCollapsed(store.getState())).toBe(true)
+  })
+})