basalt-ui 1.25.0 → 1.26.0

package/src/controls/controls.router.test.tsx

@@ -0,0 +1,637 @@
+/**
+ * Every control, bound to a REAL `createSearchStore` under a REAL memory-history router — the half
+ * that cannot be tested headlessly. What each control reads on a deep link, what its pill says, and
+ * what lands on the URL when it is operated (C2/C3: there is no `value`/`onChange` to stub, so
+ * nothing here can pass against a control that only pretends to write).
+ *
+ * The harness is the one from `router-tanstack/search-store.router.test.tsx`, narrowed to one route
+ * (the position questions are that file's job) and wrapped in a `MantineProvider`.
+ */
+import { beforeEach, describe, expect, test } from 'bun:test'
+import type { ReactNode } from 'react'
+import { MantineProvider } from '@mantine/core'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import {
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from '@tanstack/react-router'
+import { field } from '../router-tanstack/field'
+import { createSearchStore } from '../router-tanstack/search-store'
+import { COMPARE_LABELS, COMPARE_VALUES, CompareFilter } from './compare-filter'
+import { MultiSelectFilter } from './multi-select-filter'
+import { RangeFilter } from './range-filter'
+import type { RangeCustomPickerProps } from './range-filter'
+import { SearchFilter } from './search-filter'
+import { SelectFilter } from './select-filter'
+import { ToggleFilter } from './toggle-filter'
+import { ViewTabs } from './view-tabs'
+
+type Router = { state: { status: string; location: { search: unknown } } }
+
+async function mountPage(input: {
+  validateSearch: (raw: Record<string, unknown>) => Record<string, unknown>
+  entry: string
+  Page: () => ReactNode
+}): Promise<Router> {
+  const rootRoute = createRootRoute({ component: () => <Outlet /> })
+  const pageRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: '/dashboard',
+    validateSearch: input.validateSearch,
+    component: input.Page,
+  })
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([pageRoute]),
+    history: createMemoryHistory({ initialEntries: [input.entry] }),
+  })
+
+  render(
+    <MantineProvider>
+      <RouterProvider router={router} />
+    </MantineProvider>,
+  )
+  await waitFor(() => {
+    expect(router.state.status).toBe('idle')
+  })
+  return router as unknown as Router
+}
+
+function search(router: Router): Record<string, unknown> {
+  return router.state.location.search as Record<string, unknown>
+}
+
+/**
+ * Press a pill and let its popover mount. The `act` wrapper is load-bearing: Mantine's `Popover` is
+ * a controlled surface behind a `Transition`, so the dropdown appears one flushed effect cycle after
+ * the click — a bare `fireEvent.click` leaves the body holding the button and nothing else.
+ *
+ * Queries INSIDE a dropdown pass `{ hidden: true }`: the dropdown is a portal still carrying its
+ * transition styles, which Testing Library reads as outside the accessibility tree. That is a
+ * harness fact, not a claim about the control — where visibility IS the assertion (`ViewTabs`'
+ * CSS swap below) the bare query is used deliberately.
+ */
+async function openPill(name: string | RegExp): Promise<void> {
+  await act(async () => {
+    fireEvent.click(screen.getByRole('button', { name }))
+  })
+}
+
+/** A stand-in for `basalt-ui/controls-dates`' `DateRangePicker` — the injected-seam contract, and
+ *  nothing else, so the range tests need no `@mantine/dates` at all. */
+function Picker({ onChange }: RangeCustomPickerProps): ReactNode {
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        onChange({ from: '2026-03-01', to: '2026-03-14' })
+      }}
+    >
+      pick march
+    </button>
+  )
+}
+
+beforeEach(() => {
+  localStorage.clear()
+})
+
+describe('SelectFilter', () => {
+  const store = createSearchStore({
+    key: 'c-select',
+    fields: { currency: field.enum(['USD', 'EUR'], 'USD') },
+  })
+
+  test('reads the SELECTED option at the fallback too, and writes the URL', async () => {
+    // The pill is a READOUT, so it prints the value at every value — including the field's default.
+    // It used to print the filter's NAME while `isDefault` held, which is how the playground's bar
+    // read `Compare` over a field holding `'previous'`. `data-active` is the channel that says
+    // "touched", and it is still the only one.
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <SelectFilter field={store.field.currency} label="Currency" />,
+    })
+
+    const pill = screen.getByRole('button', { name: 'USD' })
+    expect(pill.hasAttribute('data-active')).toBe(false)
+    expect(screen.queryByRole('button', { name: 'Currency' })).toBeNull()
+
+    await openPill('USD')
+    fireEvent.click(screen.getByRole('radio', { name: 'EUR', hidden: true }))
+
+    await waitFor(() => {
+      expect(search(router)['currency']).toBe('EUR')
+    })
+    const active = screen.getByRole('button', { name: 'EUR' })
+    expect(active.hasAttribute('data-active')).toBe(true)
+  })
+
+  test('the popover names the FILTER, not the value the pill happens to read', async () => {
+    // Without this the dropdown announces 'EUR, radio button, 1 of 2' and never the word Currency:
+    // the pill's visible text is the VALUE once set, so it cannot be the group's name.
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard?currency=EUR',
+      Page: () => <SelectFilter field={store.field.currency} label="Currency" />,
+    })
+    await openPill('EUR')
+    expect(screen.getByRole('radiogroup', { name: 'Currency', hidden: true })).toBeDefined()
+  })
+
+  test('a deep link is what the pill reads, with no interaction at all', async () => {
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard?currency=EUR',
+      Page: () => <SelectFilter field={store.field.currency} label="Currency" />,
+    })
+    expect(screen.getByRole('button', { name: 'EUR' })).toBeDefined()
+  })
+})
+
+/**
+ * The runtime-catalogue shape: `options` overrides the field's own rows, and a `StringField` handle
+ * becomes legal once it does. Both halves are asserted through a REAL `createSearchStore`, because
+ * the string lane is where a hand-rolled `value`/`onChange` would look identical and write nothing.
+ */
+describe('SelectFilter — options as a runtime catalogue', () => {
+  const store = createSearchStore({
+    key: 'c-select-options',
+    fields: { currency: field.enum(['USD', 'EUR'], 'USD'), projectId: field.string() },
+  })
+
+  const RATES = [
+    { value: 'USD', label: 'USD · 1.00' },
+    { value: 'EUR', label: 'EUR · 1.08' },
+  ]
+  const PROJECTS = [
+    { value: 'argo', label: 'Argo' },
+    { value: 'linewatch', label: 'Linewatch' },
+    { value: 'retired', label: 'Retired app', disabled: true },
+  ]
+
+  test('the rows and their labels come from the prop, and the field is still what is written', async () => {
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <SelectFilter field={store.field.currency} label="Currency" options={RATES} />,
+    })
+
+    // The pill reads the catalogue's label for the CURRENT value, fallback included — `USD · 1.00`,
+    // never `Currency`.
+    await openPill('USD · 1.00')
+    // The override is whole, not a merge: the field's own bare `EUR` row is GONE, which is the
+    // property a merge would silently break.
+    expect(screen.queryByRole('radio', { name: 'EUR', hidden: true })).toBeNull()
+    fireEvent.click(screen.getByRole('radio', { name: 'EUR · 1.08', hidden: true }))
+
+    await waitFor(() => {
+      expect(search(router)['currency']).toBe('EUR')
+    })
+    expect(screen.getByRole('button', { name: 'EUR · 1.08' })).toBeDefined()
+  })
+
+  test('a string field plus options round-trips an id no enum could have declared', async () => {
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <SelectFilter field={store.field.projectId} label="Project" options={PROJECTS} />,
+    })
+
+    expect(screen.getByRole('button', { name: 'Project' })).toBeDefined()
+    await openPill('Project')
+    fireEvent.click(screen.getByRole('radio', { name: 'Argo', hidden: true }))
+
+    await waitFor(() => {
+      expect(search(router)['projectId']).toBe('argo')
+    })
+    expect(screen.getByRole('button', { name: 'Argo' })).toBeDefined()
+  })
+
+  test('a deep link into that id set is read with no interaction at all', async () => {
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard?projectId=linewatch',
+      Page: () => <SelectFilter field={store.field.projectId} label="Project" options={PROJECTS} />,
+    })
+    expect(screen.getByRole('button', { name: 'Linewatch' })).toBeDefined()
+  })
+
+  test('a disabled catalogue row is offered and refused — it still labels the value it names', async () => {
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard?projectId=retired',
+      Page: () => <SelectFilter field={store.field.projectId} label="Project" options={PROJECTS} />,
+    })
+    // A live catalogue cannot express "archived" by omitting the row — the URL may already point at
+    // it, and a missing row would read as the filter's default.
+    expect(screen.getByRole('button', { name: 'Retired app' })).toBeDefined()
+    await openPill('Retired app')
+    expect(
+      screen.getByRole('radio', { name: 'Retired app', hidden: true }).hasAttribute('disabled'),
+    ).toBe(true)
+  })
+})
+
+describe('CompareFilter', () => {
+  const store = createSearchStore({
+    key: 'c-compare',
+    fields: { compare: field.enum(['none', 'previous', 'year'], 'none') },
+  }).labels({ compare: { none: 'No comparison', previous: 'Previous period', year: 'Last year' } })
+
+  test('reads the selected basis at the fallback too, and writes the chosen one', async () => {
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <CompareFilter field={store.field.compare} />,
+    })
+
+    // At the fallback the pill reads `No comparison`, not `Compare` — the exact regression the
+    // playground's bar showed, where the pill said `Compare` while the URL said `previous`.
+    await openPill('No comparison')
+    fireEvent.click(screen.getByRole('radio', { name: 'Previous period', hidden: true }))
+
+    await waitFor(() => {
+      expect(search(router)['compare']).toBe('previous')
+    })
+    expect(screen.getByRole('button', { name: 'Previous period' })).toBeDefined()
+    expect(screen.queryByRole('button', { name: 'Compare' })).toBeNull()
+  })
+
+  test('a consumer label wins over basalt’s default for the same value', async () => {
+    // This store labels `year` as `Last year`. basalt's default is `Same period last year`; a
+    // deliberate label is not something the framework overrides.
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard?compare=year',
+      Page: () => <CompareFilter field={store.field.compare} />,
+    })
+    expect(screen.getByRole('button', { name: 'Last year' })).toBeDefined()
+  })
+
+  test('label= still names the POPOVER, which is the only thing it names now', async () => {
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <CompareFilter field={store.field.compare} />,
+    })
+    await openPill('No comparison')
+    expect(screen.getByRole('radiogroup', { name: 'Compare', hidden: true })).toBeDefined()
+  })
+})
+
+describe('CompareFilter — the three option labels are basalt’s, not each app’s', () => {
+  // An UNLABELLED field: `field.enum` labels each option with the raw value until `store.labels()`
+  // is called, so this popover used to read `none` / `previous` / `year` and every consumer wrote
+  // the same three strings itself. `COMPARE_LABELS` is the default the control now supplies.
+  const store = createSearchStore({
+    key: 'c-compare-unlabelled',
+    fields: { compare: field.enum(['none', 'previous', 'year'], 'none') },
+  })
+
+  test('an unlabelled field still renders the three spec’d strings', async () => {
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <CompareFilter field={store.field.compare} />,
+    })
+
+    expect(COMPARE_LABELS).toEqual({
+      none: 'No comparison',
+      previous: 'Previous period',
+      year: 'Same period last year',
+    })
+
+    await openPill('No comparison')
+    for (const value of COMPARE_VALUES) {
+      expect(screen.getByRole('radio', { name: COMPARE_LABELS[value], hidden: true })).toBeDefined()
+    }
+    expect(screen.queryByRole('radio', { name: 'previous', hidden: true })).toBeNull()
+  })
+})
+
+describe('MultiSelectFilter', () => {
+  const store = createSearchStore({
+    key: 'c-multi',
+    fields: { channels: field.multi(['web', 'email', 'social'], []) },
+  })
+
+  test('reads the label while the selection carries no information, then a count', async () => {
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => (
+        <MultiSelectFilter field={store.field.channels} label="All channels" noun="channels" />
+      ),
+    })
+
+    expect(screen.getByRole('button', { name: 'All channels' })).toBeDefined()
+
+    await openPill('All channels')
+    fireEvent.click(screen.getByRole('checkbox', { name: 'web', hidden: true }))
+
+    await waitFor(() => {
+      expect(search(router)['channels']).toEqual(['web'])
+    })
+    expect(screen.getByRole('button', { name: '1 channels' })).toBeDefined()
+  })
+
+  test('every option selected is the same information as none — the label comes back', async () => {
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard?channels=web&channels=email&channels=social',
+      Page: () => <MultiSelectFilter field={store.field.channels} label="All channels" />,
+    })
+    expect(screen.getByRole('button', { name: 'All channels' })).toBeDefined()
+  })
+
+  test("options relabels the boxes while the values stay the field's own", async () => {
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => (
+        <MultiSelectFilter
+          field={store.field.channels}
+          label="All channels"
+          noun="channels"
+          options={[
+            { value: 'web', label: 'web · 1.2k' },
+            { value: 'email', label: 'email · 340' },
+          ]}
+        />
+      ),
+    })
+
+    await openPill('All channels')
+    fireEvent.click(screen.getByRole('checkbox', { name: 'web · 1.2k', hidden: true }))
+
+    await waitFor(() => {
+      expect(search(router)['channels']).toEqual(['web'])
+    })
+    // Two rows shown, not the field's three — so `1 channels` is counted against what is offered.
+    expect(screen.getByRole('button', { name: '1 channels' })).toBeDefined()
+  })
+})
+
+describe('ToggleFilter', () => {
+  const store = createSearchStore({
+    key: 'c-toggle',
+    fields: { errorsOnly: field.boolean(false) },
+  })
+
+  test('the pill IS the control — one press writes the field, no popover', async () => {
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <ToggleFilter field={store.field.errorsOnly} label="Errors only" />,
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Errors only' }))
+    await waitFor(() => {
+      expect(search(router)['errorsOnly']).toBe(true)
+    })
+    expect(screen.getByRole('button', { name: 'Errors only' }).hasAttribute('data-active')).toBe(
+      true,
+    )
+  })
+
+  test('the on/off state is announced, not only drawn as a border colour', async () => {
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <ToggleFilter field={store.field.errorsOnly} label="Errors only" />,
+    })
+
+    expect(screen.getByRole('button', { name: 'Errors only', pressed: false })).toBeDefined()
+    fireEvent.click(screen.getByRole('button', { name: 'Errors only' }))
+    await waitFor(() => {
+      expect(search(router)['errorsOnly']).toBe(true)
+    })
+    expect(screen.getByRole('button', { name: 'Errors only', pressed: true })).toBeDefined()
+  })
+})
+
+describe('RangeFilter', () => {
+  const store = createSearchStore({
+    key: 'c-range',
+    fields: {
+      range: field.range({ presets: ['7d', '30d', '90d'], fallback: '30d', custom: true }),
+    },
+  })
+
+  test('the pill reads the preset label and a press writes the preset param', async () => {
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <RangeFilter field={store.field.range} customPicker={Picker} />,
+    })
+
+    expect(screen.getByRole('button', { name: '30d' })).toBeDefined()
+
+    await openPill('30d')
+    fireEvent.click(screen.getByRole('radio', { name: '7d', hidden: true }))
+
+    await waitFor(() => {
+      expect(search(router)['range']).toBe('7d')
+    })
+  })
+
+  test('the pill never reads `label`, at the fallback or anywhere else', async () => {
+    // Same law as `SelectFilter`/`CompareFilter`: `label` is the popover heading and the accessible
+    // name, and the pill text is the value. `30d` here IS the fallback.
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <RangeFilter field={store.field.range} label="Window" customPicker={Picker} />,
+    })
+    expect(screen.getByRole('button', { name: '30d' })).toBeDefined()
+    expect(screen.queryByRole('button', { name: 'Window' })).toBeNull()
+  })
+
+  test('the preset track carries the filter name — a radiogroup must not be anonymous', async () => {
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <RangeFilter field={store.field.range} label="Window" />,
+    })
+    await openPill('30d')
+    expect(screen.getByRole('radiogroup', { name: 'Window', hidden: true })).toBeDefined()
+  })
+
+  test('numeric preset labels get the mono treatment via data-numeric', async () => {
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <RangeFilter field={store.field.range} />,
+    })
+    expect(screen.getByRole('button', { name: '30d' }).hasAttribute('data-numeric')).toBe(true)
+  })
+
+  test('the injected picker writes preset=custom plus both ISO dates, and the pill reads the span', async () => {
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <RangeFilter field={store.field.range} customPicker={Picker} />,
+    })
+
+    await openPill('30d')
+    fireEvent.click(screen.getByRole('button', { name: 'pick march', hidden: true }))
+
+    await waitFor(() => {
+      expect(search(router)['range']).toBe('custom')
+    })
+    expect(search(router)['from']).toBe('2026-03-01')
+    expect(search(router)['to']).toBe('2026-03-14')
+    expect(screen.getByRole('button', { name: /Mar 1/ }).textContent).toContain('Mar 1 – Mar 14')
+  })
+
+  test('no picker is injected → no custom affordance, presets only', async () => {
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <RangeFilter field={store.field.range} />,
+    })
+    await openPill('30d')
+    expect(screen.queryByRole('button', { name: 'pick march', hidden: true })).toBeNull()
+    expect(screen.queryByRole('radio', { name: 'custom', hidden: true })).toBeNull()
+  })
+})
+
+describe('SearchFilter', () => {
+  const store = createSearchStore({
+    key: 'c-search',
+    fields: { q: field.string({ max: 40 }) },
+  })
+
+  test('keystrokes land on the field only after the debounce', async () => {
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <SearchFilter field={store.field.q} placeholder="Search" />,
+    })
+
+    fireEvent.change(screen.getByPlaceholderText('Search'), { target: { value: 'invo' } })
+    // Same tick: the box shows it, the URL does not.
+    expect((screen.getByPlaceholderText('Search') as HTMLInputElement).value).toBe('invo')
+    expect(search(router)['q']).toBe('')
+
+    await waitFor(() => {
+      expect(search(router)['q']).toBe('invo')
+    })
+  })
+
+  test('the box is named even with no placeholder — and stays named while typing', async () => {
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <SearchFilter field={store.field.q} />,
+    })
+    expect(screen.getByRole('textbox', { name: 'Search' })).toBeDefined()
+  })
+})
+
+/**
+ * `ViewTabs` — the CSS swap, asserted rather than assumed. `MantineProvider` injects the
+ * `visible-from`/`hidden-from` media rules as a real stylesheet, and happy-dom evaluates them at its
+ * default (desktop) viewport — so the DESKTOP form is in the accessibility tree and the phone form is
+ * `display: none`. `{ hidden: true }` counts what is MOUNTED, the bare query counts what is
+ * REACHABLE, and the pair is what proves "one mount each, switched by CSS" (C9).
+ */
+describe('ViewTabs', () => {
+  test('three options or fewer: both forms are tracks, one mounted each, only one reachable', async () => {
+    const store = createSearchStore({
+      key: 'c-tabs-3',
+      fields: { tab: field.enum(['a', 'b', 'c'], 'a') },
+    })
+    const router = await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <ViewTabs field={store.field.tab} />,
+    })
+
+    expect(screen.getAllByRole('radio', { name: 'b', hidden: true })).toHaveLength(2)
+    expect(screen.getAllByRole('radio', { name: 'b' })).toHaveLength(1)
+    expect(screen.queryByRole('combobox', { hidden: true })).toBeNull()
+
+    fireEvent.click(screen.getByRole('radio', { name: 'b' }))
+    await waitFor(() => {
+      expect(search(router)['tab']).toBe('b')
+    })
+  })
+
+  test('past three options the phone form becomes a Select, not a track', async () => {
+    const store = createSearchStore({
+      key: 'c-tabs-4',
+      fields: { tab: field.enum(['a', 'b', 'c', 'd'], 'a') },
+    })
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <ViewTabs field={store.field.tab} />,
+    })
+
+    expect(screen.getAllByRole('radio', { name: 'b', hidden: true })).toHaveLength(1)
+    expect(screen.getByRole('combobox', { hidden: true })).toBeDefined()
+  })
+
+  test('both forms carry an accessible name — neither is an anonymous radiogroup/combobox', async () => {
+    const store = createSearchStore({
+      key: 'c-tabs-named',
+      fields: { tab: field.enum(['a', 'b', 'c', 'd'], 'a') },
+    })
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <ViewTabs field={store.field.tab} label="Section" />,
+    })
+
+    expect(screen.getByRole('radiogroup', { name: 'Section', hidden: true })).toBeDefined()
+    expect(screen.getByRole('combobox', { name: 'Section', hidden: true })).toBeDefined()
+  })
+
+  test("the name defaults to 'View' rather than being absent", async () => {
+    const store = createSearchStore({
+      key: 'c-tabs-default-name',
+      fields: { tab: field.enum(['a', 'b'], 'a') },
+    })
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => <ViewTabs field={store.field.tab} />,
+    })
+    // Read off the attribute rather than through the accessible-name query: the phone twin is
+    // `display: none` on this viewport, and `dom-accessibility-api` declines to compute a name for a
+    // hidden `radiogroup` — which would make the assertion pass for the wrong reason.
+    const groups = screen.getAllByRole('radiogroup', { hidden: true })
+    expect(groups).toHaveLength(2)
+    expect(groups.map((group) => group.getAttribute('aria-label'))).toEqual(['View', 'View'])
+  })
+
+  test("only: 'sm-down' keeps an option off the desktop form entirely", async () => {
+    const store = createSearchStore({
+      key: 'c-tabs-only',
+      fields: { tab: field.enum(['overview', 'train'], 'overview') },
+    })
+    await mountPage({
+      validateSearch: store.validateSearch,
+      entry: '/dashboard',
+      Page: () => (
+        <ViewTabs
+          field={store.field.tab}
+          options={[
+            { value: 'overview', label: 'Overview' },
+            { value: 'train', label: 'Train', only: 'sm-down' },
+          ]}
+        />
+      ),
+    })
+
+    expect(screen.getAllByRole('radio', { name: 'Overview', hidden: true })).toHaveLength(2)
+    expect(screen.getAllByRole('radio', { name: 'Train', hidden: true })).toHaveLength(1)
+    // And the one that exists is the PHONE one — unreachable on this viewport.
+    expect(screen.queryAllByRole('radio', { name: 'Train' })).toHaveLength(0)
+  })
+})