@carto/ps-react-ui 4.7.1 → 4.8.0

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

@@ -0,0 +1,305 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { Provider } from '../provider/widget-provider'
+import { clearAllWidgetStores, getWidgetStore } from '../stores'
+import { Category } from './category'
+
+beforeEach(() => clearAllWidgetStores())
+afterEach(() => clearAllWidgetStores())
+
+const DATA = [
+  [
+    { name: 'A', value: 10 },
+    { name: 'B', value: 20 },
+  ],
+]
+
+describe('<Category> bridge', () => {
+  it('reads post-pipeline data from the store and renders rows', () => {
+    render(
+      <Provider id='cat-bridge-1' data={DATA}>
+        <Category />
+      </Provider>,
+    )
+    expect(screen.getByText('A')).toBeTruthy()
+    expect(screen.getByText('B')).toBeTruthy()
+  })
+
+  it('forwards the formatter from the store to the UI', () => {
+    const fmt = (n: number) => `[${n}]`
+    render(
+      <Provider id='cat-bridge-2' data={DATA} formatter={fmt}>
+        <Category />
+      </Provider>,
+    )
+    expect(screen.getByText('[10]')).toBeTruthy()
+    expect(screen.getByText('[20]')).toBeTruthy()
+  })
+
+  it('passes selection and onSelectionChange through to the UI', () => {
+    const onSelectionChange = vi.fn()
+    render(
+      <Provider id='cat-bridge-3' data={DATA}>
+        <Category selection={['A']} onSelectionChange={onSelectionChange} />
+      </Provider>,
+    )
+    fireEvent.click(screen.getByText('B'))
+    expect(onSelectionChange).toHaveBeenCalledWith(['A', 'B'])
+  })
+
+  it('reflects pipeline-derived data when filters change the store', () => {
+    render(
+      <Provider id='cat-bridge-4' data={DATA}>
+        <Category />
+      </Provider>,
+    )
+    // Manually mutate the post-pipeline derived data on the store, simulating
+    // a transform output. The bridge selector picks it up via Zustand subscription.
+    expect(screen.getByText('B')).toBeTruthy()
+    void getWidgetStore('cat-bridge-4')
+  })
+
+  it('forwards labelFormatter from the store to the UI; selection callback still receives raw name', () => {
+    const onSelectionChange = vi.fn()
+    render(
+      <Provider
+        id='cat-bridge-5'
+        data={DATA}
+        labelFormatter={(n) => String(n).toUpperCase()}
+      >
+        <Category selection={[]} onSelectionChange={onSelectionChange} />
+      </Provider>,
+    )
+    // Display names are upper-cased by the formatter.
+    expect(screen.getByText('A')).toBeTruthy()
+    // Click the upper-cased display label.
+    fireEvent.click(screen.getByText('A'))
+    // Selection callback gets the RAW name, not the formatted one.
+    expect(onSelectionChange).toHaveBeenCalledWith(['A'])
+  })
+
+  it('forwards series, maxItems, labels, maxOverride as pass-throughs', () => {
+    const data = [
+      Array.from({ length: 6 }, (_, i) => ({
+        name: `n${i}`,
+        value: 6 - i,
+      })),
+    ]
+    render(
+      <Provider id='cat-bridge-6' data={data}>
+        <Category
+          maxItems={3}
+          labels={{ other: 'Rest', otherCount: '({count} hidden)' }}
+        />
+      </Provider>,
+    )
+    // 3 visible rows + Other footer.
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+    expect(screen.getByText('Rest')).toBeTruthy()
+    expect(screen.getByText('((3 hidden))')).toBeTruthy()
+  })
+
+  it('does NOT read `transformStates.searcher.enabled` from the store (composer-mediation contract)', () => {
+    // Defensive: the library bridge stays agnostic of every specific
+    // action. Pagination is purely a `maxItems` decision; consumers
+    // that want to bypass it while a SearcherToggle is open should
+    // flip the prop themselves (e.g., the `CategoryWidget` composer
+    // does `maxItems = searcherOpen ? 0 : userMaxItems`). Guards
+    // against regressing into the old widget-reads-action-state
+    // pattern.
+    const data = [
+      Array.from({ length: 10 }, (_, i) => ({
+        name: `n${i}`,
+        value: 10 - i,
+      })),
+    ]
+    render(
+      <Provider id='cat-bridge-8' data={data}>
+        <Category maxItems={3} />
+      </Provider>,
+    )
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+    expect(screen.getByText('Other')).toBeTruthy()
+
+    // Flip the searcher flag in the store — bridge should NOT react.
+    act(() => {
+      const store = getWidgetStore('cat-bridge-8')
+      store.setState({
+        transformStates: {
+          ...store.getState().transformStates,
+          searcher: { enabled: true },
+        },
+      })
+    })
+
+    // Still capped, Other still there.
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+    expect(screen.getByText('Other')).toBeTruthy()
+  })
+
+  it('respects maxItems=0 (no-cap sentinel) from the consumer', () => {
+    // Composers that want to drop pagination — e.g., while the
+    // SearcherToggle is open — pass `maxItems={0}`.
+    const data = [
+      Array.from({ length: 10 }, (_, i) => ({
+        name: `n${i}`,
+        value: 10 - i,
+      })),
+    ]
+    render(
+      <Provider id='cat-bridge-nocap' data={data}>
+        <Category maxItems={0} />
+      </Provider>,
+    )
+    // No cap → all rows render, Other footer is suppressed.
+    expect(screen.getAllByRole('button')).toHaveLength(10)
+    expect(screen.queryByText('Other')).toBeNull()
+  })
+
+  it('forwards size="medium" through to the rendered bars', () => {
+    const { container } = render(
+      <Provider id='cat-bridge-size' data={DATA}>
+        <Category size='medium' />
+      </Provider>,
+    )
+    const tracks = container.querySelectorAll('[data-size]')
+    expect(tracks.length).toBe(2)
+    tracks.forEach((t) => {
+      expect(t.getAttribute('data-size')).toBe('medium')
+    })
+  })
+
+  it('defaults size to "small" when omitted', () => {
+    const { container } = render(
+      <Provider id='cat-bridge-size-default' data={DATA}>
+        <Category />
+      </Provider>,
+    )
+    const tracks = container.querySelectorAll('[data-size]')
+    expect(tracks.length).toBe(2)
+    tracks.forEach((t) => {
+      expect(t.getAttribute('data-size')).toBe('small')
+    })
+  })
+
+  // The bridge auto-fills `maxOverride` from `rawData` so bar widths
+  // stay coherent across data transforms (e.g., the Searcher filtering
+  // rows in/out). Without this, CategoryUI's live computation would
+  // shrink the denominator to the filtered max and bars would rescale.
+  describe('maxOverride auto-fill from rawData', () => {
+    // Single-series dataset with a round peak (1000) so percent
+    // expectations are exact.
+    const PEAK_DATA = [
+      [
+        { name: 'A', value: 1000 },
+        { name: 'B', value: 500 },
+        { name: 'C', value: 250 },
+      ],
+    ]
+
+    function getBarFills(): HTMLElement[] {
+      return Array.from(
+        document.querySelectorAll<HTMLElement>('[data-bar-fill="true"]'),
+      )
+    }
+
+    it('uses rawData max as the bar denominator when consumer omits maxOverride', () => {
+      render(
+        <Provider id='cat-bridge-auto-1' data={PEAK_DATA}>
+          <Category />
+        </Provider>,
+      )
+      const fills = getBarFills()
+      expect(fills).toHaveLength(3)
+      expect(fills[0]!.style.width).toBe('100%')
+      expect(fills[1]!.style.width).toBe('50%')
+      expect(fills[2]!.style.width).toBe('25%')
+    })
+
+    it('keeps bar widths coherent when a transform shrinks `data` below `rawData`', () => {
+      render(
+        <Provider id='cat-bridge-auto-2' data={PEAK_DATA}>
+          <Category />
+        </Provider>,
+      )
+      // Simulate a data-transform output (e.g., Searcher filtering to
+      // just "C"). The pipeline middleware no-ops when only `data` is
+      // set and `rawData`/`dataTransforms` are unchanged, so our
+      // override survives the Provider's per-prop sync.
+      act(() => {
+        getWidgetStore('cat-bridge-auto-2').setState({
+          data: [[{ name: 'C', value: 250 }]],
+        })
+      })
+      const fills = getBarFills()
+      expect(fills).toHaveLength(1)
+      // C's bar must still scale to 250/1000 = 25%, NOT 100% (which is
+      // what it would be if maxValue came from the filtered subset).
+      expect(fills[0]!.style.width).toBe('25%')
+    })
+
+    it('consumer-supplied maxOverride wins over the rawData auto-fill', () => {
+      render(
+        <Provider id='cat-bridge-auto-3' data={PEAK_DATA}>
+          <Category maxOverride={2000} />
+        </Provider>,
+      )
+      const fills = getBarFills()
+      // 1000/2000, 500/2000, 250/2000 — consumer override active.
+      expect(fills[0]!.style.width).toBe('50%')
+      expect(fills[1]!.style.width).toBe('25%')
+      expect(fills[2]!.style.width).toBe('12.5%')
+    })
+
+    it('skips the auto-fill when rawData is empty (lets CategoryUI fallback handle it)', () => {
+      // `data` non-empty, but rawData is set to []. The bridge must NOT
+      // pass maxOverride=0 (which CategoryUI's `> 0` guard would
+      // reject); it should fall through to undefined so CategoryUI
+      // computes from the live `data`.
+      render(
+        <Provider id='cat-bridge-auto-4' data={[]}>
+          <Category />
+        </Provider>,
+      )
+      act(() => {
+        getWidgetStore('cat-bridge-auto-4').setState({
+          data: [[{ name: 'X', value: 42 }]],
+        })
+      })
+      const fills = getBarFills()
+      expect(fills).toHaveLength(1)
+      // CategoryUI computes max from the live data → 42/42 = 100%.
+      expect(fills[0]!.style.width).toBe('100%')
+    })
+
+    it('refreshes the auto-fill when `rawData` identity changes', () => {
+      const { rerender } = render(
+        <Provider id='cat-bridge-auto-5' data={PEAK_DATA}>
+          <Category />
+        </Provider>,
+      )
+      let fills = getBarFills()
+      expect(fills[0]!.style.width).toBe('100%') // 1000/1000
+
+      // New dataset with a 5× larger peak — every bar must rescale.
+      const NEXT = [
+        [
+          { name: 'A', value: 1000 },
+          { name: 'B', value: 500 },
+          { name: 'C', value: 250 },
+          { name: 'D', value: 5000 },
+        ],
+      ]
+      rerender(
+        <Provider id='cat-bridge-auto-5' data={NEXT}>
+          <Category />
+        </Provider>,
+      )
+      fills = getBarFills()
+      expect(fills).toHaveLength(4)
+      // A: 1000/5000 = 20%, D: 5000/5000 = 100%.
+      expect(fills[0]!.style.width).toBe('20%')
+      expect(fills[3]!.style.width).toBe('100%')
+    })
+  })
+})

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

@@ -0,0 +1,121 @@
+import { useMemo } from 'react'
+import { useWidgetId, useWidgetShallow, type WidgetState } from '../stores'
+import { CategoryUI } from './category-ui'
+import type {
+  CategoryKey,
+  CategoryLabels,
+  CategorySeriesConfig,
+  CategorySize,
+  CategoryWidgetData,
+} from './types'
+
+interface CategorySlice {
+  data: CategoryWidgetData
+  rawData: CategoryWidgetData | undefined
+  formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
+}
+
+const categorySelector = (s: WidgetState): CategorySlice => ({
+  data: (s.data ?? []) as CategoryWidgetData,
+  rawData: (s.rawData ?? undefined) as CategoryWidgetData | undefined,
+  formatter: s.formatter,
+  labelFormatter: s.labelFormatter,
+})
+
+function maxFromCategoryData(d: CategoryWidgetData | undefined): number {
+  if (!d) return 0
+  let m = 0
+  for (const series of d) {
+    for (const item of series) if (item.value > m) m = item.value
+  }
+  return m
+}
+
+export interface CategoryProps {
+  /** Currently-selected category names. Destination-owned. */
+  selection?: readonly CategoryKey[]
+  /** Fires when a row is clicked. Consumer updates the destination's store. */
+  onSelectionChange?: (next: readonly CategoryKey[]) => void
+  /** Per-series metadata. Enables the legend + overrides palette per index. */
+  series?: readonly CategorySeriesConfig[]
+  /**
+   * Cap visible rows; overflow folds into "Other (X more)". Default 20
+   * (when omitted). Pass `0` to swap the cap for a scrollable viewport
+   * (composers use this when the user opens the SearcherToggle —
+   * `maxItems = searcherOpen ? 0 : userMaxItems`). Pass `null` to disable
+   * the cap entirely without adding a scroll viewport.
+   */
+  maxItems?: number | null
+  /** Labels for the "Other" overflow row. */
+  labels?: CategoryLabels
+  /**
+   * Manual override for the bar-width denominator. When omitted, the
+   * bridge auto-fills from the widget store's `rawData` so bar widths
+   * stay coherent across data transforms (e.g., the Searcher filtering
+   * rows in and out — bars don't rescale just because the larger rows
+   * got hidden). Pass an explicit number to fix the denominator
+   * regardless of the data.
+   */
+  maxOverride?: number
+  /**
+   * Visual density of the bar primitive. `'small'` (default) keeps the
+   * historical 4px-tall pill; `'medium'` switches to a 12px-tall track
+   * with a 2px corner radius. Forwarded as-is to {@link CategoryUI}.
+   */
+  size?: CategorySize
+  /**
+   * Multi-series stacked mode. Forwarded as-is to {@link CategoryUI}.
+   * Composers typically wire this from
+   * `useTransformEnabled(id, 'stack-toggle')`. No-op for single-series.
+   */
+  stacked?: boolean
+}
+
+/**
+ * Stateful Category bridge — reads `data`, `formatter`, and
+ * `labelFormatter` (post-pipeline) from the per-widget store and
+ * forwards them to the pure {@link CategoryUI}. `selection` and
+ * `onSelectionChange` follow the destination-owned principle: the
+ * consumer keeps the list in their own store and passes it through.
+ */
+export function Category({
+  selection,
+  onSelectionChange,
+  series,
+  maxItems,
+  labels,
+  maxOverride,
+  size,
+  stacked,
+}: CategoryProps) {
+  const id = useWidgetId()
+  const slice = useWidgetShallow(id, categorySelector)
+  // Auto-fill `maxOverride` from `rawData` so bar widths stay coherent
+  // across data transforms (e.g., the Searcher filtering rows in/out).
+  // Consumer's explicit value always wins; we only fill when omitted
+  // AND `rawData` has at least one positive value (CategoryUI's
+  // `maxOverride > 0` guard would reject 0 anyway, but skipping is
+  // cleaner — it lets the live fallback path handle the empty case).
+  const naturalMax = useMemo(
+    () => maxFromCategoryData(slice.rawData),
+    [slice.rawData],
+  )
+  const effectiveMaxOverride =
+    maxOverride ?? (naturalMax > 0 ? naturalMax : undefined)
+  return (
+    <CategoryUI
+      data={slice.data}
+      formatter={slice.formatter}
+      labelFormatter={slice.labelFormatter}
+      selection={selection}
+      onSelectionChange={onSelectionChange}
+      series={series}
+      maxItems={maxItems}
+      labels={labels}
+      maxOverride={effectiveMaxOverride}
+      size={size}
+      stacked={stacked}
+    />
+  )
+}

package/src/widgets-v2/category/components/category-bar-stacked.test.tsx

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { CategoryBarStacked } from './category-bar-stacked'
+
+describe('<CategoryBarStacked>', () => {
+  function getSegments(container: HTMLElement): HTMLElement[] {
+    return Array.from(
+      container.querySelectorAll<HTMLElement>('[data-bar-fill="true"]'),
+    )
+  }
+
+  it('renders one segment per non-zero value with proportional width', () => {
+    const { container } = render(
+      <CategoryBarStacked
+        values={[40, 30]}
+        colors={['rgb(0, 200, 0)', 'rgb(0, 100, 0)']}
+        maxValue={100}
+      />,
+    )
+    const segs = getSegments(container)
+    expect(segs).toHaveLength(2)
+    expect(segs[0]!.style.width).toBe('40%')
+    expect(segs[1]!.style.width).toBe('30%')
+  })
+
+  it('cumulative left offsets — second segment starts at the first segment’s right edge', () => {
+    const { container } = render(
+      <CategoryBarStacked
+        values={[40, 30]}
+        colors={['rgb(0, 200, 0)', 'rgb(0, 100, 0)']}
+        maxValue={100}
+      />,
+    )
+    const segs = getSegments(container)
+    expect(segs[0]!.style.left).toBe('0%')
+    expect(segs[1]!.style.left).toBe('40%')
+  })
+
+  it('skips zero-value segments entirely (no DOM node, no width:0 placeholder)', () => {
+    const { container } = render(
+      <CategoryBarStacked
+        values={[40, 0, 20]}
+        colors={['rgb(0, 200, 0)', 'rgb(0, 100, 0)', 'rgb(0, 50, 0)']}
+        maxValue={100}
+      />,
+    )
+    const segs = getSegments(container)
+    expect(segs).toHaveLength(2)
+    // Cumulative offsets skip the gap from the zero segment — its
+    // contribution to the cumulative sum is zero anyway, so the third
+    // value's left = 40 + 0 = 40%.
+    expect(segs[0]!.style.left).toBe('0%')
+    expect(segs[0]!.style.width).toBe('40%')
+    expect(segs[1]!.style.left).toBe('40%')
+    expect(segs[1]!.style.width).toBe('20%')
+  })
+
+  it('renders no segments when maxValue is 0 (and every value is 0 → division-by-zero safety)', () => {
+    const { container } = render(
+      <CategoryBarStacked
+        values={[0, 0]}
+        colors={['rgb(0, 0, 0)', 'rgb(0, 0, 0)']}
+        maxValue={0}
+      />,
+    )
+    expect(getSegments(container)).toHaveLength(0)
+  })
+
+  it('honors colors per segment', () => {
+    const { container } = render(
+      <CategoryBarStacked
+        values={[20, 30]}
+        colors={['rgb(255, 0, 0)', 'rgb(0, 0, 255)']}
+        maxValue={100}
+      />,
+    )
+    const segs = getSegments(container)
+    expect(segs[0]!.style.backgroundColor).toBe('rgb(255, 0, 0)')
+    expect(segs[1]!.style.backgroundColor).toBe('rgb(0, 0, 255)')
+  })
+
+  it('single value renders a single segment at left:0% (CategoryBar-equivalent)', () => {
+    const { container } = render(
+      <CategoryBarStacked
+        values={[25]}
+        colors={['rgb(0, 0, 0)']}
+        maxValue={100}
+      />,
+    )
+    const segs = getSegments(container)
+    expect(segs).toHaveLength(1)
+    expect(segs[0]!.style.left).toBe('0%')
+    expect(segs[0]!.style.width).toBe('25%')
+  })
+
+  it('defaults to size="small" (data-size on the track)', () => {
+    const { container } = render(
+      <CategoryBarStacked
+        values={[10]}
+        colors={['rgb(0, 0, 0)']}
+        maxValue={100}
+      />,
+    )
+    const track = container.querySelector('[data-size]')
+    expect(track).toBeTruthy()
+    expect(track!.getAttribute('data-size')).toBe('small')
+  })
+
+  it('propagates size="medium" to the track', () => {
+    const { container } = render(
+      <CategoryBarStacked
+        values={[10]}
+        colors={['rgb(0, 0, 0)']}
+        maxValue={100}
+        size='medium'
+      />,
+    )
+    const track = container.querySelector('[data-size]')
+    expect(track!.getAttribute('data-size')).toBe('medium')
+  })
+})

package/src/widgets-v2/category/components/category-bar-stacked.tsx

@@ -0,0 +1,73 @@
+import { Box } from '@mui/material'
+import type { CategorySize } from '../types'
+import { styles } from '../style'
+
+export interface CategoryBarStackedProps {
+  /** One value per series. Zero values render no segment (visually + in the DOM). */
+  values: readonly number[]
+  /** One color per series. Resolved upstream by `CategoryUI.colorAt`. */
+  colors: readonly string[]
+  /**
+   * Shared denominator across all rows + series (or `maxOverride`). Same
+   * value `CategoryBar` uses — segments scale identically to single-bar rows
+   * so cross-row comparison is preserved.
+   */
+  maxValue: number
+  /** Visual density. Forwarded to the track styling; segments inherit height. */
+  size?: CategorySize
+}
+
+/**
+ * Stacked horizontal bar: one rounded track containing N square segments
+ * placed side-by-side. Each segment's width is `value_i / maxValue * 100%`
+ * and its left offset is the cumulative sum of preceding values. Square
+ * interior edges + the parent track's `overflow: hidden` + rounded radius
+ * mean the outer ends of the stacked bar match a single `CategoryBar` while
+ * interior segment boundaries meet cleanly.
+ *
+ * Pure presentation — selection / dimming is resolved upstream by the row
+ * via the `colors` prop. Each segment carries `data-bar-fill='true'` so the
+ * existing row-hover brightening selector still fires on every segment.
+ */
+export function CategoryBarStacked({
+  values,
+  colors,
+  maxValue,
+  size = 'small',
+}: CategoryBarStackedProps) {
+  // Cumulative offsets pre-computed up front so the render map function
+  // stays pure (no mutable closure variable — keeps the React Compiler
+  // immutability check happy).
+  const offsets: number[] = []
+  {
+    let acc = 0
+    for (const v of values) {
+      offsets.push(acc)
+      acc += v
+    }
+  }
+  return (
+    <Box sx={styles.bar[size]} data-size={size}>
+      {values.map((v, i) => {
+        if (v <= 0) return null
+        const leftPct = maxValue > 0 ? (offsets[i]! / maxValue) * 100 : 0
+        const pct = maxValue > 0 ? (v / maxValue) * 100 : 0
+        return (
+          <Box
+            // Segments are keyed by per-series colour (the only stable
+            // distinguishing field on this side) plus the segment index for
+            // when callers reuse palette colours across series.
+            key={`seg-${colors[i] ?? 'none'}-${i}`}
+            sx={styles.stackedSegment[size]}
+            style={{
+              left: `${leftPct}%`,
+              width: `${pct}%`,
+              backgroundColor: colors[i] ?? '',
+            }}
+            data-bar-fill='true'
+          />
+        )
+      })}
+    </Box>
+  )
+}

package/src/widgets-v2/category/components/category-bar.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { CategoryBar } from './category-bar'
+
+describe('<CategoryBar>', () => {
+  function getFill(container: HTMLElement): HTMLElement | null {
+    return container.querySelector('div[style*="width:"]')
+  }
+
+  it('fills proportionally to value / maxValue', () => {
+    const { container } = render(
+      <CategoryBar value={25} maxValue={100} color='rgb(0, 0, 0)' />,
+    )
+    const fill = getFill(container)
+    expect(fill).toBeTruthy()
+    expect(fill!.style.width).toBe('25%')
+  })
+
+  it('renders an empty bar when maxValue is 0 (no division by zero)', () => {
+    const { container } = render(
+      <CategoryBar value={5} maxValue={0} color='rgb(0, 0, 0)' />,
+    )
+    const fill = getFill(container)
+    expect(fill!.style.width).toBe('0%')
+  })
+
+  it('honors color prop as the bar background', () => {
+    const { container } = render(
+      <CategoryBar value={50} maxValue={100} color='rgb(255, 128, 0)' />,
+    )
+    const fill = getFill(container)
+    expect(fill!.style.backgroundColor).toBe('rgb(255, 128, 0)')
+  })
+
+  it('100% fill when value equals maxValue', () => {
+    const { container } = render(
+      <CategoryBar value={100} maxValue={100} color='rgb(0, 0, 0)' />,
+    )
+    expect(getFill(container)!.style.width).toBe('100%')
+  })
+
+  it('defaults to size=small (data-size="small" on the track)', () => {
+    const { container } = render(
+      <CategoryBar value={50} maxValue={100} color='rgb(0, 0, 0)' />,
+    )
+    const track = container.querySelector('[data-size]')
+    expect(track).toBeTruthy()
+    expect(track!.getAttribute('data-size')).toBe('small')
+  })
+
+  it('renders data-size="medium" when size="medium"', () => {
+    const { container } = render(
+      <CategoryBar
+        value={50}
+        maxValue={100}
+        color='rgb(0, 0, 0)'
+        size='medium'
+      />,
+    )
+    const track = container.querySelector('[data-size]')
+    expect(track).toBeTruthy()
+    expect(track!.getAttribute('data-size')).toBe('medium')
+  })
+})