@lovett/ui 0.0.11 → 0.2.0

package/src/__tests__/line-chart.test.tsx

@@ -0,0 +1,612 @@
+/**
+ * LineChart / AreaChart — the edge cases ADR-146 acceptance criterion 8 names,
+ * plus the two defects this primitive exists to not re-ship.
+ *
+ * The suite runs with `css: false`, so nothing here measures a painted pixel.
+ * What it CAN assert is the shape of what reaches the browser: how many path
+ * segments a gap produces, whether two charts on one page collide on a
+ * gradient id, and whether the keyboard actually moves the readout.
+ */
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { AreaChart, LineChart, type LineChartSeries } from '../line-chart'
+
+const xLabels = ['Mar 1', 'Mar 2', 'Mar 3', 'Mar 4']
+
+function series(values: readonly (number | null)[]): LineChartSeries[] {
+  return [{ key: 'visits', label: 'Visits', slot: 0, values }]
+}
+
+/** The plot itself, scoped away from the frame's chrome (the table toggle's
+ *  Lucide icon is an SVG with paths of its own). */
+function plot(container: HTMLElement): Element {
+  const node = container.querySelector('[role="group"] svg')
+  if (node === null) throw new Error('no plot rendered')
+  return node
+}
+
+/** Every stroked line path in the plot — one per unbroken run of points. */
+function linePaths(container: HTMLElement): Element[] {
+  return Array.from(plot(container).querySelectorAll('path')).filter(
+    (path) => path.getAttribute('fill') === 'none',
+  )
+}
+
+/** Every filled area path in the plot — one per unbroken run, area variant. */
+function areaPaths(container: HTMLElement): Element[] {
+  return Array.from(plot(container).querySelectorAll('path')).filter(
+    (path) => path.getAttribute('fill') === null,
+  )
+}
+
+describe('LineChart edge cases', () => {
+  it('renders a single point as a dot, with no empty plot', () => {
+    const { container } = render(
+      <LineChart title="One" xLabels={['Mar 1']} series={series([42])} />,
+    )
+    const paths = linePaths(container)
+    expect(paths).toHaveLength(1)
+    // A zero-length segment: with a round cap this paints as a dot.
+    expect(paths[0]?.getAttribute('d')).toMatch(/^M[\d.]+,[\d.]+ L[\d.]+,[\d.]+$/)
+    expect(plot(container).querySelectorAll('circle')).toHaveLength(1)
+  })
+
+  it('renders two points as one segment', () => {
+    const { container } = render(
+      <LineChart xLabels={['a', 'b']} series={series([1, 2])} />,
+    )
+    expect(linePaths(container)).toHaveLength(1)
+  })
+
+  it('breaks the line at a gap instead of interpolating through it', () => {
+    const { container } = render(
+      <LineChart xLabels={xLabels} series={series([1, null, 3, 4])} />,
+    )
+    // Two runs: [Mar 1] and [Mar 3, Mar 4]. One path would be a lie.
+    expect(linePaths(container)).toHaveLength(2)
+  })
+
+  it('survives an all-zero series without dividing by zero', () => {
+    const { container } = render(
+      <LineChart
+        xLabels={xLabels}
+        series={series([0, 0, 0, 0])}
+        directLabels={false}
+      />,
+    )
+    const d = linePaths(container)[0]?.getAttribute('d') ?? ''
+    expect(d).not.toMatch(/NaN|Infinity/)
+    // A flat domain maps to the middle of the range, and the axis agrees:
+    // ONE tick label, not a ladder of zeroes.
+    expect(screen.getAllByText('0')).toHaveLength(1)
+  })
+
+  it('draws a zero rule when the data crosses zero', () => {
+    const { container } = render(
+      <LineChart xLabels={xLabels} series={series([-40, -10, 20, 50])} />,
+    )
+    const rule = plot(container).querySelector('line')
+    expect(rule).not.toBeNull()
+    expect(rule?.getAttribute('style')).toContain('--chart-axis')
+  })
+
+  it('has no zero rule when the domain does not span zero', () => {
+    const { container } = render(
+      <LineChart xLabels={xLabels} series={series([10, 20, 30, 40])} />,
+    )
+    expect(plot(container).querySelector('line')).toBeNull()
+  })
+
+  it('falls back to the empty state when no datum is finite', () => {
+    render(
+      <LineChart
+        title="Nothing"
+        xLabels={xLabels}
+        series={series([null, null, null, null])}
+      />,
+    )
+    expect(screen.getByText('No data for this range.')).toBeInTheDocument()
+  })
+
+  it('emits no NaN in any path or attribute', () => {
+    const { container } = render(
+      <AreaChart xLabels={xLabels} series={series([null, 5, 0, -3])} />,
+    )
+    expect(container.innerHTML).not.toMatch(/NaN|Infinity/)
+  })
+})
+
+describe('LineChart mark placement', () => {
+  it('closes an area fill on the zero line, not the floor of the plot', () => {
+    // Domain -40..20, so zero sits inside it. Closing on the floor would
+    // paint every negative point down to -40 — a tall block of ink for a
+    // small negative number, which is the area-chart lie in reverse.
+    const { container } = render(
+      <AreaChart xLabels={xLabels} series={series([-40, -10, 0, 20])} />,
+    )
+    const rule = plot(container).querySelector('line')
+    const zeroY = Number(rule?.getAttribute('y1'))
+    expect(Number.isFinite(zeroY)).toBe(true)
+
+    const d = areaPaths(container)[0]?.getAttribute('d') ?? ''
+    // The two closing coordinates are the baseline, and they are the zero
+    // rule's y — not the bottom of the plot.
+    const closing = [...d.matchAll(/L[\d.-]+,([\d.-]+)/g)].map((m) => Number(m[1]))
+    expect(closing[closing.length - 1]).toBeCloseTo(zeroY, 1)
+    expect(closing[closing.length - 2]).toBeCloseTo(zeroY, 1)
+  })
+
+  it('closes an all-positive area on the floor, as before', () => {
+    const { container } = render(
+      <AreaChart xLabels={xLabels} series={series([10, 20, 30, 40])} />,
+    )
+    const d = areaPaths(container)[0]?.getAttribute('d') ?? ''
+    const closing = [...d.matchAll(/L[\d.-]+,([\d.-]+)/g)].map((m) => Number(m[1]))
+    // includeZero puts zero at the bottom of the domain, so y(0) IS the floor.
+    expect(closing[closing.length - 1]).toBeGreaterThan(0)
+    expect(d).not.toMatch(/NaN/)
+  })
+
+  it('never paints a direct label above the top of the plot', () => {
+    // niceTicks rounds 1..4 to exactly [1,2,3,4], so the peak sits at y = 0.
+    // An unflipped label would render its glyphs outside the plot, over the
+    // legend, because the plot SVG is deliberately overflow: visible.
+    const { container } = render(
+      <LineChart title="Peak" xLabels={xLabels} series={series([1, 2, 3, 4])} />,
+    )
+    const ys = Array.from(plot(container).querySelectorAll('text')).map((node) =>
+      Number(node.getAttribute('y')),
+    )
+    expect(ys.length).toBeGreaterThan(0)
+    for (const y of ys) expect(y).toBeGreaterThanOrEqual(0)
+  })
+})
+
+describe('LineChart axis labels', () => {
+  it('thins the x-axis rather than rendering one label per day', () => {
+    const days = Array.from({ length: 90 }, (_, i) => `Day ${i + 1}`)
+    render(
+      <LineChart
+        title="Sessions"
+        xLabels={days}
+        series={series(days.map((_, i) => i))}
+      />,
+    )
+    // 90 labels in a justify-between row is five pixels of ellipsis each.
+    expect(screen.queryByText('Day 2')).toBeNull()
+    // First and last are always kept — they anchor the range.
+    expect(screen.getByText('Day 1')).toBeInTheDocument()
+    expect(screen.getByText('Day 90')).toBeInTheDocument()
+  })
+
+  it('keeps every label in the table view, thinned axis or not', async () => {
+    const user = userEvent.setup()
+    const days = Array.from({ length: 90 }, (_, i) => `Day ${i + 1}`)
+    render(
+      <LineChart
+        title="Sessions"
+        xLabels={days}
+        series={series(days.map((_, i) => i))}
+      />,
+    )
+    await user.click(screen.getByRole('button', { name: 'Table view' }))
+    expect(screen.getByRole('rowheader', { name: 'Day 2' })).toBeInTheDocument()
+  })
+
+  it('formats the whole y tick ladder to one precision', () => {
+    render(
+      <LineChart
+        title="Rate"
+        xLabels={xLabels}
+        series={series([0, 0.25, 0.5, 1])}
+        // The tick COUNT is fitted to the plot's height, so a six-rung
+        // ladder needs a plot tall enough to hold one: at the default 16/5
+        // the nominal plot is 143px and the axis correctly thins to three.
+        // This case is about the FORMATTING of a six-rung ladder, so it asks
+        // for a plot that has room for six.
+        aspectRatio={2}
+      />,
+    )
+    // The ladder is 0, 0.2 … 1. Per-value formatting renders that as
+    // "1 / 0.8 / 0.6 / 0.4 / 0.2 / 0" — two shapes in one tabular column.
+    // One precision for the whole ladder means the ends carry it too.
+    for (const tick of ['1.0', '0.8', '0.6', '0.4', '0.2', '0.0']) {
+      expect(screen.getByText(tick)).toBeInTheDocument()
+    }
+  })
+})
+
+describe('LineChart axis legibility (the 2026-09-06 browser findings)', () => {
+  /**
+   * These four assert the SHAPE of the fix, which is all jsdom can see: the
+   * inline `left` percentage, which indices survive thinning, how many tick
+   * rows exist, and whether both members of a colliding pair are in the DOM.
+   * Whether the result LOOKS right — no painted overlap, the label under its
+   * bar — is a browser measurement, and is recorded in the fix report.
+   */
+
+  /** The x-axis label row, which mirrors the plot row below the gutter. */
+  function xLabelRow(container: HTMLElement): HTMLElement {
+    const rows = container.querySelectorAll('figure > div[aria-hidden="true"]')
+    const row = rows[rows.length - 1]
+    if (!(row instanceof HTMLElement)) throw new Error('no x-label row')
+    return row
+  }
+
+  function readXLabels(container: HTMLElement): { text: string; left: string }[] {
+    return Array.from(xLabelRow(container).querySelectorAll('span')).map((span) => ({
+      text: span.textContent ?? '',
+      left: span.style.left,
+    }))
+  }
+
+  it('thins 12 weeks by a uniform stride, not by rounding a fraction', () => {
+    // The shipped axis read "Wk 1, Wk 3, Wk 4, Wk 6, Wk 7, Wk 9, Wk 10,
+    // Wk 12": 3&4, 6&7 and 9&10 adjacent, 2, 5, 8 and 11 skipped. A reader
+    // sees an irregular axis and concludes the DATA is irregular.
+    const weeks = Array.from({ length: 12 }, (_, i) => `Wk ${i + 1}`)
+    const { container } = render(
+      <LineChart
+        title="Weekly spend"
+        xLabels={weeks}
+        series={series(weeks.map((_, i) => i * 100))}
+      />,
+    )
+    const texts = readXLabels(container).map((label) => label.text)
+    expect(texts).toEqual(['Wk 1', 'Wk 3', 'Wk 5', 'Wk 7', 'Wk 9', 'Wk 12'])
+    // The three the rounding kept ADJACENT to a neighbour are gone.
+    expect(texts).not.toContain('Wk 4')
+    expect(texts).not.toContain('Wk 6')
+    expect(texts).not.toContain('Wk 10')
+    // No two kept labels are one week apart — that adjacency is what made
+    // the old axis read as irregular data.
+    const kept = texts.map((text) => Number(text.replace('Wk ', '')))
+    for (let i = 1; i < kept.length; i++) {
+      expect((kept[i] ?? 0) - (kept[i - 1] ?? 0)).toBeGreaterThan(1)
+    }
+  })
+
+  it('positions each x label at its own data fraction, not an even spread', () => {
+    const weeks = Array.from({ length: 12 }, (_, i) => `Wk ${i + 1}`)
+    const { container } = render(
+      <LineChart
+        title="Weekly spend"
+        xLabels={weeks}
+        series={series(weeks.map((_, i) => i * 100))}
+      />,
+    )
+    const byText = new Map(readXLabels(container).map((l) => [l.text, l.left]))
+    // Position 4 of 12 is 4/11 of the way across — not 2/5, which is where
+    // an even spread of six labels would have put it.
+    expect(byText.get('Wk 1')).toBe('0%')
+    expect(byText.get('Wk 5')).toBe(`${(4 / 11) * 100}%`)
+    expect(byText.get('Wk 12')).toBe('100%')
+  })
+
+  it('shortens the y ladder for a short plot instead of stacking labels', () => {
+    // A 21px label needs 42px of room. The nominal plot is 459px wide, so a
+    // 16:5 panel is 143px tall (four rungs) and a 16:1 panel is 29px (two).
+    const tall = render(
+      <LineChart title="Spend" xLabels={xLabels} series={series([0, 25000, 40000, 50000])} />,
+    )
+    const short = render(
+      <LineChart
+        title="Spend"
+        xLabels={xLabels}
+        series={series([0, 25000, 40000, 50000])}
+        aspectRatio={16}
+      />,
+    )
+    const count = (view: ReturnType<typeof render>): number =>
+      view.container.querySelectorAll('figure > div > div[aria-hidden="true"] > span')
+        .length
+    expect(count(short)).toBeLessThan(count(tall))
+    expect(count(short)).toBe(2)
+  })
+
+  it('drops one of two value labels that would land on top of each other', () => {
+    // The measured defect: AreaChart's "Spend, filled" demo painted
+    // "$17,460" and "$17,120" over each other as "$17,46O$17,120". Two
+    // series ending 340 apart on a ~20,000 domain are ~2px apart in the
+    // plot, so exactly one of the pair may be drawn.
+    const { container } = render(
+      <AreaChart
+        title="Spend"
+        xLabels={xLabels}
+        series={[
+          { key: 'a', label: 'A', slot: 0, values: [8000, 12000, 15000, 17460] },
+          { key: 'b', label: 'B', slot: 1, values: [8100, 12100, 15100, 17120] },
+        ]}
+      />,
+    )
+    const drawn = Array.from(plot(container).querySelectorAll('text')).map(
+      (node) => node.textContent,
+    )
+    const collided = drawn.filter(
+      (text) => text === '17,460' || text === '17,120',
+    )
+    expect(collided).toHaveLength(1)
+    // The survivor is the one that is also a peak — priority peak > last.
+    expect(collided[0]).toBe('17,460')
+  })
+})
+
+describe('LineChart identity rules (ADR-146 D10)', () => {
+  it('renders no legend for a single series — the title names it', () => {
+    render(<LineChart title="Visits" xLabels={xLabels} series={series([1, 2, 3, 4])} />)
+    expect(screen.queryByRole('list', { name: /legend/i })).toBeNull()
+  })
+
+  it('always renders a legend for two or more series', () => {
+    render(
+      <LineChart
+        title="Traffic"
+        xLabels={xLabels}
+        series={[
+          { key: 'a', label: 'Direct', slot: 0, values: [1, 2, 3, 4] },
+          { key: 'b', label: 'Search', slot: 1, values: [4, 3, 2, 1] },
+        ]}
+      />,
+    )
+    expect(screen.getByRole('list', { name: /legend/i })).toBeInTheDocument()
+    expect(screen.getByText('Direct')).toBeInTheDocument()
+    expect(screen.getByText('Search')).toBeInTheDocument()
+  })
+
+  it('offers the table view as the accessible representation', async () => {
+    const user = userEvent.setup()
+    render(<LineChart title="Visits" xLabels={xLabels} series={series([1, 2, 3, 4])} />)
+    await user.click(screen.getByRole('button', { name: 'Table view' }))
+    expect(screen.getByRole('table')).toBeInTheDocument()
+    expect(screen.getByRole('columnheader', { name: 'Visits' })).toBeInTheDocument()
+    // A gap reads as an em dash in the table, never as a zero.
+  })
+
+  it('writes an em dash, not a zero, for a gap in the table', async () => {
+    const user = userEvent.setup()
+    render(<LineChart title="Visits" xLabels={xLabels} series={series([1, null, 3, 4])} />)
+    await user.click(screen.getByRole('button', { name: 'Table view' }))
+    expect(screen.getByText('—')).toBeInTheDocument()
+  })
+})
+
+describe('LineChart gradient ids', () => {
+  it('does not collide when two area charts share a page', () => {
+    const { container } = render(
+      <>
+        <AreaChart xLabels={xLabels} series={series([1, 2, 3, 4])} />
+        <AreaChart
+          xLabels={xLabels}
+          series={[{ key: 'b', label: 'Other', slot: 1, values: [4, 3, 2, 1] }]}
+        />
+      </>,
+    )
+    const ids = Array.from(container.querySelectorAll('linearGradient')).map((node) =>
+      node.getAttribute('id'),
+    )
+    expect(ids).toHaveLength(2)
+    expect(new Set(ids).size).toBe(2)
+    // And the ids are usable in a url() fragment — React's useId ships colons.
+    for (const id of ids) expect(id).not.toContain(':')
+  })
+
+  it('defines one gradient per series, and only for the area variant', () => {
+    const twoSeries: LineChartSeries[] = [
+      { key: 'a', label: 'Direct', slot: 0, values: [1, 2, 3, 4] },
+      { key: 'b', label: 'Search', slot: 1, values: [4, 3, 2, 1] },
+    ]
+    const area = render(<AreaChart xLabels={xLabels} series={twoSeries} />)
+    expect(area.container.querySelectorAll('linearGradient')).toHaveLength(2)
+    // One filled region per unbroken run, over the two stroked lines.
+    expect(areaPaths(area.container)).toHaveLength(2)
+    expect(linePaths(area.container)).toHaveLength(2)
+
+    // The line variant defines no gradient at all — nothing to collide with.
+    const line = render(<LineChart xLabels={xLabels} series={twoSeries} />)
+    expect(line.container.querySelectorAll('linearGradient')).toHaveLength(0)
+    expect(linePaths(line.container)).toHaveLength(2)
+  })
+})
+
+describe('LineChart keyboard interaction (ADR-146 D9)', () => {
+  it('moves the readout with the arrow keys and clears on Escape', async () => {
+    const user = userEvent.setup()
+    render(<LineChart title="Visits" xLabels={xLabels} series={series([1, 2, 3, 4])} />)
+
+    const plot = screen.getByRole('group', { name: 'Visits' })
+    plot.focus()
+
+    await user.keyboard('{ArrowRight}')
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Mar 1')
+
+    await user.keyboard('{ArrowRight}')
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Mar 2')
+
+    await user.keyboard('{End}')
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Mar 4')
+
+    await user.keyboard('{Escape}')
+    expect(screen.queryByRole('tooltip')).toBeNull()
+  })
+
+  it('drops a hover index that new, shorter data no longer has', async () => {
+    const user = userEvent.setup()
+    const { rerender } = render(
+      <LineChart title="Visits" xLabels={xLabels} series={series([1, 2, 3, 4])} />,
+    )
+    screen.getByRole('group', { name: 'Visits' }).focus()
+    await user.keyboard('{End}')
+    expect(screen.getByRole('tooltip')).toHaveTextContent('Mar 4')
+
+    // A range switch: the same chart, fewer points. A stale index would read
+    // past the end of every series and paint a readout of nothing.
+    rerender(
+      <LineChart title="Visits" xLabels={['Mar 1', 'Mar 2']} series={series([1, 2])} />,
+    )
+    expect(screen.queryByRole('tooltip')).toBeNull()
+  })
+
+  it('is keyboard reachable', () => {
+    render(<LineChart title="Visits" xLabels={xLabels} series={series([1, 2, 3, 4])} />)
+    expect(screen.getByRole('group', { name: 'Visits' })).toHaveAttribute('tabindex', '0')
+  })
+})
+
+describe('LineChart — every datum is plotted (Truthful axis)', () => {
+  it('plots values that run past the last x label instead of discarding them', async () => {
+    const user = userEvent.setup()
+    // Three values, two labels. Deriving the position count from `xLabels`
+    // drops the third: the domain reads 1..2, the point never draws, and the
+    // table view — the chart's accessible representation — never mentions it.
+    render(
+      <LineChart title="Visits" xLabels={['a', 'b']} series={series([1, 2, 999])} />,
+    )
+
+    // The domain must cover the data that exists. niceTicks(1, 999) tops out
+    // at 1,000; a domain truncated to 1..2 tops out at "2.0".
+    expect(screen.getByText('1,000')).toBeInTheDocument()
+    expect(screen.queryByText('2.0')).toBeNull()
+
+    await user.click(screen.getByRole('button', { name: 'Table view' }))
+    expect(screen.getByRole('cell', { name: '999' })).toBeInTheDocument()
+  })
+
+  it('keeps every position in the table when the labels run short', async () => {
+    const user = userEvent.setup()
+    // The real shape of this bug: a 30-day series arriving with 7 labels.
+    const values = Array.from({ length: 30 }, (_, i) => i + 1)
+    render(
+      <LineChart
+        title="Sessions"
+        xLabels={['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7']}
+        series={series(values)}
+      />,
+    )
+    await user.click(screen.getByRole('button', { name: 'Table view' }))
+    // Header + one row per VALUE, not one row per label.
+    expect(screen.getAllByRole('row')).toHaveLength(values.length + 1)
+    expect(screen.getByRole('cell', { name: '30' })).toBeInTheDocument()
+  })
+
+  it('takes the longest series, not the first, as the position count', () => {
+    const { container } = render(
+      <LineChart
+        title="Traffic"
+        xLabels={['a']}
+        series={[
+          { key: 'a', label: 'Direct', slot: 0, values: [1] },
+          { key: 'b', label: 'Search', slot: 1, values: [1, 2, 3, 4] },
+        ]}
+        markers="all"
+      />,
+    )
+    // 1 marker for Direct + 4 for Search. Counting from `xLabels` gives 2.
+    expect(plot(container).querySelectorAll('circle')).toHaveLength(5)
+  })
+
+  it('leaves an unlabelled position blank on the axis rather than dropping it', () => {
+    render(
+      <LineChart title="Visits" xLabels={['a', 'b']} series={series([1, 2, 3])} />,
+    )
+    // The axis row still names what it can; the position with no label is
+    // rendered empty, not deleted (deleting it would shift every label left).
+    expect(screen.getByText('a')).toBeInTheDocument()
+    expect(screen.getByText('b')).toBeInTheDocument()
+  })
+})
+
+/**
+ * The plot box unmounts and remounts — `ChartFrame` renders `children` only in
+ * the `loaded` state, and the table view swaps the whole plot row out. The
+ * measurement hooks used to key their effect on `[ref]`, and a ref object is
+ * stable for the component's life, so the observer bound once to whatever node
+ * existed then and never rebound.
+ *
+ * That made the ORDINARY async path the broken one: a chart that first paints
+ * in `loading` (every TanStack Query flow) stayed unmeasured for the rest of
+ * its life and silently fell back to the nominal plot size — defeating the
+ * measured axis fit that most of ADR-146's axis work exists to provide.
+ *
+ * jsdom has no layout, so these cannot assert a measured WIDTH. What they can
+ * assert is the thing that actually regressed: that the box carrying the
+ * observer is a live node in the document after each remount, so the effect
+ * has something to re-observe.
+ */
+describe('LineChart re-measures after the plot subtree remounts', () => {
+  /**
+   * Instrument `ResizeObserver` and record which nodes get observed. Asserting
+   * the plot node is merely PRESENT would pass in the broken version too — the
+   * node always mounts; what regressed is that the observer never rebound to
+   * it. So the assertion has to be on `observe()`.
+   */
+  function trackObserved() {
+    const observed: Element[] = []
+    const Original = globalThis.ResizeObserver
+    class Tracking {
+      observe(el: Element) {
+        observed.push(el)
+      }
+      unobserve() {}
+      disconnect() {}
+    }
+    globalThis.ResizeObserver = Tracking as unknown as typeof ResizeObserver
+    return {
+      observed,
+      restore: () => {
+        globalThis.ResizeObserver = Original
+      },
+    }
+  }
+
+  it('observes the plot box when loading resolves to loaded', () => {
+    const { observed, restore } = trackObserved()
+    try {
+      const { container, rerender } = render(
+        <LineChart
+          state="loading"
+          xLabels={xLabels}
+          series={series([10, 20, 30, 40])}
+        />,
+      )
+      const before = observed.length
+
+      rerender(
+        <LineChart
+          state="loaded"
+          xLabels={xLabels}
+          series={series([10, 20, 30, 40])}
+        />,
+      )
+
+      const plot = container.querySelector('svg circle')
+      expect(plot).not.toBeNull()
+      // The regression: zero NEW observations after the plot mounted, because
+      // the effect was keyed on a ref object that never changes.
+      expect(observed.length).toBeGreaterThan(before)
+      expect(observed.some((el) => el.isConnected)).toBe(true)
+    } finally {
+      restore()
+    }
+  })
+
+  it('re-observes the plot box after a table-view round trip', async () => {
+    const user = userEvent.setup()
+    const { observed, restore } = trackObserved()
+    try {
+      render(
+        <LineChart xLabels={xLabels} series={series([10, 20, 30, 40])} />,
+      )
+
+      await user.click(screen.getByRole('button', { name: /table/i }))
+      expect(screen.getByRole('table')).toBeTruthy()
+      const beforeReturn = observed.length
+
+      await user.click(screen.getByRole('button', { name: /chart/i }))
+      expect(observed.length).toBeGreaterThan(beforeReturn)
+    } finally {
+      restore()
+    }
+  })
+})