@carto/ps-react-ui 4.15.0 → 4.16.0

package/src/legend/components/legend-row/legend-row.test.tsx

@@ -3,10 +3,15 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { MenuItem } from '@mui/material'
 import { LegendProvider } from '../../provider'
 import { LegendRow } from './legend-row'
+import { LegendGroup } from '../legend-group/legend-group'
 import { LegendActions } from '../legend-actions/legend-actions'
 import { LegendVisibilityToggle } from '../legend-visibility-toggle/legend-visibility-toggle'
 import { LegendRowMenu } from '../legend-row-menu/legend-row-menu'
 import { LegendZoomTo } from '../legend-row-menu/legend-zoom-to'
+import {
+  LegendShowOnlyLayer,
+  LegendShowAllLayers,
+} from '../legend-row-menu/legend-row-menu-items'
 import { LegendOpacity } from '../legend-opacity/legend-opacity'
 import { LegendConfigSelect } from '../legend-config-select/legend-config-select'
 import { LegendItem } from '../legend-item/legend-item'
@@ -25,37 +30,42 @@ const cat: LegendVariable = {
 afterEach(() => clearAllLegendStores())
 
 /**
- * Full row composition (the module shape): actions in the header slot,
- * config-select + item + opacity popover in the body. The menu is composed
- * with its items (module-style: only when the app wires a handler).
+ * Full row composition (the module shape): eye + ⋮ menu in the header slot
+ * (menu last → rightmost), the inline opacity bar as first body child, then
+ * config-select + item. Menu items: built-ins first, ZoomTo (app extra) last.
  */
 function renderRow(
   id: string,
   layers: LegendLayerInput[],
-  callbacks: { onZoomTo?: (id: string) => void } = {},
+  callbacks: { onZoomTo?: (id: string) => void | Promise<void> } = {},
   layerId = layers[0]!.id,
 ) {
   return render(
     <LegendProvider id={id} layers={layers}>
       <LegendRow layerId={layerId}>
-        {/* L→R: options · opacity · visibility (chevron appended after). */}
         <LegendActions>
-          {callbacks.onZoomTo && (
-            <LegendRowMenu>
-              <LegendZoomTo onZoomTo={callbacks.onZoomTo} />
-            </LegendRowMenu>
-          )}
-          <LegendOpacity.Trigger />
           <LegendVisibilityToggle />
+          <LegendRowMenu>
+            <LegendShowOnlyLayer />
+            <LegendShowAllLayers />
+            <LegendOpacity.Item />
+            {callbacks.onZoomTo && (
+              <LegendZoomTo onZoomTo={callbacks.onZoomTo} />
+            )}
+          </LegendRowMenu>
         </LegendActions>
+        <LegendOpacity.Inline />
         <LegendConfigSelect />
         <LegendItem />
-        <LegendOpacity.Popover />
       </LegendRow>
     </LegendProvider>,
   )
 }
 
+/** The row's accordion header (title area), named by its content. */
+const titleButton = (name: string | RegExp) =>
+  screen.getByRole('button', { name })
+
 describe('<LegendRow> composition', () => {
   it('partitions Actions into the header and other children into the body', () => {
     const { container } = renderRow('comp1', [
@@ -66,6 +76,8 @@ describe('<LegendRow> composition', () => {
     // The visibility action landed inside the header fade group…
     const fade = container.querySelector('.PsLegend-rowFade')!
     expect(fade.contains(screen.getByLabelText('Hide layer'))).toBe(true)
+    // …the ⋮ too (it fades like the rest)…
+    expect(fade.contains(screen.getByLabelText('Layer options'))).toBe(true)
     // …while the item renderer landed in the body, outside the fade group.
     expect(fade.contains(screen.getByText('A'))).toBe(false)
   })
@@ -78,29 +90,60 @@ describe('<LegendRow> composition', () => {
     expect(getLegendStore('r1').getState().layers.a!.visible).toBe(true)
   })
 
-  it('toggles collapse through the store', () => {
+  it('clicking the title row toggles collapse (accordion header)', () => {
     renderRow('r2', [{ id: 'a', name: 'A', variables: [cat] }])
-    fireEvent.click(screen.getByLabelText('Collapse layer'))
+    const header = titleButton(/A/)
+    expect(header.getAttribute('aria-expanded')).toBe('true')
+    fireEvent.click(header)
     expect(getLegendStore('r2').getState().layers.a!.collapsed).toBe(true)
+    expect(header.getAttribute('aria-expanded')).toBe('false')
+    // Keyboard parity: Space re-expands.
+    fireEvent.keyDown(header, { key: ' ' })
+    expect(getLegendStore('r2').getState().layers.a!.collapsed).toBe(false)
+  })
+
+  it('offers no collapse affordance when the layer has nothing to collapse', () => {
+    renderRow('r3', [{ id: 'a', name: 'Bodiless', variables: [] }])
+    expect(screen.queryByRole('button', { name: /Bodiless/ })).toBeNull()
   })
 
-  it('eye toggle drives collapse; a manual chevron collapse persists', () => {
+  it('eye toggle drives collapse; a manual title-click collapse persists', () => {
     renderRow('r6', [{ id: 'a', name: 'A', variables: [cat] }])
-    // Hide → collapses, and the chevron is disabled while hidden.
+    // Hide → collapses, and the title button disappears while hidden.
     fireEvent.click(screen.getByLabelText('Hide layer'))
     expect(getLegendStore('r6').getState().layers.a!.collapsed).toBe(true)
-    const chevron = screen.getByLabelText<HTMLButtonElement>('Expand layer')
-    expect(chevron.disabled).toBe(true)
+    expect(screen.queryByRole('button', { name: /A/ })).toBeNull()
     fireEvent.click(screen.getByLabelText('Show layer'))
     expect(getLegendStore('r6').getState().layers.a!.collapsed).toBe(false)
 
     // Manual collapse first → hide → show → stays collapsed.
-    fireEvent.click(screen.getByLabelText('Collapse layer'))
+    fireEvent.click(titleButton(/A/))
     fireEvent.click(screen.getByLabelText('Hide layer'))
     fireEvent.click(screen.getByLabelText('Show layer'))
     expect(getLegendStore('r6').getState().layers.a!.collapsed).toBe(true)
   })
 
+  it('hides the subtitle while collapsed, restores it on expand', () => {
+    renderRow('sub1', [
+      { id: 'a', name: 'A', subtitle: 'Zoom 0–12', variables: [cat] },
+    ])
+    expect(screen.getByText('Zoom 0–12')).toBeTruthy()
+    fireEvent.click(titleButton(/A/))
+    expect(screen.queryByText('Zoom 0–12')).toBeNull()
+    fireEvent.click(titleButton(/A/))
+    expect(screen.getByText('Zoom 0–12')).toBeTruthy()
+  })
+
+  it('hides the subtitle while the layer is hidden (force-collapsed)', () => {
+    renderRow('sub2', [
+      { id: 'a', name: 'A', subtitle: 'Zoom 0–12', variables: [cat] },
+    ])
+    fireEvent.click(screen.getByLabelText('Hide layer'))
+    expect(screen.queryByText('Zoom 0–12')).toBeNull()
+    fireEvent.click(screen.getByLabelText('Show layer'))
+    expect(screen.getByText('Zoom 0–12')).toBeTruthy()
+  })
+
   it('renders the config select when the layer declares sections', () => {
     renderRow('r5', [
       {
@@ -136,15 +179,160 @@ describe('<LegendRow> composition', () => {
   })
 })
 
-describe('<LegendRowMenu> (agnostic shell)', () => {
-  it('Legend.ZoomTo fires the composed handler with the layer id; the menu closes', () => {
+describe('<LegendRow> grouped (inside Legend.Group)', () => {
+  it('renders inside a group and collapses via its own title row', () => {
+    render(
+      <LegendProvider
+        id='g1-row'
+        groups={[{ id: 'g1', label: 'G' }]}
+        layers={[{ id: 'a', name: 'Alpha', groupId: 'g1', variables: [cat] }]}
+      >
+        <LegendGroup groupId='g1'>
+          <LegendRow layerId='a'>
+            <LegendActions>
+              <LegendVisibilityToggle />
+            </LegendActions>
+            <LegendItem />
+          </LegendRow>
+        </LegendGroup>
+      </LegendProvider>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: /Alpha/ }))
+    expect(getLegendStore('g1-row').getState().layers.a!.collapsed).toBe(true)
+  })
+})
+
+describe('<LegendRowMenu> (agnostic shell) + built-in items', () => {
+  it('Legend.ZoomTo fires the composed handler with the layer id; the menu closes', async () => {
     const onZoomTo = vi.fn()
     renderRow('m3', [{ id: 'a', name: 'A', variables: [cat] }], { onZoomTo })
     fireEvent.click(screen.getByLabelText('Layer options'))
-    fireEvent.click(screen.getByText('Zoom to'))
+    fireEvent.click(screen.getByText('Zoom to layer'))
     expect(onZoomTo).toHaveBeenCalledWith('a')
-    // Menu-level onClick closed it.
-    expect(screen.queryByRole('menuitem')).toBeNull()
+    // Sync handler settles on the next microtask → item closes the menu.
+    await vi.waitFor(() => {
+      expect(screen.queryByRole('menuitem')).toBeNull()
+    })
+  })
+
+  it('Legend.ZoomTo keeps the menu open with loading feedback while the handler is pending', async () => {
+    let resolveZoom!: () => void
+    const onZoomTo = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveZoom = resolve
+        }),
+    )
+    renderRow('m3-busy', [{ id: 'a', name: 'A', variables: [cat] }], {
+      onZoomTo,
+    })
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    fireEvent.click(screen.getByText('Zoom to layer'))
+
+    expect(onZoomTo).toHaveBeenCalledWith('a')
+    // Menu stays open; item shows the in-flight label and is disabled.
+    const item = await screen.findByRole('menuitem', { name: /Loading/ })
+    expect(item.getAttribute('aria-disabled')).toBe('true')
+    expect(screen.getByRole('progressbar')).toBeDefined()
+
+    resolveZoom()
+    await vi.waitFor(() => {
+      expect(screen.queryByRole('menuitem')).toBeNull()
+    })
+  })
+
+  it('Legend.ZoomTo ignores a second click before the busy re-render', async () => {
+    let resolveZoom!: () => void
+    const onZoomTo = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveZoom = resolve
+        }),
+    )
+    renderRow('m3-dbl', [{ id: 'a', name: 'A', variables: [cat] }], {
+      onZoomTo,
+    })
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    const zoomItem = screen.getByText('Zoom to layer')
+    // Two clicks in the same tick — before React applies setBusy(true).
+    fireEvent.click(zoomItem)
+    fireEvent.click(zoomItem)
+
+    expect(onZoomTo).toHaveBeenCalledTimes(1)
+
+    resolveZoom()
+    await vi.waitFor(() => {
+      expect(screen.queryByRole('menuitem')).toBeNull()
+    })
+  })
+
+  it('Show only this layer / Show all layers dispatch the sibling actions', () => {
+    render(
+      <LegendProvider
+        id='m7'
+        layers={[
+          { id: 'a', name: 'A', variables: [cat] },
+          { id: 'b', name: 'B', variables: [cat] },
+        ]}
+      >
+        <LegendRow layerId='a'>
+          <LegendActions>
+            <LegendRowMenu>
+              <LegendShowOnlyLayer />
+              <LegendShowAllLayers />
+            </LegendRowMenu>
+          </LegendActions>
+          <LegendItem />
+        </LegendRow>
+      </LegendProvider>,
+    )
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    fireEvent.click(screen.getByText('Show only this layer'))
+    expect(getLegendStore('m7').getState().layers.b!.visible).toBe(false)
+
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    fireEvent.click(screen.getByText('Show all layers'))
+    expect(getLegendStore('m7').getState().layers.b!.visible).toBe(true)
+  })
+
+  it('show only/all scope to the group bucket and restore collapse snapshots', () => {
+    render(
+      <LegendProvider
+        id='m9'
+        groups={[{ id: 'g1', label: 'G' }]}
+        layers={[
+          { id: 'a', name: 'A', groupId: 'g1', variables: [cat] },
+          { id: 'b', name: 'B', groupId: 'g1', variables: [cat] },
+          { id: 'loose', name: 'Loose', variables: [cat] },
+        ]}
+      >
+        <LegendGroup groupId='g1'>
+          <LegendRow layerId='a'>
+            <LegendActions>
+              <LegendRowMenu>
+                <LegendShowOnlyLayer />
+                <LegendShowAllLayers />
+              </LegendRowMenu>
+            </LegendActions>
+            <LegendItem />
+          </LegendRow>
+        </LegendGroup>
+      </LegendProvider>,
+    )
+    // Manual collapse on the sibling: the snapshot must survive the cycle.
+    getLegendStore('m9').getState().setCollapsed('b', true)
+
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    fireEvent.click(screen.getByText('Show only this layer'))
+    let st = getLegendStore('m9').getState()
+    expect(st.layers.b!.visible).toBe(false) // sibling in g1
+    expect(st.layers.loose!.visible).toBe(true) // other bucket untouched
+
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    fireEvent.click(screen.getByText('Show all layers'))
+    st = getLegendStore('m9').getState()
+    expect(st.layers.b!.visible).toBe(true)
+    expect(st.layers.b!.collapsed).toBe(true) // manual collapse restored
   })
 
   it('renders any consumer MenuItem; clicks dispatch and close the menu', () => {
@@ -169,10 +357,7 @@ describe('<LegendRowMenu> (agnostic shell)', () => {
     expect(screen.queryByRole('menuitem')).toBeNull()
   })
 
-  it('renders nothing without children (module gates on its own handler)', () => {
-    renderRow('m4', [{ id: 'a', name: 'A', variables: [cat] }])
-    expect(screen.queryByLabelText('Layer options')).toBeNull()
-
+  it('renders nothing without children', () => {
     render(
       <LegendProvider
         id='m6'
@@ -187,6 +372,24 @@ describe('<LegendRowMenu> (agnostic shell)', () => {
     )
     expect(screen.queryByLabelText('Layer options')).toBeNull()
   })
+
+  it('stays available while hidden, with only the applicable items', () => {
+    renderRow(
+      'm8',
+      [{ id: 'a', name: 'A', variables: [cat], opacityControl: true }],
+      { onZoomTo: vi.fn() },
+    )
+    fireEvent.click(screen.getByLabelText('Hide layer'))
+    // ⋮ still present (hover-revealed, not pinned).
+    const trigger = screen.getByLabelText('Layer options')
+    expect(trigger.className).not.toContain('active')
+    fireEvent.click(trigger)
+    // Show only/all still apply; Zoom + Opacity remove themselves.
+    expect(screen.getByText('Show only this layer')).toBeTruthy()
+    expect(screen.getByText('Show all layers')).toBeTruthy()
+    expect(screen.queryByText('Zoom to layer')).toBeNull()
+    expect(screen.queryByText('Opacity')).toBeNull()
+  })
 })
 
 describe('hover-fade dirty pinning (.active)', () => {
@@ -200,75 +403,80 @@ describe('hover-fade dirty pinning (.active)', () => {
     )
   })
 
-  it('marks the menu trigger active while its menu is open', () => {
-    renderRow('f2', [{ id: 'a', name: 'A', variables: [cat] }], {
-      onZoomTo: vi.fn(),
-    })
+  it('marks the menu trigger active while its menu or the opacity bar is open', () => {
+    renderRow('f2', [
+      { id: 'a', name: 'A', variables: [cat], opacityControl: true },
+    ])
     const trigger = screen.getByLabelText('Layer options')
     expect(trigger.className).not.toContain('active')
     fireEvent.click(trigger)
+    expect(trigger.className).toContain('active') // menu open
+
+    // Pick Opacity: the menu closes but the ⋮ stays pinned while the bar is
+    // open.
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Opacity' }))
+    expect(screen.queryByRole('menuitem')).toBeNull()
     expect(trigger.className).toContain('active')
   })
+})
 
-  it('marks the opacity action active while its popover is open or opacity ≠ 1', () => {
-    const { baseElement } = renderRow('f3', [
-      { id: 'a', name: 'A', variables: [cat] },
-    ])
-    const action = screen.getByRole('button', { name: 'Opacity' })
-    // The pin lives on the action's tooltip span — the fade group's child.
-    const pin = action.parentElement!
-    expect(pin.className).not.toContain('active')
+describe('<LegendOpacity> Item + Inline', () => {
+  const layersWithOpacity: LegendLayerInput[] = [
+    { id: 'a', name: 'A', variables: [cat], opacityControl: true },
+  ]
 
-    fireEvent.click(action)
-    expect(pin.className).toContain('active') // open pins it
+  const openBar = () => {
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Opacity' }))
+  }
 
-    fireEvent.change(screen.getByRole('slider', { name: 'Opacity' }), {
-      target: { value: '50' },
-    })
-    // Close via the backdrop: stays pinned because opacity is dirty.
-    fireEvent.click(baseElement.querySelector('.MuiBackdrop-root')!)
-    expect(pin.className).toContain('active')
-  })
+  it('the menu item toggles the inline bar and stays selected while open', () => {
+    renderRow('o1', layersWithOpacity)
+    expect(screen.queryByRole('slider')).toBeNull()
 
-  it('hides every action but the eye + chevron while the layer is hidden', () => {
-    renderRow('f4', [{ id: 'a', name: 'A', variables: [cat] }], {
-      onZoomTo: vi.fn(),
-    })
-    expect(screen.getByRole('button', { name: 'Opacity' })).toBeTruthy()
-    expect(screen.getByLabelText('Layer options')).toBeTruthy()
+    openBar()
+    expect(screen.getByRole('slider', { name: 'Opacity' })).toBeTruthy()
+    expect(screen.getByRole('textbox', { name: 'Opacity' })).toBeTruthy()
 
-    fireEvent.click(screen.getByLabelText('Hide layer'))
-    // Opacity + ⋮ menu disappear entirely…
-    expect(screen.queryByRole('button', { name: 'Opacity' })).toBeNull()
-    expect(screen.queryByLabelText('Layer options')).toBeNull()
-    // …only the visibility eye (now "Show layer") and the chevron remain.
-    expect(screen.getByLabelText('Show layer')).toBeTruthy()
-    expect(screen.getByLabelText('Expand layer')).toBeTruthy()
+    // Reopen the menu: the item reflects the open bar and toggles it off.
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    const item = screen.getByRole('menuitem', { name: 'Opacity' })
+    expect(item.className).toContain('Mui-selected')
+    fireEvent.click(item)
+    expect(screen.queryByRole('slider')).toBeNull()
+  })
 
-    fireEvent.click(screen.getByLabelText('Show layer'))
-    // Showing the layer brings the actions back.
-    expect(screen.getByRole('button', { name: 'Opacity' })).toBeTruthy()
-    expect(screen.getByLabelText('Layer options')).toBeTruthy()
+  it('removes the item without opacityControl', () => {
+    renderRow('o2', [{ id: 'a', name: 'A', variables: [cat] }])
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    expect(screen.queryByRole('menuitem', { name: 'Opacity' })).toBeNull()
   })
-})
 
-describe('<LegendOpacity> / <LegendConfigSelect> dispatch', () => {
-  it('the trigger opens the popover declared elsewhere in the row (shared context)', () => {
-    const { baseElement } = renderRow('anchor', [
-      { id: 'a', name: 'A', variables: [cat] },
-    ])
-    expect(screen.queryByRole('slider')).toBeNull()
-    fireEvent.click(screen.getByRole('button', { name: 'Opacity' }))
-    // Trigger (header) and Popover (body) communicate through the row context.
+  it('opening on a collapsed row auto-expands it; folding keeps the state', () => {
+    renderRow('o3', layersWithOpacity)
+    fireEvent.click(titleButton(/A/)) // collapse
+    openBar()
+    // Auto-expanded so the bar is visible.
+    expect(getLegendStore('o3').getState().layers.a!.collapsed).toBe(false)
     expect(screen.getByRole('slider', { name: 'Opacity' })).toBeTruthy()
-    expect(screen.getByRole('textbox', { name: 'Opacity' })).toBeTruthy()
-    fireEvent.click(baseElement.querySelector('.MuiBackdrop-root')!)
+
+    // Folding hides the bar with the body but keeps opacityOpen: expanding
+    // brings it back without touching the menu.
+    fireEvent.click(titleButton(/A/))
+    fireEvent.click(titleButton(/A/))
+    expect(screen.getByRole('slider', { name: 'Opacity' })).toBeTruthy()
+  })
+
+  it('the ✕ closes the bar', () => {
+    renderRow('o4', layersWithOpacity)
+    openBar()
+    fireEvent.click(screen.getByLabelText('Close'))
     expect(screen.queryByRole('slider')).toBeNull()
   })
 
   it('slider release commits setOpacity (0–1) to the store', () => {
-    renderRow('c1', [{ id: 'a', name: 'A', variables: [cat] }])
-    fireEvent.click(screen.getByRole('button', { name: 'Opacity' }))
+    renderRow('c1', layersWithOpacity)
+    openBar()
     const slider = screen.getByRole('slider', { name: 'Opacity' })
     // The hidden-input change path fires MUI's onChangeCommitted too.
     fireEvent.change(slider, { target: { value: '40' } })
@@ -276,8 +484,8 @@ describe('<LegendOpacity> / <LegendConfigSelect> dispatch', () => {
   })
 
   it('percent input commits live and clamps to 0–100', () => {
-    renderRow('c3', [{ id: 'a', name: 'A', variables: [cat] }])
-    fireEvent.click(screen.getByRole('button', { name: 'Opacity' }))
+    renderRow('c3', layersWithOpacity)
+    openBar()
     const input = screen.getByRole('textbox', { name: 'Opacity' })
 
     fireEvent.change(input, { target: { value: '40' } })
@@ -294,7 +502,9 @@ describe('<LegendOpacity> / <LegendConfigSelect> dispatch', () => {
     fireEvent.blur(input)
     expect((input as HTMLInputElement).value).toBe('100')
   })
+})
 
+describe('<LegendConfigSelect> dispatch', () => {
   it('a single section renders without its title; a pick writes the store', () => {
     renderRow('c2', [
       {
@@ -433,20 +643,29 @@ describe('labels override', () => {
     render(
       <LegendProvider
         id='l10n'
-        layers={[{ id: 'a', name: 'A', variables: [cat] }]}
+        layers={[
+          { id: 'a', name: 'A', variables: [cat], opacityControl: true },
+        ]}
         labels={{ opacity: 'Opacidad', hideLayer: 'Ocultar capa' }}
       >
         <LegendRow layerId='a'>
           <LegendActions>
-            <LegendOpacity.Trigger />
             <LegendVisibilityToggle />
+            <LegendRowMenu>
+              <LegendOpacity.Item />
+            </LegendRowMenu>
           </LegendActions>
+          <LegendOpacity.Inline />
+          <LegendItem />
         </LegendRow>
       </LegendProvider>,
     )
-    // The opacity action carries the overridden label (aria + tooltip).
-    expect(screen.getByRole('button', { name: 'Opacidad' })).toBeTruthy()
     expect(screen.getByLabelText('Ocultar capa')).toBeTruthy()
+    fireEvent.click(screen.getByLabelText('Layer options'))
+    // The opacity menu item carries the overridden label…
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Opacidad' }))
+    // …and so does the inline bar's slider.
+    expect(screen.getByRole('slider', { name: 'Opacidad' })).toBeTruthy()
   })
 })