@lovett/ui 0.0.10 → 0.1.0

package/src/__tests__/display-popover.test.tsx

@@ -0,0 +1,195 @@
+/**
+ * DisplayPopover + its row primitives.
+ *
+ * The contract is mostly about what CANNOT happen, because each of these
+ * primitives exists to make one of the source's defects unreachable
+ * (`docs/design-briefs/tasks-board-header-primitives.md` §4):
+ *
+ *   - `ToggleRow` owns the id/htmlFor pair, so clicking the LABEL toggles.
+ *     Theirs is hand-written at three call sites.
+ *   - every `ChipToggleGroup` chip is `type="button"` with `aria-pressed`.
+ *     Theirs is neither — inside a form it submits, and a screen reader is
+ *     told nothing about which chips are on.
+ *   - `PopoverFooterActions` renders NO primary unless one is supplied.
+ *     Theirs is a `<button>` with no `onClick` in three files.
+ *   - the panel keeps Tab inside itself, closes on Escape and hands focus
+ *     back to its trigger.
+ */
+import { useState } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {
+  ChipToggleGroup,
+  DisplayPopover,
+  PopoverFooterActions,
+  SelectRow,
+  ToggleRow,
+} from '../display-popover'
+import { mockGeometry, setViewport } from './helpers/geometry'
+
+describe('ToggleRow', () => {
+  it('pairs the label with the control so clicking the label toggles', async () => {
+    const user = userEvent.setup()
+    const onCheckedChange = vi.fn()
+    render(
+      <ToggleRow
+        label="Show empty columns"
+        checked={false}
+        onCheckedChange={onCheckedChange}
+      />,
+    )
+
+    // getByLabelText only resolves when the htmlFor/id pair is real.
+    const control = screen.getByLabelText('Show empty columns')
+    expect(control).toHaveAttribute('type', 'checkbox')
+
+    await user.click(screen.getByText('Show empty columns'))
+    expect(onCheckedChange).toHaveBeenCalledWith(true)
+  })
+
+  it('mints a unique id per row, so two rows do not collide', () => {
+    render(
+      <>
+        <ToggleRow label="First" checked={false} onCheckedChange={() => {}} />
+        <ToggleRow label="Second" checked={false} onCheckedChange={() => {}} />
+      </>,
+    )
+    const first = screen.getByLabelText('First')
+    const second = screen.getByLabelText('Second')
+    expect(first.id).not.toBe('')
+    expect(first.id).not.toBe(second.id)
+  })
+})
+
+describe('SelectRow', () => {
+  it('names the control from the row label when none is given', () => {
+    render(
+      <SelectRow
+        label="Grouping"
+        value="column"
+        onValueChange={() => {}}
+        options={[
+          { value: 'column', label: 'Column' },
+          { value: 'assignee', label: 'Assignee' },
+        ]}
+      />,
+    )
+    expect(screen.getByRole('combobox', { name: 'Grouping' })).toBeInTheDocument()
+  })
+})
+
+describe('ChipToggleGroup', () => {
+  it('gives every chip type=button and aria-pressed', () => {
+    render(
+      <ChipToggleGroup
+        aria-label="Card properties"
+        items={[
+          { key: 'priority', label: 'Priority' },
+          { key: 'due', label: 'Due date' },
+        ]}
+        value={{ priority: true }}
+        onToggle={() => {}}
+      />,
+    )
+    const priority = screen.getByRole('button', { name: 'Priority', pressed: true })
+    const due = screen.getByRole('button', { name: 'Due date', pressed: false })
+    // A chip without type="button" submits the form it sits in.
+    expect(priority).toHaveAttribute('type', 'button')
+    expect(due).toHaveAttribute('type', 'button')
+  })
+
+  it('reports the key and the NEXT state, not just the key', async () => {
+    const user = userEvent.setup()
+    const onToggle = vi.fn()
+    render(
+      <ChipToggleGroup
+        aria-label="Card properties"
+        items={[{ key: 'priority', label: 'Priority' }]}
+        value={{ priority: true }}
+        onToggle={onToggle}
+      />,
+    )
+    await user.click(screen.getByRole('button', { name: 'Priority' }))
+    expect(onToggle).toHaveBeenCalledWith('priority', false)
+  })
+})
+
+describe('PopoverFooterActions', () => {
+  it('renders no primary action when none is supplied', () => {
+    render(<PopoverFooterActions onReset={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Reset to defaults' })).toBeInTheDocument()
+    // Exactly one button: the dead "Set default for everyone" cannot happen.
+    expect(screen.getAllByRole('button')).toHaveLength(1)
+  })
+
+  it('renders the primary when one is supplied', () => {
+    const onClick = vi.fn()
+    render(
+      <PopoverFooterActions
+        onReset={() => {}}
+        primaryAction={{ label: 'Apply', onClick }}
+      />,
+    )
+    expect(screen.getAllByRole('button')).toHaveLength(2)
+  })
+
+  it('disables reset when the panel is already at its defaults', () => {
+    render(<PopoverFooterActions onReset={() => {}} resetDisabled />)
+    expect(screen.getByRole('button', { name: 'Reset to defaults' })).toBeDisabled()
+  })
+})
+
+describe('DisplayPopover', () => {
+  let restore: () => void
+
+  beforeEach(() => {
+    restore = mockGeometry()
+    setViewport(1280, 800)
+  })
+  afterEach(() => restore())
+
+  function Panel() {
+    const [flag, setFlag] = useState(false)
+    return (
+      <DisplayPopover
+        label="Display options"
+        trigger={<button type="button">Display</button>}
+      >
+        <DisplayPopover.Section>
+          <ToggleRow label="Show empty columns" checked={flag} onCheckedChange={setFlag} />
+        </DisplayPopover.Section>
+        <DisplayPopover.Section>
+          <PopoverFooterActions onReset={() => setFlag(false)} />
+        </DisplayPopover.Section>
+      </DisplayPopover>
+    )
+  }
+
+  it('opens, closes on Escape, and returns focus to its trigger', async () => {
+    const user = userEvent.setup()
+    render(<Panel />)
+    const trigger = screen.getByRole('button', { name: 'Display' })
+
+    await user.click(trigger)
+    expect(screen.getByRole('dialog', { name: 'Display options' })).toBeInTheDocument()
+
+    await user.keyboard('{Escape}')
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(trigger).toHaveFocus()
+  })
+
+  it('keeps Tab inside the panel', async () => {
+    const user = userEvent.setup()
+    render(<Panel />)
+    await user.click(screen.getByRole('button', { name: 'Display' }))
+
+    const panel = screen.getByRole('dialog', { name: 'Display options' })
+    const reset = screen.getByRole('button', { name: 'Reset to defaults' })
+
+    reset.focus()
+    await user.tab()
+    // Without the trap, focus walks out of the portal onto the page behind.
+    expect(panel.contains(document.activeElement)).toBe(true)
+  })
+})

package/src/__tests__/display-store.test.tsx

@@ -0,0 +1,208 @@
+/**
+ * createDisplayStore — per-scope display settings, by context.
+ *
+ * Two contracts, both of them inversions of a source defect
+ * (`docs/design-briefs/tasks-board-header-primitives.md` §4):
+ *
+ *   1. TWO PROVIDERS ARE TWO PANELS. Their cards subscribe to a module-level
+ *      singleton, so two boards on one page cannot hold different settings.
+ *      The test below renders two and changes one.
+ *   2. PERSISTENCE IS PER SCOPE and VALIDATED. A key from another scope never
+ *      leaks; a hand-edited value that is the wrong type or outside the
+ *      allow-list falls back to the default instead of reaching a component.
+ */
+import { describe, expect, it, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { createDisplayStore } from '../display-store'
+
+type Settings = {
+  readonly grouping: 'column' | 'assignee'
+  readonly showEmpty: boolean
+  /** A MEASUREMENT — a size the operator drags rather than picks. */
+  readonly panelSize: number
+}
+
+const DEFAULTS: Settings = { grouping: 'column', showEmpty: true, panelSize: 560 }
+
+const store = createDisplayStore<Settings>(
+  'test',
+  DEFAULTS,
+  { grouping: ['column', 'assignee'] },
+  {
+    // An allow-list cannot express a RANGE, so a numeric setting sanitises on
+    // the migration seam and anything that is not a plausible size falls back
+    // to the default exactly as a bad enum would.
+    panelSize: (raw) =>
+      typeof raw === 'number' && Number.isFinite(raw) && raw >= 1 && raw <= 8000
+        ? Math.round(raw)
+        : undefined,
+  },
+)
+
+function Panel({ name }: { name: string }) {
+  const { settings, set, reset, isDefault } = store.useDisplay()
+  return (
+    <div>
+      <span data-testid={`${name}-grouping`}>{settings.grouping}</span>
+      <span data-testid={`${name}-empty`}>{String(settings.showEmpty)}</span>
+      <span data-testid={`${name}-default`}>{String(isDefault)}</span>
+      <button type="button" onClick={() => set('grouping', 'assignee')}>
+        {`${name}: group by assignee`}
+      </button>
+      <button type="button" onClick={() => set('showEmpty', false)}>
+        {`${name}: hide empty`}
+      </button>
+      <span data-testid={`${name}-size`}>{String(settings.panelSize)}</span>
+      <button type="button" onClick={() => set('panelSize', 820)}>
+        {`${name}: widen`}
+      </button>
+      <button type="button" onClick={reset}>{`${name}: reset`}</button>
+    </div>
+  )
+}
+
+describe('createDisplayStore', () => {
+  beforeEach(() => window.localStorage.clear())
+
+  it('namespaces its key by name and scope', () => {
+    expect(store.storageKey('brn_1')).toBe('workspace:test:brn_1:display')
+  })
+
+  it('persists a change and reads it back on the next mount', async () => {
+    const user = userEvent.setup()
+    const { unmount } = render(
+      <store.Provider scope="brn_1">
+        <Panel name="a" />
+      </store.Provider>,
+    )
+    await user.click(screen.getByRole('button', { name: 'a: group by assignee' }))
+    expect(screen.getByTestId('a-grouping')).toHaveTextContent('assignee')
+    unmount()
+
+    render(
+      <store.Provider scope="brn_1">
+        <Panel name="b" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('b-grouping')).toHaveTextContent('assignee')
+  })
+
+  it('partitions by scope — one brand never sees another brand settings', async () => {
+    const user = userEvent.setup()
+    const { unmount } = render(
+      <store.Provider scope="brn_1">
+        <Panel name="a" />
+      </store.Provider>,
+    )
+    await user.click(screen.getByRole('button', { name: 'a: group by assignee' }))
+    unmount()
+
+    render(
+      <store.Provider scope="brn_2">
+        <Panel name="b" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('b-grouping')).toHaveTextContent('column')
+  })
+
+  it('two providers hold independent settings', async () => {
+    const user = userEvent.setup()
+    render(
+      <>
+        <store.Provider>
+          <Panel name="left" />
+        </store.Provider>
+        <store.Provider>
+          <Panel name="right" />
+        </store.Provider>
+      </>,
+    )
+    await user.click(screen.getByRole('button', { name: 'left: group by assignee' }))
+    expect(screen.getByTestId('left-grouping')).toHaveTextContent('assignee')
+    // The singleton trap: with a module-level store this would read "assignee".
+    expect(screen.getByTestId('right-grouping')).toHaveTextContent('column')
+  })
+
+  it('drops a persisted value that is the wrong type or off the allow-list', () => {
+    window.localStorage.setItem(
+      store.storageKey('brn_3'),
+      JSON.stringify({ grouping: 'sideways', showEmpty: 'yes' }),
+    )
+    render(
+      <store.Provider scope="brn_3">
+        <Panel name="c" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('c-grouping')).toHaveTextContent('column')
+    expect(screen.getByTestId('c-empty')).toHaveTextContent('true')
+  })
+
+  it('persists a numeric setting and reads it back', async () => {
+    const user = userEvent.setup()
+    const { unmount } = render(
+      <store.Provider scope="brn_n">
+        <Panel name="n" />
+      </store.Provider>,
+    )
+    await user.click(screen.getByRole('button', { name: 'n: widen' }))
+    expect(screen.getByTestId('n-size')).toHaveTextContent('820')
+    unmount()
+
+    render(
+      <store.Provider scope="brn_n">
+        <Panel name="n2" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('n2-size')).toHaveTextContent('820')
+  })
+
+  it('drops a stored size that is not a size', () => {
+    // `NaN` is `typeof 'number'` and survives a hand edit; a pane laid out at
+    // `NaN` px has no width at all, so it is rejected like any other value
+    // that does not hold up.
+    for (const [scope, stored] of [
+      ['brn_n1', Number.NaN],
+      ['brn_n2', -40],
+      ['brn_n3', 99999],
+      ['brn_n4', '560'],
+    ] as const) {
+      window.localStorage.setItem(
+        store.storageKey(scope),
+        JSON.stringify({ panelSize: stored }),
+      )
+      const view = render(
+        <store.Provider scope={scope}>
+          <Panel name={scope} />
+        </store.Provider>,
+      )
+      expect(screen.getByTestId(`${scope}-size`)).toHaveTextContent('560')
+      view.unmount()
+    }
+  })
+
+  it('survives a payload that is not an object at all', () => {
+    window.localStorage.setItem(store.storageKey('brn_4'), 'not json {{{')
+    render(
+      <store.Provider scope="brn_4">
+        <Panel name="d" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('d-grouping')).toHaveTextContent('column')
+  })
+
+  it('reports isDefault, and reset returns to it', async () => {
+    const user = userEvent.setup()
+    render(
+      <store.Provider scope="brn_5">
+        <Panel name="e" />
+      </store.Provider>,
+    )
+    expect(screen.getByTestId('e-default')).toHaveTextContent('true')
+    await user.click(screen.getByRole('button', { name: 'e: hide empty' }))
+    expect(screen.getByTestId('e-default')).toHaveTextContent('false')
+    await user.click(screen.getByRole('button', { name: 'e: reset' }))
+    expect(screen.getByTestId('e-empty')).toHaveTextContent('true')
+    expect(screen.getByTestId('e-default')).toHaveTextContent('true')
+  })
+})