@lovett/ui 0.0.11 → 0.2.0

package/src/__tests__/filter-menu.test.tsx

@@ -0,0 +1,175 @@
+/**
+ * FilterMenu + FilterChips — the UI over `filter-core`.
+ *
+ * The contract worth pinning is the part the source got wrong
+ * (`docs/design-briefs/tasks-board-header-primitives.md` §5):
+ *
+ *   - facet counts are computed against everything surviving the OTHER
+ *     columns' filters, so picking one option does not zero the rest of the
+ *     list and leave it unusable for widening a selection;
+ *   - a field the UI cannot edit is not OFFERED, rather than offered and dead;
+ *   - a chip is removable, and Clear appears only when something is filtered.
+ */
+import { useState } from 'react'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { FilterChipBar, FilterMenu } from '../filter-menu'
+import { defineColumns, type AnyColumnConfig, type FiltersState } from '../filter-core'
+import { mockGeometry, setViewport } from './helpers/geometry'
+
+interface Row {
+  id: string
+  lane: string
+  priority: string
+  title: string
+}
+
+const ROWS: Row[] = [
+  { id: '1', lane: 'todo', priority: 'high', title: 'Alpha' },
+  { id: '2', lane: 'todo', priority: 'low', title: 'Beta' },
+  { id: '3', lane: 'doing', priority: 'high', title: 'Gamma' },
+  { id: '4', lane: 'done', priority: 'low', title: 'Delta' },
+]
+
+const COLUMNS: ReadonlyArray<AnyColumnConfig<Row>> = defineColumns<Row>([
+  {
+    id: 'lane',
+    type: 'option',
+    displayName: 'Lane',
+    accessor: (row) => row.lane,
+    options: [
+      { value: 'todo', label: 'To do' },
+      { value: 'doing', label: 'Doing' },
+      { value: 'done', label: 'Done' },
+    ],
+  },
+  {
+    id: 'priority',
+    type: 'option',
+    displayName: 'Priority',
+    accessor: (row) => row.priority,
+    options: [
+      { value: 'high', label: 'High' },
+      { value: 'low', label: 'Low' },
+    ],
+  },
+  // A text column: real for `filterRows`, and deliberately NOT offered in the
+  // picker, because there is no text editor in this UI.
+  { id: 'title', type: 'text', displayName: 'Title', accessor: (row) => row.title },
+])
+
+function Harness() {
+  const [filters, setFilters] = useState<FiltersState>([])
+  return (
+    <>
+      <FilterMenu
+        rows={ROWS}
+        columns={COLUMNS}
+        filters={filters}
+        onFiltersChange={setFilters}
+      />
+      <FilterChipBar
+        rows={ROWS}
+        columns={COLUMNS}
+        filters={filters}
+        onFiltersChange={setFilters}
+      />
+    </>
+  )
+}
+
+describe('FilterMenu', () => {
+  let restore: () => void
+  beforeEach(() => {
+    restore = mockGeometry()
+    setViewport(1280, 800)
+  })
+  afterEach(() => restore())
+
+  it('offers only the fields it can actually edit', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+    await user.click(screen.getByRole('button', { name: 'Filter' }))
+
+    const fields = screen.getByRole('group', { name: 'Filter fields' })
+    expect(within(fields).getByRole('button', { name: 'Lane' })).toBeInTheDocument()
+    expect(within(fields).getByRole('button', { name: 'Priority' })).toBeInTheDocument()
+    // A text column has no editor here, so it is absent — not disabled.
+    expect(within(fields).queryByRole('button', { name: 'Title' })).toBeNull()
+  })
+
+  it('shows faceted counts, and picking one does not zero the others', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+    await user.click(screen.getByRole('button', { name: 'Filter' }))
+    await user.click(screen.getByRole('button', { name: 'Lane' }))
+
+    const list = screen.getByRole('group', { name: 'Lane' })
+    expect(within(list).getByRole('checkbox', { name: 'To do, 2 matching' })).toBeInTheDocument()
+    expect(within(list).getByRole('checkbox', { name: 'Doing, 1 matching' })).toBeInTheDocument()
+
+    await user.click(within(list).getByRole('checkbox', { name: 'To do, 2 matching' }))
+
+    // THE BUG THAT IS NOT HERE: counted against the fully filtered set, Doing
+    // would now read 0 and the list would be useless for widening.
+    const after = screen.getByRole('group', { name: 'Lane' })
+    expect(within(after).getByRole('checkbox', { name: 'Doing, 1 matching' })).toBeInTheDocument()
+    expect(
+      within(after).getByRole('checkbox', { name: 'To do, 2 matching', checked: true }),
+    ).toBeInTheDocument()
+  })
+
+  it('counts the active filters on the trigger', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+    await user.click(screen.getByRole('button', { name: 'Filter' }))
+    await user.click(screen.getByRole('button', { name: 'Lane' }))
+    await user.click(
+      within(screen.getByRole('group', { name: 'Lane' })).getByRole('checkbox', {
+        name: 'To do, 2 matching',
+      }),
+    )
+    await user.keyboard('{Escape}')
+    // The trigger is `[icon Filter]` with no count badge: the filter bar below
+    // the action bar is where applied filters are reported (action-bar §5).
+    expect(screen.getByRole('button', { name: 'Filter' })).toBeInTheDocument()
+  })
+})
+
+describe('FilterChips', () => {
+  let restore: () => void
+  beforeEach(() => {
+    restore = mockGeometry()
+    setViewport(1280, 800)
+  })
+  afterEach(() => restore())
+
+  it('renders nothing at all when nothing is filtered', () => {
+    render(<Harness />)
+    expect(screen.queryByRole('group', { name: 'Active filters' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Clear' })).toBeNull()
+  })
+
+  it('shows a removable chip once a value is picked', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+    await user.click(screen.getByRole('button', { name: 'Filter' }))
+    await user.click(screen.getByRole('button', { name: 'Lane' }))
+    await user.click(
+      within(screen.getByRole('group', { name: 'Lane' })).getByRole('checkbox', {
+        name: 'To do, 2 matching',
+      }),
+    )
+    await user.keyboard('{Escape}')
+
+    const chips = screen.getByRole('group', { name: 'Active filters' })
+    expect(within(chips).getByText('Lane')).toBeInTheDocument()
+    expect(within(chips).getByText('To do')).toBeInTheDocument()
+
+    await user.click(
+      within(chips).getByRole('button', { name: 'Remove filter: Lane is To do' }),
+    )
+    expect(screen.queryByRole('group', { name: 'Active filters' })).toBeNull()
+  })
+})

package/src/__tests__/gauge-ring.test.tsx

@@ -0,0 +1,233 @@
+/**
+ * GaugeRing — ADR-146 D5.
+ *
+ * Two classes of defect are pinned here, and both are invisible to
+ * typecheck, lint and build:
+ *
+ *   1. **A degenerate arc that silently drops the element.** `NaN` or
+ *      `Infinity` in `stroke-dasharray` does not render wrong — it renders
+ *      nothing, with every gate green. ADR-146's named cases (empty scale,
+ *      all-zero value, a single point, a stroke wider than the ring) each get
+ *      an assertion that the attribute is finite.
+ *   2. **Identity carried by colour alone (D10.1).** A banded ring must
+ *      expose its band as TEXT and in the accessible name, not only as a hue.
+ *      A refactor that drops the label leaves the ring looking correct and
+ *      the contract broken, so the label and the `aria-label` are asserted
+ *      together.
+ */
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { GaugeRing, type GaugeBand } from '../gauge-ring'
+
+const FIT_BANDS: readonly GaugeBand[] = [
+  { from: 0, tone: 'destructive', label: 'Weak' },
+  { from: 40, tone: 'warning', label: 'Fair' },
+  { from: 70, tone: 'success', label: 'Strong' },
+]
+
+/** Every dash length an SVG attribute carries must be a finite number. */
+function dashesAreFinite(container: HTMLElement): boolean {
+  const circles = Array.from(container.querySelectorAll('circle'))
+  expect(circles.length).toBe(2)
+  return circles.every((circle) => {
+    const dash = circle.getAttribute('stroke-dasharray') ?? ''
+    const r = circle.getAttribute('r') ?? ''
+    return (
+      Number.isFinite(Number(r)) &&
+      dash.split(/\s+/).every((part) => part !== '' && Number.isFinite(Number(part)))
+    )
+  })
+}
+
+describe('GaugeRing', () => {
+  it('renders the value, unit and an accessible name', () => {
+    render(<GaugeRing value={80} unit="%" />)
+    const gauge = screen.getByRole('img')
+    expect(gauge).toHaveAccessibleName('80% of 100%')
+    expect(gauge).toHaveTextContent('80%')
+  })
+
+  it('does not announce a degenerate scale as "of 0"', () => {
+    render(<GaugeRing value={10} max={Number.POSITIVE_INFINITY} />)
+    expect(screen.getByRole('img')).toHaveAccessibleName('10')
+  })
+
+  it('reserves the readout width for the widest reading, not the current one', () => {
+    const { container } = render(<GaugeRing value={7} max={100} size={88} />)
+    const readout = container.querySelector<HTMLElement>('[style*="min-width"]')
+    // "100" is three characters even while the gauge reads "7", so the slot
+    // does not shrink as the value ticks down.
+    expect(readout?.style.minWidth).toBe('3ch')
+  })
+
+  describe('bands', () => {
+    it('names the matched band in text and in the accessible name', () => {
+      render(<GaugeRing value={83} max={100} bands={FIT_BANDS} size={88} />)
+      const gauge = screen.getByRole('img')
+      expect(gauge).toHaveAccessibleName('83 of 100 — Strong')
+      // D10.1: the band is exposed as text, never as hue alone.
+      expect(screen.getByText('Strong')).toBeInTheDocument()
+    })
+
+    it('picks the band by the last bound at or below the value', () => {
+      const { rerender } = render(<GaugeRing value={39} bands={FIT_BANDS} />)
+      expect(screen.getByText('Weak')).toBeInTheDocument()
+
+      rerender(<GaugeRing value={40} bands={FIT_BANDS} />)
+      expect(screen.getByText('Fair')).toBeInTheDocument()
+
+      rerender(<GaugeRing value={70} bands={FIT_BANDS} />)
+      expect(screen.getByText('Strong')).toBeInTheDocument()
+    })
+
+    it('is order-independent and falls to the lowest band below every bound', () => {
+      const shuffled: readonly GaugeBand[] = [FIT_BANDS[2]!, FIT_BANDS[0]!, FIT_BANDS[1]!]
+      render(<GaugeRing value={-5} bands={shuffled} />)
+      expect(screen.getByText('Weak')).toBeInTheDocument()
+    })
+
+    it('lets an explicit caption win over the band label', () => {
+      render(<GaugeRing value={83} bands={FIT_BANDS} caption="/ 100" />)
+      expect(screen.getByText('/ 100')).toBeInTheDocument()
+      expect(screen.queryByText('Strong')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('arc geometry', () => {
+    it('paints a full turn by default and a partial turn when swept', () => {
+      const { container, rerender } = render(<GaugeRing value={100} size={88} strokeWidth={8} />)
+      const trackDash = () =>
+        container.querySelectorAll('circle')[0]?.getAttribute('stroke-dasharray') ?? ''
+
+      // A full ring leaves no gap.
+      expect(trackDash().split(' ')[1]).toBe('0')
+
+      rerender(<GaugeRing value={100} size={88} strokeWidth={8} sweep={270} />)
+      const [dash, gap] = trackDash().split(' ').map(Number)
+      // 270° is three quarters of the turn, so the gap is a third of the dash.
+      expect(gap! / dash!).toBeCloseTo(1 / 3, 6)
+    })
+
+    it('rotates the arc by startAngle from twelve o clock', () => {
+      const { container } = render(<GaugeRing value={50} startAngle={135} sweep={270} />)
+      expect(container.querySelector('g')?.getAttribute('transform')).toContain('rotate(45')
+    })
+
+    it('puts a 270deg gauge gap at the BOTTOM for startAngle 225, not 135', () => {
+      // An <svg> circle starts at 3 o'clock and runs clockwise; the component
+      // rotates by (-90 + startAngle). So the arc runs startAngle -> startAngle
+      // + sweep and the GAP sits before the start:
+      //   225 -> 135, gap 135 -> 225, centred on 180deg = bottom.  CORRECT
+      //   135 ->  45, gap  45 -> 135, centred on  90deg = right.   ROTATED
+      // Both render a plausible-looking gauge, so only a browser or this test
+      // catches the difference. The docstring quotes 225; keep them together.
+      const { container } = render(<GaugeRing value={50} startAngle={225} sweep={270} />)
+      const transform = container.querySelector('g')?.getAttribute('transform') ?? ''
+      expect(transform).toContain('rotate(135')
+    })
+
+    it('butts the cap at zero so a round cap cannot paint a stray dot', () => {
+      const { container } = render(<GaugeRing value={0} />)
+      const value = container.querySelectorAll('circle')[1]
+      expect(value?.getAttribute('stroke-linecap')).toBe('butt')
+      expect(value?.getAttribute('stroke-dasharray')?.split(' ')[0]).toBe('0')
+    })
+
+    it('rounds the cap once the arc has length', () => {
+      const { container } = render(<GaugeRing value={1} />)
+      expect(container.querySelectorAll('circle')[1]?.getAttribute('stroke-linecap')).toBe('round')
+    })
+  })
+
+  describe('degenerate input never drops the element', () => {
+    it.each<[string, React.ComponentProps<typeof GaugeRing>]>([
+      ['all-zero', { value: 0, max: 0 }],
+      ['negative value', { value: -40 }],
+      ['over the top of scale', { value: 400 }],
+      ['non-finite value', { value: Number.NaN }],
+      ['non-finite max', { value: 10, max: Number.POSITIVE_INFINITY }],
+      ['stroke wider than the ring', { value: 50, size: 10, strokeWidth: 40 }],
+      ['zero size', { value: 50, size: 0 }],
+      ['non-finite size', { value: 50, size: Number.NaN }],
+      ['non-finite stroke', { value: 50, strokeWidth: Number.NaN }],
+      ['negative size', { value: 50, size: -30 }],
+      ['zero sweep', { value: 50, sweep: 0 }],
+      ['non-finite sweep', { value: 50, sweep: Number.NaN }],
+      ['non-finite start angle', { value: 50, startAngle: Number.NaN }],
+    ])('%s', (_name, props) => {
+      const { container } = render(<GaugeRing {...props} />)
+      expect(dashesAreFinite(container)).toBe(true)
+      expect(screen.getByRole('img')).toBeInTheDocument()
+    })
+  })
+
+  describe('CompletionRing parity', () => {
+    it('hides the readout on showLabel={false}', () => {
+      render(<GaugeRing value={80} unit="%" showLabel={false} />)
+      // Not `toHaveTextContent('')`, which passes on any content.
+      expect(screen.getByRole('img').textContent).toBe('')
+      // The accessible name survives — the value is still announced.
+      expect(screen.getByRole('img')).toHaveAccessibleName('80% of 100%')
+    })
+
+    it('lets an explicit label node replace the readout entirely', () => {
+      render(<GaugeRing value={80} unit="%" label={<span>done</span>} />)
+      expect(screen.getByText('done')).toBeInTheDocument()
+      expect(screen.getByRole('img')).not.toHaveTextContent('80')
+    })
+
+    it('defaults the track to a structural token, never a surface one', () => {
+      // MEASURED in a browser: the old `rgb(var(--muted))` default resolved
+      // through `--muted: var(--surface-inset)` to the recessed-well surface,
+      // so a gauge sitting in a well stroked its track in exactly the colour
+      // behind it — 242,242,244 on 242,242,244 in light, 45,45,48 on 45,45,48
+      // in dark, 1.00:1 in BOTH themes, i.e. a 0% gauge with no ring at all.
+      // jsdom can only see the attribute string; the relationship between
+      // that token and the surfaces is pinned in `token-shape.test.ts`.
+      const { container } = render(<GaugeRing value={0} />)
+      const track = container.querySelectorAll('circle')[0]
+      expect(track?.getAttribute('stroke')).toBe('rgb(var(--border-strong))')
+    })
+
+    it('accepts whole token strings for the track and fill', () => {
+      const { container } = render(
+        <GaugeRing value={50} trackColor="rgb(var(--border))" fillColor="rgb(var(--series-1))" />,
+      )
+      const circles = container.querySelectorAll('circle')
+      expect(circles[0]?.getAttribute('stroke')).toBe('rgb(var(--border))')
+      expect(circles[1]?.getAttribute('stroke')).toBe('rgb(var(--series-1))')
+    })
+
+    it('sizes the wrapper from the size prop via inline style, not a class', () => {
+      const { container } = render(<GaugeRing value={50} size={88} />)
+      const wrapper = container.firstElementChild as HTMLElement
+      expect(wrapper.style.width).toBe('88px')
+      expect(wrapper.style.height).toBe('88px')
+      expect(wrapper.className).not.toMatch(/\[88px\]/)
+    })
+  })
+
+  describe('motion', () => {
+    it('tweens the arc under motion-safe with ease-out, never spring', () => {
+      const { container } = render(<GaugeRing value={50} />)
+      const value = container.querySelectorAll('circle')[1] as SVGCircleElement
+      expect(value.getAttribute('class')).toContain(
+        'motion-safe:transition-[stroke-dasharray]',
+      )
+      expect(value.style.transitionTimingFunction).toBe('var(--ease-out)')
+      expect(value.style.transitionDuration).toBe('var(--dur-base)')
+      expect(value.style.transitionTimingFunction).not.toContain('spring')
+    })
+
+    it('kills the transition outright under prefers-reduced-motion', () => {
+      const { container } = render(<GaugeRing value={50} />)
+      const value = container.querySelectorAll('circle')[1] as SVGCircleElement
+      // The duration and easing are INLINE, so they apply in every media
+      // state. `transition-property` initially computes to `all`, so without
+      // this class a reduce user would tween every animatable property --
+      // more motion than a no-preference user, the exact inverse of D9.
+      expect(value.getAttribute('class')).toContain('motion-reduce:transition-none')
+    })
+  })
+})