@lovett/ui 0.0.11 → 0.2.0

package/src/__tests__/board.test.tsx

@@ -0,0 +1,420 @@
+/**
+ * The board kit — Board / BoardColumn / TaskCard / ProgressLedger, plus the
+ * tint-ladder helper (ADR-146 slice A).
+ *
+ * These pin the contracts that are easy to break silently and that neither
+ * typecheck nor lint can see:
+ *
+ *   - the ledger is never colour-only (count AND percentage as text)
+ *   - `red` can never become a board hue
+ *   - a card's rows really are optional, so an item with nothing renders a
+ *     title and no empty scaffolding
+ *   - media declares its aspect ratio up front and degrades to a placeholder
+ *     rather than a collapsed box
+ *   - every icon-only control is named
+ *
+ * `css: false` in this package's vitest config, so nothing here asserts a
+ * painted value — that is the eyeball pass's job, not this file's.
+ */
+
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { Board } from '../board'
+import { TaskCard } from '../task-card'
+import { ProgressLedger } from '../progress-ledger'
+import { BOARD_HUE_KEYS, hueClass, hueForKey } from '../hue'
+
+describe('hue ladder', () => {
+  it('excludes red — it is byte-identical to --accent in light mode', () => {
+    expect(BOARD_HUE_KEYS).not.toContain('red')
+    expect(BOARD_HUE_KEYS.length).toBeGreaterThan(0)
+  })
+
+  it('returns BOTH classes, because .hue-blue alone renders slate', () => {
+    expect(hueClass('blue')).toBe('hue hue-blue')
+  })
+
+  it('is deterministic per identity', () => {
+    expect(hueForKey('Dana Okafor')).toBe(hueForKey('Dana Okafor'))
+    expect(BOARD_HUE_KEYS).toContain(hueForKey('Dana Okafor'))
+  })
+})
+
+describe('ProgressLedger', () => {
+  const segments = [
+    {
+      id: 'g1',
+      label: 'Design',
+      cells: [
+        { id: 't1', done: true },
+        { id: 't2', done: true },
+      ],
+    },
+    {
+      id: 'g2',
+      label: 'Build',
+      cells: [
+        { id: 't3', done: true },
+        { id: 't4', done: false, current: true },
+        { id: 't5', done: false },
+      ],
+    },
+  ]
+
+  it('carries the count and the percentage as TEXT, not only as colour', () => {
+    render(<ProgressLedger segments={segments} phase="Building" />)
+    expect(screen.getByText('3/5')).toBeInTheDocument()
+    expect(screen.getByText('60%')).toBeInTheDocument()
+    expect(screen.getByText('Building')).toBeInTheDocument()
+  })
+
+  it('names itself for assistive tech with the same numbers', () => {
+    render(<ProgressLedger segments={segments} ariaLabel="Monitoring dashboard" />)
+    expect(
+      screen.getByRole('group', {
+        name: 'Progress for Monitoring dashboard: 3 of 5 done, 60 percent',
+      }),
+    ).toBeInTheDocument()
+  })
+
+  it('emits the group when a segment is activated', () => {
+    const onSelect = vi.fn()
+    render(<ProgressLedger segments={segments} onSelectSegment={onSelect} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Build: 1 of 3 done' }))
+    expect(onSelect).toHaveBeenCalledWith('g2')
+  })
+
+  it('gives an interactive segment a 24px hit area, not a 12px one', () => {
+    render(<ProgressLedger segments={segments} onSelectSegment={vi.fn()} />)
+    // The cells are 12px tall by design (countable, not tappable). When the
+    // run becomes a control it has to clear the 24px accessibility floor, and
+    // the primitive enforces that rather than asking each caller to.
+    expect(screen.getByRole('button', { name: 'Design: 2 of 2 done' })).toHaveStyle({
+      minBlockSize: '24px',
+    })
+  })
+
+  it('renders no segment buttons when there is nowhere to go', () => {
+    // Interactivity is OPT-IN. Six dead 12px tab stops shipped on the Tasks
+    // board because the consumer passed an empty handler; the primitive's job
+    // is to make the inert case the default, and this pins it.
+    render(<ProgressLedger segments={segments} />)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('survives an item with no tasks rather than dividing by zero', () => {
+    render(<ProgressLedger segments={[]} />)
+    expect(screen.getByText('0/0')).toBeInTheDocument()
+    expect(screen.getByText('0%')).toBeInTheDocument()
+  })
+})
+
+describe('TaskCard', () => {
+  it('renders a title alone — every other row is optional', () => {
+    const { container } = render(<TaskCard title="Quarterly reporting refresh" />)
+    expect(
+      screen.getByRole('heading', { name: 'Quarterly reporting refresh' }),
+    ).toBeInTheDocument()
+    // No footer, no tag row, no media: the card reserves nothing for absent data.
+    expect(container.querySelectorAll('img')).toHaveLength(0)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('declares the media aspect ratio up front so it cannot reflow on load', () => {
+    const { container } = render(
+      <TaskCard
+        title="Spring intake"
+        media={[
+          { src: 'blob:one', alt: 'Hero' },
+          { src: 'blob:two', alt: 'Alt' },
+        ]}
+      />,
+    )
+    const frame = container.querySelector('img')?.parentElement
+    expect(frame).toHaveStyle({ aspectRatio: '16 / 10' })
+    // Two images: the first renders, the rest are badged.
+    expect(screen.getByAltText('Hero')).toBeInTheDocument()
+    expect(screen.getByText('+1')).toBeInTheDocument()
+  })
+
+  it('falls back to a placeholder, not a collapsed box, when an image fails', () => {
+    render(<TaskCard title="Spring intake" media={[{ src: 'blob:gone', alt: 'Hero' }]} />)
+    fireEvent.error(screen.getByAltText('Hero'))
+    expect(screen.getByText('Image unavailable: Hero')).toBeInTheDocument()
+  })
+
+  it('names the drag grip, so keyboard drag is reachable and announced', () => {
+    render(
+      <TaskCard
+        title="Monitoring dashboard"
+        drag={{ activatorProps: { role: 'button', tabIndex: 0 } }}
+      />,
+    )
+    expect(
+      screen.getByRole('button', { name: 'Reorder Monitoring dashboard' }),
+    ).toBeInTheDocument()
+  })
+
+  it('does not conjure group 1 for a grip alone — it rides the title row', () => {
+    const { container } = render(
+      <TaskCard
+        title="Monitoring dashboard"
+        drag={{ activatorProps: { role: 'button', tabIndex: 0 } }}
+      />,
+    )
+    const grip = screen.getByRole('button', { name: 'Reorder Monitoring dashboard' })
+    const heading = screen.getByRole('heading', { name: 'Monitoring dashboard' })
+    // Same row: the grip's parent contains the heading's own column.
+    expect(grip.parentElement).toContainElement(heading)
+    // The card is title + nothing else, so it renders exactly one group.
+    const article = container.querySelector('article')
+    expect(article?.children).toHaveLength(1)
+  })
+
+  it('keeps group 1 when it has real content, with the grip in it', () => {
+    render(
+      <TaskCard
+        title="Monitoring dashboard"
+        tags={['design']}
+        drag={{ activatorProps: { role: 'button', tabIndex: 0 } }}
+      />,
+    )
+    const grip = screen.getByRole('button', { name: 'Reorder Monitoring dashboard' })
+    expect(grip.parentElement).toContainElement(screen.getByText('#design'))
+  })
+
+  it('lets a long title wrap rather than clipping it with no way to read on', () => {
+    render(<TaskCard title="A title long enough to need a third line on a narrow column" />)
+    expect(
+      screen.getByRole('heading', {
+        name: 'A title long enough to need a third line on a narrow column',
+      }),
+    ).not.toHaveClass('line-clamp-2')
+  })
+
+  it('renders counts and a consumer footer control side by side', () => {
+    render(
+      <TaskCard
+        title="Saved filter presets"
+        counts={[{ icon: null, value: 4, label: 'comments' }]}
+        footerEnd={<button type="button">Vote</button>}
+      />,
+    )
+    expect(screen.getByText('4')).toBeInTheDocument()
+    expect(screen.getByText('comments')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Vote' })).toBeInTheDocument()
+  })
+
+  it('caps the tag row and reports the overflow', () => {
+    render(<TaskCard title="x" tags={['Alpha', 'Beta', 'Gamma', 'Delta']} />)
+    expect(screen.getByText('#alpha')).toBeInTheDocument()
+    expect(screen.getByText('+1')).toBeInTheDocument()
+  })
+
+  /* ── The card is clickable, and it is NOT a drag handle ──────────────── */
+
+  it('opens from the card body, and the title does not open it twice', () => {
+    const onOpen = vi.fn()
+    const { container } = render(
+      <TaskCard
+        title="Monitoring dashboard"
+        note="They liked the Behance set."
+        onOpen={onOpen}
+      />,
+    )
+    expect(container.querySelector('article')).toHaveAttribute('data-interactive', 'true')
+
+    fireEvent.click(screen.getByText('They liked the Behance set.'))
+    expect(onOpen).toHaveBeenCalledTimes(1)
+
+    // The title is the KEYBOARD control and calls onOpen itself. The card's
+    // own handler must stand down behind it rather than firing a second time.
+    fireEvent.click(screen.getByRole('button', { name: 'Monitoring dashboard' }))
+    expect(onOpen).toHaveBeenCalledTimes(2)
+  })
+
+  it('leaves a control inside the card to itself', () => {
+    const onOpen = vi.fn()
+    render(
+      <TaskCard
+        title="Saved filter presets"
+        onOpen={onOpen}
+        footerEnd={<button type="button">Vote</button>}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Vote' }))
+    expect(onOpen).not.toHaveBeenCalled()
+  })
+
+  it('claims no affordance at all without onOpen', () => {
+    const { container } = render(<TaskCard title="Quarterly reporting refresh" />)
+    expect(container.querySelector('article')).not.toHaveAttribute('data-interactive')
+  })
+
+  it('leaves the shadow to CSS, so the hover and focus steps can win', () => {
+    // An inline box-shadow outranks every stylesheet rule, which is why the
+    // hover step had never applied. `data-overlay` is what selects the heavier
+    // one now — the element must carry NO inline box-shadow at all.
+    const { container, rerender } = render(<TaskCard title="Spring intake" />)
+    const article = container.querySelector('article')
+    expect(article?.style.boxShadow).toBe('')
+    expect(article).not.toHaveAttribute('data-overlay')
+
+    rerender(<TaskCard title="Spring intake" isOverlay />)
+    expect(container.querySelector('article')?.style.boxShadow).toBe('')
+    expect(container.querySelector('article')).toHaveAttribute('data-overlay', 'true')
+  })
+
+  it('starts a drag from the grip and NEVER from the card body', () => {
+    // The defect this pins: `{...dragHandleProps}` on the <article> made every
+    // pointer-down on the card the start of a drag, so the card could not be
+    // clicked and read `cursor: grab` everywhere.
+    const onPointerDown = vi.fn()
+    const { container } = render(
+      <TaskCard
+        title="Monitoring dashboard"
+        drag={{ activatorProps: { role: 'button', tabIndex: 0, onPointerDown } }}
+      />,
+    )
+    const article = container.querySelector('article')
+    expect(article).not.toHaveAttribute('role')
+    expect(article).not.toHaveAttribute('tabindex')
+
+    fireEvent.pointerDown(article!)
+    expect(onPointerDown).not.toHaveBeenCalled()
+
+    fireEvent.pointerDown(
+      screen.getByRole('button', { name: 'Reorder Monitoring dashboard' }),
+    )
+    expect(onPointerDown).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('Board', () => {
+  const columns = [
+    { id: 'planned', label: 'Planned', hue: 'slate' as const },
+    { id: 'building', label: 'Building', hue: 'blue' as const },
+  ]
+
+  it('renders one column per spec, with its count and its cards', () => {
+    render(
+      <Board
+        columns={columns}
+        items={{ planned: ['a'], building: [] }}
+        draggable={false}
+        renderCard={({ itemId }) => <TaskCard title={`Item ${itemId}`} />}
+      />,
+    )
+    const planned = screen.getByRole('region', { name: 'Planned' })
+    expect(within(planned).getByText('1')).toBeInTheDocument()
+    expect(within(planned).getByRole('heading', { name: 'Item a' })).toBeInTheDocument()
+  })
+
+  it('invites an action in an empty column instead of showing a mood', () => {
+    render(
+      <Board
+        columns={columns}
+        items={{ planned: [], building: [] }}
+        // An empty lane keeps its place only on request now — a draggable
+        // board wants it (an omitted lane is a missing drop target), a
+        // read-only one usually does not.
+        showEmptyColumns
+        draggable={false}
+        renderCard={() => null}
+      />,
+    )
+    expect(
+      screen.getByText('Nothing in Building yet. Drag one here, or add one.'),
+    ).toBeInTheDocument()
+  })
+
+  it('names the collapse and add controls, which are icon-only', () => {
+    const onAdd = vi.fn()
+    const onToggle = vi.fn()
+    render(
+      <Board
+        columns={[{ ...columns[0]!, onAdd }]}
+        items={{ planned: [] }}
+        showEmptyColumns
+        draggable={false}
+        onToggleCollapsed={onToggle}
+        renderCard={() => null}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Add to Planned' }))
+    expect(onAdd).toHaveBeenCalled()
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse Planned' }))
+    expect(onToggle).toHaveBeenCalledWith('planned')
+  })
+
+  it('hides a collapsed column body but keeps its header and count', () => {
+    render(
+      <Board
+        columns={columns}
+        items={{ planned: ['a'], building: [] }}
+        draggable={false}
+        collapsedColumnIds={['planned']}
+        onToggleCollapsed={vi.fn()}
+        renderCard={({ itemId }) => <TaskCard title={`Item ${itemId}`} />}
+      />,
+    )
+    expect(screen.queryByRole('heading', { name: 'Item a' })).not.toBeInTheDocument()
+    const planned = screen.getByRole('region', { name: 'Planned' })
+    expect(within(planned).getByText('1')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Expand Planned' })).toBeInTheDocument()
+  })
+
+  it('wires dnd-kit to the grip, leaving the card a plain article', () => {
+    // End-to-end version of the TaskCard test above: `dragAttributes` used to
+    // be `{ ...attributes, ...listeners }` — identical to `dragHandleProps` —
+    // so the "split" that exists to keep role/tabIndex off the card was not a
+    // split at all.
+    const { container } = render(
+      <Board
+        columns={columns}
+        items={{ planned: ['a'], building: [] }}
+        onMove={vi.fn()}
+        labelForItem={(itemId) => `Item ${itemId}`}
+        renderCard={({ itemId, drag }) => (
+          <TaskCard title={`Item ${itemId}`} {...(drag ? { drag } : {})} />
+        )}
+      />,
+    )
+    const article = container.querySelector('article')
+    expect(article).not.toHaveAttribute('role')
+    expect(article).not.toHaveAttribute('tabindex')
+    expect(article).not.toHaveAttribute('aria-roledescription')
+
+    // The grip is the handle, so it is what assistive tech is told about.
+    const grip = screen.getByRole('button', { name: 'Reorder Item a' })
+    expect(grip).toHaveAttribute('aria-roledescription')
+    expect(grip).toHaveAttribute('aria-describedby')
+  })
+
+  it('marks a collapsed column so ONE lane can shrink on its own', () => {
+    // The scroller stretches its items, so an expanded lane reaches the bottom
+    // of the page. Without a per-item hook a collapsed lane inherits the
+    // tallest row's height and only the all-collapsed case appears to work —
+    // which is how it was reported. `[data-collapsed]` is what the CSS's
+    // `align-self: start` hangs on, and it is invisible to typecheck and lint,
+    // so it is pinned here.
+    render(
+      <Board
+        columns={columns}
+        items={{ planned: ['a'], building: ['b'] }}
+        draggable={false}
+        collapsedColumnIds={['planned']}
+        onToggleCollapsed={vi.fn()}
+        renderCard={({ itemId }) => <TaskCard title={`Item ${itemId}`} />}
+      />,
+    )
+    expect(screen.getByRole('region', { name: 'Planned' })).toHaveAttribute(
+      'data-collapsed',
+      'true',
+    )
+    // And the neighbour is NOT marked — the attribute is per lane, not per board.
+    expect(screen.getByRole('region', { name: 'Building' })).not.toHaveAttribute(
+      'data-collapsed',
+    )
+  })
+})