basalt-ui 1.26.0 → 1.28.0

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

@@ -1,637 +0,0 @@
-/**
- * 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)
-  })
-})