@carto/ps-react-ui 4.7.0 → 4.8.0

package/src/widgets-v2/category/category-ui.test.tsx

@@ -0,0 +1,746 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { CategoryUI } from './category-ui'
+
+describe('<CategoryUI>', () => {
+  // ── Rendering basics ────────────────────────────────────────────────
+  describe('rendering', () => {
+    it('renders one row per item with name + value', () => {
+      render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: 10 },
+              { name: 'B', value: 20 },
+            ],
+          ]}
+        />,
+      )
+      expect(screen.getByText('A')).toBeTruthy()
+      expect(screen.getByText('B')).toBeTruthy()
+      expect(screen.getByText('10')).toBeTruthy()
+      expect(screen.getByText('20')).toBeTruthy()
+      expect(screen.getAllByRole('button')).toHaveLength(2)
+    })
+
+    it('returns null when data is empty (no rows, no container)', () => {
+      const { container } = render(<CategoryUI data={[]} />)
+      expect(container.firstChild).toBeNull()
+    })
+
+    it('returns null when all series are empty', () => {
+      const { container } = render(<CategoryUI data={[[], [], []]} />)
+      expect(container.firstChild).toBeNull()
+    })
+  })
+
+  // ── maxItems + "Other" overflow ────────────────────────────────────
+  describe('maxItems + Other row', () => {
+    const oneToTwelve = () =>
+      Array.from({ length: 12 }, (_, i) => ({
+        name: `n${i}`,
+        value: 12 - i,
+      }))
+
+    it('defaults to 20 → no Other row when data fits', () => {
+      render(<CategoryUI data={[oneToTwelve()]} />)
+      expect(screen.queryByText(/more/)).toBeNull()
+      expect(screen.getAllByRole('button')).toHaveLength(12)
+    })
+
+    it('default caps at 20 when data exceeds it → "Other (X more)" footer', () => {
+      const twentyFive = Array.from({ length: 25 }, (_, i) => ({
+        name: `n${i}`,
+        value: 25 - i,
+      }))
+      render(<CategoryUI data={[twentyFive]} />)
+      expect(screen.getAllByRole('button')).toHaveLength(20)
+      expect(screen.getByText('Other')).toBeTruthy()
+      expect(screen.getByText('(5 more)')).toBeTruthy()
+    })
+
+    it('maxItems=null → no cap, no scroll (canonical form)', () => {
+      // Explicit opt-out from both the default cap AND the searcher's
+      // scroll viewport. `null` is required because `undefined` resolves
+      // to the 20-row default-parameter value.
+      const twentyFive = Array.from({ length: 25 }, (_, i) => ({
+        name: `n${i}`,
+        value: 25 - i,
+      }))
+      const { container } = render(
+        <CategoryUI data={[twentyFive]} maxItems={null} />,
+      )
+      expect(screen.queryByText('Other')).toBeNull()
+      expect(screen.getAllByRole('button')).toHaveLength(25)
+      const root = container.firstChild as HTMLElement
+      const list = root.firstChild as HTMLElement
+      expect(list.style.maxHeight).toBe('')
+      expect(list.style.overflowY).toBe('')
+    })
+
+    it('maxItems=Infinity also yields no cap, no scroll (alias)', () => {
+      const twentyFive = Array.from({ length: 25 }, (_, i) => ({
+        name: `n${i}`,
+        value: 25 - i,
+      }))
+      render(
+        <CategoryUI data={[twentyFive]} maxItems={Number.POSITIVE_INFINITY} />,
+      )
+      expect(screen.queryByText('Other')).toBeNull()
+      expect(screen.getAllByRole('button')).toHaveLength(25)
+    })
+
+    it('slices to maxItems and shows "Other (X more)" footer', () => {
+      render(<CategoryUI data={[oneToTwelve()]} maxItems={5} />)
+      expect(screen.getAllByRole('button')).toHaveLength(5)
+      expect(screen.getByText('Other')).toBeTruthy()
+      expect(screen.getByText('(7 more)')).toBeTruthy()
+    })
+
+    it('maxItems=0 is the no-cap-with-scroll sentinel: every row renders inside a fixed scroll viewport', () => {
+      // `0` is the composer-driven "disable pagination" sentinel —
+      // used e.g. when the SearcherToggle is open so the search filter
+      // has the full dataset to chew through. The "Other" footer is
+      // suppressed because nothing is hidden, and the list locks to a
+      // scrollable viewport so the widget card height stays stable.
+      const { container } = render(
+        <CategoryUI data={[oneToTwelve()]} maxItems={0} />,
+      )
+      expect(screen.getAllByRole('button')).toHaveLength(12)
+      expect(screen.queryByText('Other')).toBeNull()
+      expect(screen.queryByText(/more/)).toBeNull()
+      // List has the scroll viewport inline style applied.
+      const root = container.firstChild as HTMLElement
+      const list = root.firstChild as HTMLElement
+      expect(list.style.maxHeight).not.toBe('')
+      expect(list.style.overflowY).toBe('auto')
+    })
+
+    // ── Natural-height measurement ────────────────────────────────
+    //
+    // Scroll mode (`maxItems === 0`) sizes its viewport from the
+    // list's `clientHeight` measured on the first render where the
+    // list was NOT in scroll mode (i.e., the capped view). jsdom's
+    // layout engine reports `clientHeight === 0`, so the tests stub
+    // it on `HTMLDivElement.prototype` for the renders they care
+    // about.
+    describe('scroll mode height (measure-once)', () => {
+      const stubClientHeight = (value: number) => {
+        Object.defineProperty(HTMLDivElement.prototype, 'clientHeight', {
+          configurable: true,
+          get: () => value,
+        })
+      }
+      const restoreClientHeight = () => {
+        // Delete the stub so other tests aren't affected.
+        delete (HTMLDivElement.prototype as { clientHeight?: unknown })
+          .clientHeight
+      }
+
+      it('locks scroll viewport to the capped view height after the user toggles into scroll mode', () => {
+        stubClientHeight(240)
+        try {
+          const { rerender, container } = render(
+            <CategoryUI data={[oneToTwelve()]} maxItems={5} />,
+          )
+          // First render: capped, no scroll lock. Effect measures 240.
+          const root = container.firstChild as HTMLElement
+          const list = root.firstChild as HTMLElement
+          expect(list.style.maxHeight).toBe('')
+          // Composer flips to scroll mode → viewport uses the measured
+          // 240px, NOT the hard-coded fallback.
+          rerender(<CategoryUI data={[oneToTwelve()]} maxItems={0} />)
+          expect(list.style.maxHeight).toBe('240px')
+          expect(list.style.overflowY).toBe('auto')
+        } finally {
+          restoreClientHeight()
+        }
+      })
+
+      it('freezes the lock anchor: subsequent re-measures while in scroll mode are ignored', () => {
+        stubClientHeight(180)
+        try {
+          const { rerender, container } = render(
+            <CategoryUI data={[oneToTwelve()]} maxItems={5} />,
+          )
+          const root = container.firstChild as HTMLElement
+          const list = root.firstChild as HTMLElement
+          rerender(<CategoryUI data={[oneToTwelve()]} maxItems={0} />)
+          expect(list.style.maxHeight).toBe('180px')
+          // Change the stub mid-flight. The lock must hold — measurement
+          // is one-shot, taken on the first non-scroll render.
+          stubClientHeight(999)
+          rerender(<CategoryUI data={[oneToTwelve()]} maxItems={0} />)
+          expect(list.style.maxHeight).toBe('180px')
+        } finally {
+          restoreClientHeight()
+        }
+      })
+
+      it('falls back to 8 × ROW_HEIGHT_PX[size] when mounted directly into scroll mode (no capped render to measure)', () => {
+        // No stub — clientHeight reads 0 in jsdom by default, so the
+        // effect's `if (h > 0)` guard skips the setState. The viewport
+        // must still have a sane size: 36 × 8 = 288px for small.
+        const { container } = render(
+          <CategoryUI data={[oneToTwelve()]} maxItems={0} />,
+        )
+        const root = container.firstChild as HTMLElement
+        const list = root.firstChild as HTMLElement
+        expect(list.style.maxHeight).toBe('288px')
+        expect(list.style.overflowY).toBe('auto')
+      })
+
+      it('uses the same fallback for multi-series widgets (no seriesCount multiplier)', () => {
+        // Regression: a 3-series widget mounted directly into scroll
+        // mode previously rendered at 3× the intended viewport (864px)
+        // because the fallback was multiplied by `seriesCount`. The
+        // fallback should be 288px regardless of series count.
+        const threeSeries = [oneToTwelve(), oneToTwelve(), oneToTwelve()]
+        const { container } = render(
+          <CategoryUI data={threeSeries} maxItems={0} />,
+        )
+        const root = container.firstChild as HTMLElement
+        const list = root.firstChild as HTMLElement
+        expect(list.style.maxHeight).toBe('288px')
+      })
+    })
+
+    it('honors custom labels.other + labels.otherCount with {count} substitution', () => {
+      render(
+        <CategoryUI
+          data={[oneToTwelve()]}
+          maxItems={3}
+          labels={{
+            other: 'Others',
+            otherCount: '+{count} hidden',
+          }}
+        />,
+      )
+      expect(screen.getByText('Others')).toBeTruthy()
+      expect(screen.getByText('(+9 hidden)')).toBeTruthy()
+    })
+
+    it('large maxItems = no Other row', () => {
+      render(<CategoryUI data={[oneToTwelve()]} maxItems={1_000} />)
+      expect(screen.queryByText(/more/)).toBeNull()
+      expect(screen.getAllByRole('button')).toHaveLength(12)
+    })
+  })
+
+  // ── Multi-series grouped rendering ─────────────────────────────────
+  describe('multi-series', () => {
+    const twoSeries = () => [
+      [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 20 },
+      ],
+      [
+        { name: 'A', value: 5 },
+        { name: 'B', value: 8 },
+      ],
+    ]
+
+    it('renders one row per unique name across series', () => {
+      render(<CategoryUI data={twoSeries()} />)
+      // 2 unique names → 2 row buttons (not 4 like a per-series layout would give).
+      expect(screen.getAllByRole('button')).toHaveLength(2)
+      expect(screen.getByText('A')).toBeTruthy()
+      expect(screen.getByText('B')).toBeTruthy()
+    })
+
+    it('renders both values per row, formatted', () => {
+      render(<CategoryUI data={twoSeries()} formatter={(n) => `$${n}`} />)
+      const rowA = screen.getAllByRole('button')[0]!
+      expect(within(rowA).getByText('A')).toBeTruthy()
+      expect(within(rowA).getByText('$10')).toBeTruthy()
+      expect(within(rowA).getByText('$5')).toBeTruthy()
+    })
+
+    it('clicking a multi-row toggles by name with raw key', () => {
+      const onSelectionChange = vi.fn()
+      render(
+        <CategoryUI
+          data={twoSeries()}
+          selection={[]}
+          onSelectionChange={onSelectionChange}
+        />,
+      )
+      fireEvent.click(screen.getAllByRole('button')[1]!)
+      expect(onSelectionChange).toHaveBeenCalledWith(['B'])
+    })
+
+    it('falls back gracefully when data.length > series.length (extra series unlabeled)', () => {
+      render(<CategoryUI data={twoSeries()} series={[{ name: 'Only-One' }]} />)
+      // 2 rows still render (data.length = 2 is the truth).
+      expect(screen.getAllByRole('button')).toHaveLength(2)
+      // Legend has just one entry.
+      expect(screen.getByText('Only-One')).toBeTruthy()
+    })
+
+    it('falls back gracefully when series.length > data.length (extras ignored, no legend overflow)', () => {
+      render(
+        <CategoryUI
+          data={[[{ name: 'A', value: 1 }]]}
+          series={[{ name: 'S1' }, { name: 'S2' }, { name: 'S3' }]}
+        />,
+      )
+      // data.length === 1 → single-series layout, no legend.
+      expect(screen.queryByText('S2')).toBeNull()
+    })
+  })
+
+  // ── Legend ─────────────────────────────────────────────────────────
+  describe('legend', () => {
+    it('renders the legend when multi-series + series prop supplied', () => {
+      render(
+        <CategoryUI
+          data={[[{ name: 'A', value: 1 }], [{ name: 'A', value: 2 }]]}
+          series={[{ name: '2024' }, { name: '2025' }]}
+        />,
+      )
+      expect(screen.getByText('2024')).toBeTruthy()
+      expect(screen.getByText('2025')).toBeTruthy()
+    })
+
+    it('does NOT render the legend for single-series even when series is given', () => {
+      render(
+        <CategoryUI
+          data={[[{ name: 'A', value: 1 }]]}
+          series={[{ name: 'OnlySeries' }]}
+        />,
+      )
+      expect(screen.queryByText('OnlySeries')).toBeNull()
+    })
+
+    it('does NOT render the legend for multi-series when series is omitted', () => {
+      render(
+        <CategoryUI
+          data={[[{ name: 'A', value: 1 }], [{ name: 'A', value: 2 }]]}
+        />,
+      )
+      // No legend element should be in the DOM (no series names to show).
+      // The text "A" is still present from the row label.
+      expect(screen.getAllByText('A')).toHaveLength(1)
+    })
+  })
+
+  // ── Selection visual ───────────────────────────────────────────────
+  describe('selection visual', () => {
+    it('marks selected rows aria-pressed=true', () => {
+      render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: 10 },
+              { name: 'B', value: 20 },
+            ],
+          ]}
+          selection={['A']}
+        />,
+      )
+      const pressed = screen.getAllByRole('button', { pressed: true })
+      expect(pressed).toHaveLength(1)
+      expect(pressed[0]!.textContent).toContain('A')
+    })
+
+    it('fires onSelectionChange with the toggled set on click', () => {
+      const onSelectionChange = vi.fn()
+      render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: 10 },
+              { name: 'B', value: 20 },
+            ],
+          ]}
+          selection={[]}
+          onSelectionChange={onSelectionChange}
+        />,
+      )
+      fireEvent.click(screen.getByText('B'))
+      expect(onSelectionChange).toHaveBeenCalledWith(['B'])
+    })
+
+    it('removes a selected item on second click', () => {
+      const onSelectionChange = vi.fn()
+      render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: 10 },
+              { name: 'B', value: 20 },
+            ],
+          ]}
+          selection={['A', 'B']}
+          onSelectionChange={onSelectionChange}
+        />,
+      )
+      fireEvent.click(screen.getByText('A'))
+      expect(onSelectionChange).toHaveBeenCalledWith(['B'])
+    })
+
+    it('toggles via keyboard Enter and Space', () => {
+      const onSelectionChange = vi.fn()
+      render(
+        <CategoryUI
+          data={[[{ name: 'A', value: 10 }]]}
+          selection={[]}
+          onSelectionChange={onSelectionChange}
+        />,
+      )
+      const row = screen.getByRole('button')
+      fireEvent.keyDown(row, { key: 'Enter' })
+      expect(onSelectionChange).toHaveBeenCalledWith(['A'])
+      onSelectionChange.mockClear()
+      fireEvent.keyDown(row, { key: ' ' })
+      expect(onSelectionChange).toHaveBeenCalledWith(['A'])
+    })
+  })
+
+  // ── Selection dim color (bar-fill-only signal) ─────────────────────
+  //
+  // When a selection exists, non-selected rows' bar fills swap to
+  // `theme.palette.action.disabled` — the ONLY visual difference
+  // between selected and non-selected rows. Text colors stay at full
+  // values; rows have no bg tint, no opacity rule.
+  //
+  // jsdom + MUI default light theme: `action.disabled` resolves to
+  // `rgba(0, 0, 0, 0.26)` — what the browser writes to
+  // `style.backgroundColor`.
+  describe('selection dim color', () => {
+    const DIM = 'rgba(0, 0, 0, 0.26)'
+
+    function getBarFill(row: HTMLElement): HTMLElement | null {
+      return row.querySelector('div[style*="width:"]')
+    }
+
+    it('non-selected rows render the bar fill in the theme dim color when a selection exists', () => {
+      render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: 10, color: 'rgb(255, 0, 0)' },
+              { name: 'B', value: 20, color: 'rgb(0, 255, 0)' },
+            ],
+          ]}
+          selection={['A']}
+        />,
+      )
+      const rows = screen.getAllByRole('button')
+      const aRow = rows.find((r) => r.textContent?.includes('A'))!
+      const bRow = rows.find((r) => r.textContent?.includes('B'))!
+      // Selected: keeps its real color.
+      expect(getBarFill(aRow)!.style.backgroundColor).toBe('rgb(255, 0, 0)')
+      // Non-selected: swaps to the dim color.
+      expect(getBarFill(bRow)!.style.backgroundColor).toBe(DIM)
+    })
+
+    it('without a selection, no row is dimmed (every bar keeps its real color)', () => {
+      render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: 10, color: 'rgb(255, 0, 0)' },
+              { name: 'B', value: 20, color: 'rgb(0, 255, 0)' },
+            ],
+          ]}
+        />,
+      )
+      const rows = screen.getAllByRole('button')
+      for (const row of rows) {
+        expect(getBarFill(row)!.style.backgroundColor).not.toBe(DIM)
+      }
+    })
+
+    it('multi-series: every bar in a dimmed row gets the dim color', () => {
+      render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: 10, color: 'rgb(255, 0, 0)' },
+              { name: 'B', value: 20, color: 'rgb(255, 0, 0)' },
+            ],
+            [
+              { name: 'A', value: 5, color: 'rgb(0, 0, 255)' },
+              { name: 'B', value: 7, color: 'rgb(0, 0, 255)' },
+            ],
+          ]}
+          selection={['A']}
+        />,
+      )
+      const rows = screen.getAllByRole('button')
+      const bRow = rows.find((r) => r.textContent?.includes('B'))!
+      const fills = bRow.querySelectorAll<HTMLElement>('div[style*="width:"]')
+      expect(fills.length).toBe(2)
+      fills.forEach((f) => {
+        expect(f.style.backgroundColor).toBe(DIM)
+      })
+    })
+  })
+
+  // ── labelFormatter (selection-key integrity) ───────────────────────
+  describe('labelFormatter', () => {
+    it('transforms displayed names without changing selection keys', () => {
+      const onSelectionChange = vi.fn()
+      render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'dog', value: 10 },
+              { name: 'cat', value: 20 },
+            ],
+          ]}
+          labelFormatter={(n) => String(n).toUpperCase()}
+          selection={[]}
+          onSelectionChange={onSelectionChange}
+        />,
+      )
+      // Display labels are upper-cased.
+      expect(screen.getByText('DOG')).toBeTruthy()
+      expect(screen.getByText('CAT')).toBeTruthy()
+      expect(screen.queryByText('dog')).toBeNull()
+      // Selection callback receives the RAW name.
+      fireEvent.click(screen.getByText('DOG'))
+      expect(onSelectionChange).toHaveBeenCalledWith(['dog'])
+    })
+
+    it('formats names in multi-series rows too, with raw selection keys', () => {
+      const onSelectionChange = vi.fn()
+      render(
+        <CategoryUI
+          data={[[{ name: 'dog', value: 1 }], [{ name: 'dog', value: 2 }]]}
+          labelFormatter={(n) => `[${n}]`}
+          selection={[]}
+          onSelectionChange={onSelectionChange}
+        />,
+      )
+      expect(screen.getByText('[dog]')).toBeTruthy()
+      fireEvent.click(screen.getByText('[dog]'))
+      expect(onSelectionChange).toHaveBeenCalledWith(['dog'])
+    })
+  })
+
+  // ── Palette + per-item / per-series color overrides ────────────────
+  describe('color palette', () => {
+    function getBarFill(row: HTMLElement): HTMLElement | null {
+      // The bar fill is the second <div> inside the bar track div.
+      return row.querySelector(
+        // The MUI Box renders as a div; the fill has inline style with width.
+        'div[style*="width:"]',
+      )
+    }
+
+    it('per-item color (data[s][r].color) wins over series + palette', () => {
+      render(
+        <CategoryUI
+          data={[[{ name: 'A', value: 10, color: 'rgb(255, 0, 0)' }]]}
+          series={[{ name: 'S', color: 'rgb(0, 255, 0)' }]}
+        />,
+      )
+      const row = screen.getByRole('button')
+      const fill = getBarFill(row)
+      expect(fill).toBeTruthy()
+      // jsdom resolves theme tokens but inline color literals come through.
+      expect(fill!.style.backgroundColor).toBe('rgb(255, 0, 0)')
+    })
+
+    it('series-level color (series[i].color) wins over palette', () => {
+      render(
+        <CategoryUI
+          data={[[{ name: 'A', value: 10 }]]}
+          series={[{ name: 'S', color: 'rgb(123, 45, 67)' }]}
+        />,
+      )
+      const fill = getBarFill(screen.getByRole('button'))
+      expect(fill!.style.backgroundColor).toBe('rgb(123, 45, 67)')
+    })
+  })
+
+  // ── maxOverride ────────────────────────────────────────────────────
+  describe('maxOverride', () => {
+    it('changes the bar width denominator (different markup)', () => {
+      const { rerender, container } = render(
+        <CategoryUI data={[[{ name: 'A', value: 100 }]]} />,
+      )
+      const before = container.innerHTML
+      rerender(
+        <CategoryUI data={[[{ name: 'A', value: 100 }]]} maxOverride={200} />,
+      )
+      expect(container.innerHTML).not.toBe(before)
+    })
+  })
+
+  // ── formatter ──────────────────────────────────────────────────────
+  describe('formatter', () => {
+    it('uses formatter for the value display', () => {
+      render(
+        <CategoryUI
+          data={[[{ name: 'A', value: 1234 }]]}
+          formatter={(n) => n.toLocaleString('en-US')}
+        />,
+      )
+      expect(screen.getByText('1,234')).toBeTruthy()
+    })
+  })
+
+  // ── Size variant ───────────────────────────────────────────────────
+  describe('size variant', () => {
+    const TWO_SERIES = [
+      [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 20 },
+      ],
+      [
+        { name: 'A', value: 5 },
+        { name: 'B', value: 15 },
+      ],
+    ]
+
+    it('defaults to size="small" — every bar carries data-size="small"', () => {
+      const { container } = render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: 10 },
+              { name: 'B', value: 20 },
+            ],
+          ]}
+        />,
+      )
+      const tracks = container.querySelectorAll('[data-size]')
+      expect(tracks.length).toBe(2)
+      tracks.forEach((t) => {
+        expect(t.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('propagates size="medium" to every bar (single-series)', () => {
+      const { container } = render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: 10 },
+              { name: 'B', value: 20 },
+            ],
+          ]}
+          size='medium'
+        />,
+      )
+      const tracks = container.querySelectorAll('[data-size]')
+      expect(tracks.length).toBe(2)
+      tracks.forEach((t) => {
+        expect(t.getAttribute('data-size')).toBe('medium')
+      })
+    })
+
+    it('propagates size="medium" to every bar (multi-series — N bars per row)', () => {
+      const { container } = render(
+        <CategoryUI data={TWO_SERIES} size='medium' />,
+      )
+      // 2 rows × 2 series = 4 bars
+      const tracks = container.querySelectorAll('[data-size]')
+      expect(tracks.length).toBe(4)
+      tracks.forEach((t) => {
+        expect(t.getAttribute('data-size')).toBe('medium')
+      })
+    })
+  })
+
+  // ── Stacked mode ────────────────────────────────────────────────────
+  describe('stacked', () => {
+    const TWO_SERIES = [
+      [
+        { name: 'A', value: 45 },
+        { name: 'B', value: 30 },
+      ],
+      [
+        { name: 'A', value: 32 },
+        { name: 'B', value: 18 },
+      ],
+    ]
+
+    it('multi-series + stacked → one stacked row per group with one bar track per row', () => {
+      const { container } = render(
+        <CategoryUI
+          data={TWO_SERIES}
+          series={[{ name: 'Women' }, { name: 'Men' }]}
+          stacked
+        />,
+      )
+      // 2 unique names → 2 stacked rows → 2 bar tracks (NOT 4 like CategoryRowMulti).
+      const tracks = container.querySelectorAll('[data-size]')
+      expect(tracks.length).toBe(2)
+      // Each track has 2 segments (data-bar-fill) for the two non-zero series.
+      const fills = container.querySelectorAll('[data-bar-fill="true"]')
+      expect(fills.length).toBe(4)
+    })
+
+    it('renders the formatted total in the header and the breakdown line under each row', () => {
+      render(
+        <CategoryUI
+          data={TWO_SERIES}
+          series={[{ name: 'Women' }, { name: 'Men' }]}
+          stacked
+          formatter={(n) => `${n}K`}
+        />,
+      )
+      // Totals: A=45+32=77, B=30+18=48
+      expect(screen.getByText('77K')).toBeTruthy()
+      expect(screen.getByText('48K')).toBeTruthy()
+      // Breakdown labels per row.
+      expect(screen.getByText('Women: 45K')).toBeTruthy()
+      expect(screen.getByText('Men: 32K')).toBeTruthy()
+      expect(screen.getByText('Women: 30K')).toBeTruthy()
+      expect(screen.getByText('Men: 18K')).toBeTruthy()
+    })
+
+    it('falls back to "Series N" in the breakdown when series prop is omitted', () => {
+      render(<CategoryUI data={TWO_SERIES} stacked formatter={(n) => `${n}`} />)
+      expect(screen.getByText('Series 1: 45')).toBeTruthy()
+      expect(screen.getByText('Series 2: 32')).toBeTruthy()
+    })
+
+    it('stacked is a no-op for single-series data (still renders CategoryRowSingle)', () => {
+      const { container } = render(
+        <CategoryUI data={[[{ name: 'A', value: 10 }]]} stacked />,
+      )
+      // Single-series row has no breakdown text — assert by the lack of
+      // "Series 1: ..." pattern (which would appear in stacked rendering).
+      expect(screen.queryByText(/Series 1:/)).toBeNull()
+      // 1 bar track for the one row.
+      expect(container.querySelectorAll('[data-size]').length).toBe(1)
+    })
+
+    it('clicking a stacked row toggles by raw name', () => {
+      const onSelectionChange = vi.fn()
+      render(
+        <CategoryUI
+          data={TWO_SERIES}
+          series={[{ name: 'Women' }, { name: 'Men' }]}
+          stacked
+          selection={[]}
+          onSelectionChange={onSelectionChange}
+        />,
+      )
+      fireEvent.click(screen.getAllByRole('button')[1]!)
+      expect(onSelectionChange).toHaveBeenCalledWith(['B'])
+    })
+
+    it('dim color applies to every segment of non-selected rows when a selection exists', () => {
+      const DIM = 'rgba(0, 0, 0, 0.26)'
+      render(
+        <CategoryUI
+          data={TWO_SERIES}
+          series={[{ name: 'Women' }, { name: 'Men' }]}
+          stacked
+          selection={['A']}
+        />,
+      )
+      const rows = screen.getAllByRole('button')
+      const bRow = rows.find((r) => r.textContent?.includes('B'))!
+      const fills = bRow.querySelectorAll<HTMLElement>('[data-bar-fill="true"]')
+      expect(fills.length).toBe(2)
+      fills.forEach((f) => expect(f.style.backgroundColor).toBe(DIM))
+    })
+  })
+})