basalt-ui 1.26.0 → 1.28.0

package/src/router-tanstack/search-store.router.test.tsx

@@ -1,661 +0,0 @@
-/**
- * `createSearchStore` under a REAL router — the half that cannot be tested headlessly: what
- * `use()` reads on a deep link, whether a write navigates, and from where.
- *
- * A memory-history router with three routes covers the three positions a control can render in:
- * the route that validates the params, a CHILD of it (A3 — no `from`, the param still resolves),
- * and a sibling that knows nothing about the store (A1 — the write persists and does not navigate).
- */
-import { beforeEach, describe, expect, spyOn, test } from 'bun:test'
-import type { ReactNode } from 'react'
-import { act, cleanup, render, waitFor } from '@testing-library/react'
-import {
-  Outlet,
-  RouterProvider,
-  createMemoryHistory,
-  createRootRoute,
-  createRoute,
-  createRouter,
-} from '@tanstack/react-router'
-import type { AnyField, FieldHandle } from '../state'
-import { field } from './field'
-import { createSearchStore } from './search-store'
-
-type Probe = { value: unknown; set: (next: unknown) => void }
-type Sink = { current: Probe | null }
-
-function sink(): Sink {
-  return { current: null }
-}
-
-/** Renders nothing; publishes one field's `use()` result so a test can read and drive it. */
-function fieldProbe<F extends AnyField>(handle: FieldHandle<F>, into: Sink) {
-  return function FieldProbe(): ReactNode {
-    const [value, set] = handle.use()
-    into.current = { value, set: set as (next: unknown) => void }
-    return null
-  }
-}
-
-type AppInput = {
-  validateSearch: (raw: Record<string, unknown>) => Record<string, unknown>
-  entry: string
-  Dashboard?: () => ReactNode
-  Detail?: () => ReactNode
-  Other?: () => ReactNode
-}
-
-const nothing = (): ReactNode => null
-
-async function mountApp(input: AppInput) {
-  const Dashboard = input.Dashboard ?? nothing
-  const rootRoute = createRootRoute({ component: () => <Outlet /> })
-  const dashboardRoute = createRoute({
-    getParentRoute: () => rootRoute,
-    path: '/dashboard',
-    validateSearch: input.validateSearch,
-    component: () => (
-      <>
-        <Dashboard />
-        <Outlet />
-      </>
-    ),
-  })
-  const detailRoute = createRoute({
-    getParentRoute: () => dashboardRoute,
-    path: 'detail',
-    component: input.Detail ?? nothing,
-  })
-  const otherRoute = createRoute({
-    getParentRoute: () => rootRoute,
-    path: '/other',
-    component: input.Other ?? nothing,
-  })
-  const router = createRouter({
-    routeTree: rootRoute.addChildren([dashboardRoute.addChildren([detailRoute]), otherRoute]),
-    history: createMemoryHistory({ initialEntries: [input.entry] }),
-  })
-
-  render(<RouterProvider router={router} />)
-  await waitFor(() => {
-    expect(router.state.status).toBe('idle')
-  })
-  return router
-}
-
-function currentSearch(router: {
-  state: { location: { search: unknown } }
-}): Record<string, unknown> {
-  return router.state.location.search as Record<string, unknown>
-}
-
-/** The `{ fieldName: value }` record the store persisted under `basalt:<key>`. */
-function storedRecord(key: string): Record<string, unknown> | null {
-  const raw = localStorage.getItem(`basalt:${key}`)
-  if (raw === null) return null
-  return (JSON.parse(raw) as { value: Record<string, unknown> }).value
-}
-
-function persist(key: string, record: Record<string, unknown>): void {
-  localStorage.setItem(`basalt:${key}`, JSON.stringify({ v: 1, value: record }))
-}
-
-beforeEach(() => {
-  localStorage.clear()
-})
-
-describe('use() — reading', () => {
-  test('a deep link WINS over the localStorage mirror (A8)', async () => {
-    const store = createSearchStore({
-      key: 'r-deeplink',
-      fields: { range: field.enum(['1d', '7d', '30d'], '1d') },
-    })
-    persist('r-deeplink', { range: '30d' })
-    const probe = sink()
-
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard?range=7d',
-      Dashboard: fieldProbe(store.field.range, probe),
-    })
-
-    // The enum-only store read its localStorage hook here and rendered '30d' — a shared link
-    // opened on the wrong window, and nothing said so.
-    expect(probe.current?.value).toBe('7d')
-  })
-
-  test('falls through to the mirror when the URL carries no value', async () => {
-    const store = createSearchStore({
-      key: 'r-mirror',
-      fields: { range: field.enum(['1d', '7d', '30d'], '1d') },
-    })
-    persist('r-mirror', { range: '30d' })
-    const probe = sink()
-
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard',
-      Dashboard: fieldProbe(store.field.range, probe),
-    })
-
-    expect(probe.current?.value).toBe('30d')
-  })
-
-  test('falls through to the fallback when neither lane holds a value', async () => {
-    const store = createSearchStore({
-      key: 'r-fallback',
-      fields: { range: field.enum(['1d', '7d'], '7d') },
-    })
-    const probe = sink()
-
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard',
-      Dashboard: fieldProbe(store.field.range, probe),
-    })
-
-    expect(probe.current?.value).toBe('7d')
-  })
-
-  test('a CHILD route reads the field with no `from` (A3)', async () => {
-    const store = createSearchStore({
-      key: 'r-child',
-      fields: { range: field.enum(['1d', '7d'], '1d') },
-    })
-    const probe = sink()
-
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard/detail?range=7d',
-      Detail: fieldProbe(store.field.range, probe),
-    })
-
-    expect(probe.current?.value).toBe('7d')
-  })
-
-  test('a range field reads all three params back as one value', async () => {
-    const store = createSearchStore({
-      key: 'r-range',
-      fields: { range: field.range({ presets: ['7d', '30d'], fallback: '30d', custom: true }) },
-    })
-    const probe = sink()
-
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard?range=custom&from=2026-01-01&to=2026-02-01',
-      Dashboard: fieldProbe(store.field.range, probe),
-    })
-
-    expect(probe.current?.value).toEqual({
-      preset: 'custom',
-      from: '2026-01-01',
-      to: '2026-02-01',
-    })
-  })
-})
-
-describe('use() — writing', () => {
-  test('a write from the owning route lands in the URL AND in the mirror', async () => {
-    const store = createSearchStore({
-      key: 'r-write',
-      fields: { range: field.enum(['1d', '7d'], '7d') },
-    })
-    const probe = sink()
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard',
-      Dashboard: fieldProbe(store.field.range, probe),
-    })
-
-    await act(async () => {
-      probe.current?.set('1d')
-    })
-
-    await waitFor(() => {
-      expect(currentSearch(router)['range']).toBe('1d')
-    })
-    expect(storedRecord('r-write')).toEqual({ range: '1d' })
-    expect(probe.current?.value).toBe('1d')
-  })
-
-  test('a range write clears a stale from/to when the preset stops being custom', async () => {
-    const store = createSearchStore({
-      key: 'r-range-clear',
-      fields: { range: field.range({ presets: ['7d', '30d'], fallback: '30d', custom: true }) },
-    })
-    const probe = sink()
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard?range=custom&from=2026-01-01&to=2026-02-01',
-      Dashboard: fieldProbe(store.field.range, probe),
-    })
-
-    await act(async () => {
-      probe.current?.set({ preset: '7d' })
-    })
-
-    await waitFor(() => {
-      expect(currentSearch(router)['range']).toBe('7d')
-    })
-    expect(currentSearch(router)['from']).toBeUndefined()
-    expect(currentSearch(router)['to']).toBeUndefined()
-  })
-
-  test('a write from a FOREIGN route persists only — it never navigates (A1)', async () => {
-    const store = createSearchStore({
-      key: 'r-foreign',
-      fields: { range: field.enum(['1d', '7d'], '7d') },
-    })
-    const probe = sink()
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/other',
-      Other: fieldProbe(store.field.range, probe),
-    })
-
-    await act(async () => {
-      probe.current?.set('1d')
-    })
-
-    expect(router.state.location.pathname).toBe('/other')
-    expect(currentSearch(router)['range']).toBeUndefined()
-    // …and `validateSearch` picks it up on the next visit to the owning route.
-    expect(storedRecord('r-foreign')).toEqual({ range: '1d' })
-    expect(store.validateSearch({})).toEqual({ range: '1d' })
-  })
-
-  test('`persist: false` writes the URL and never touches storage', async () => {
-    const store = createSearchStore({
-      key: 'r-nopersist',
-      fields: { page: field.number({ fallback: 1, int: true }, { persist: false }) },
-    })
-    const probe = sink()
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard',
-      Dashboard: fieldProbe(store.field.page, probe),
-    })
-
-    await act(async () => {
-      probe.current?.set(3)
-    })
-
-    await waitFor(() => {
-      expect(currentSearch(router)['page']).toBe(3)
-    })
-    expect(storedRecord('r-nopersist')).toBeNull()
-  })
-
-  test('`url: false` writes storage and never touches the URL', async () => {
-    const store = createSearchStore({
-      key: 'r-nourl',
-      fields: { compact: field.boolean(false, { url: false }) },
-    })
-    const probe = sink()
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard',
-      Dashboard: fieldProbe(store.field.compact, probe),
-    })
-
-    await act(async () => {
-      probe.current?.set(true)
-    })
-
-    await waitFor(() => {
-      expect(probe.current?.value).toBe(true)
-    })
-    expect(currentSearch(router)['compact']).toBeUndefined()
-    expect(storedRecord('r-nourl')).toEqual({ compact: true })
-  })
-  test('a `persist: false` write from a foreign route is a silent no-op — so it warns in dev', async () => {
-    const store = createSearchStore({
-      key: 'r-nowhere',
-      fields: { page: field.number({ fallback: 1, int: true }, { persist: false }) },
-    })
-    const probe = sink()
-    const warn = spyOn(console, 'warn').mockImplementation(() => {})
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/other',
-      Other: fieldProbe(store.field.page, probe),
-    })
-
-    await act(async () => {
-      probe.current?.set(3)
-    })
-
-    // No URL (this route validates no `page`), no mirror (the field opted out) — nothing happened.
-    expect(router.state.location.pathname).toBe('/other')
-    expect(currentSearch(router)['page']).toBeUndefined()
-    expect(storedRecord('r-nowhere')).toBeNull()
-    expect(warn).toHaveBeenCalledTimes(1)
-    expect(String(warn.mock.calls[0]?.[0])).toContain('persist: false')
-
-    // Once per field, not once per click.
-    await act(async () => {
-      probe.current?.set(4)
-    })
-    expect(warn).toHaveBeenCalledTimes(1)
-    warn.mockRestore()
-  })
-
-  test('a persisted field written from a foreign route does NOT warn — it has somewhere to go', async () => {
-    const store = createSearchStore({
-      key: 'r-nowhere-ok',
-      fields: { range: field.enum(['1d', '7d'], '7d') },
-    })
-    const probe = sink()
-    const warn = spyOn(console, 'warn').mockImplementation(() => {})
-
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/other',
-      Other: fieldProbe(store.field.range, probe),
-    })
-    await act(async () => {
-      probe.current?.set('1d')
-    })
-
-    expect(storedRecord('r-nowhere-ok')).toEqual({ range: '1d' })
-    expect(warn).not.toHaveBeenCalled()
-    warn.mockRestore()
-  })
-})
-
-describe('store hooks', () => {
-  test('useValues returns every URL-lane param, resolved', async () => {
-    const store = createSearchStore({
-      key: 'r-values',
-      fields: {
-        range: field.enum(['1d', '7d'], '1d'),
-        compare: field.enum(['none', 'previous'], 'none'),
-        compact: field.boolean(false, { url: false }),
-      },
-    })
-    persist('r-values', { compare: 'previous', compact: true })
-    const seen: { current: Record<string, unknown> | null } = { current: null }
-
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard?range=7d',
-      Dashboard: () => {
-        seen.current = store.useValues()
-        return null
-      },
-    })
-
-    expect(seen.current).toEqual({ range: '7d', compare: 'previous' })
-  })
-
-  test('useActiveCount counts the fields that differ from their fallback — both lanes', async () => {
-    const store = createSearchStore({
-      key: 'r-count',
-      fields: {
-        range: field.enum(['1d', '7d'], '1d'),
-        compare: field.enum(['none', 'previous'], 'none'),
-        compact: field.boolean(false, { url: false }),
-      },
-    })
-    persist('r-count', { compact: true })
-    let count = -1
-
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard?range=7d',
-      Dashboard: () => {
-        count = store.useActiveCount()
-        return null
-      },
-    })
-
-    // range (URL) + compact (local); compare is still its fallback.
-    expect(count).toBe(2)
-  })
-
-  test('useReset returns every field to its fallback in ONE navigate call', async () => {
-    const store = createSearchStore({
-      key: 'r-reset',
-      fields: {
-        range: field.range({ presets: ['7d', '30d'], fallback: '30d', custom: true }),
-        compare: field.enum(['none', 'previous'], 'none'),
-        compact: field.boolean(false, { url: false }),
-      },
-    })
-    persist('r-reset', { compact: true })
-    let reset: (() => void) | null = null
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard?range=custom&from=2026-01-01&to=2026-02-01&compare=previous',
-      Dashboard: () => {
-        reset = store.useReset()
-        return null
-      },
-    })
-
-    const navigate = spyOn(router, 'navigate')
-    await act(async () => {
-      reset?.()
-    })
-
-    expect(navigate).toHaveBeenCalledTimes(1)
-    await waitFor(() => {
-      expect(currentSearch(router)['range']).toBe('30d')
-    })
-    expect(currentSearch(router)['compare']).toBe('none')
-    expect(currentSearch(router)['from']).toBeUndefined()
-    expect(storedRecord('r-reset')).toEqual({
-      range: { preset: '30d' },
-      compare: 'none',
-      compact: false,
-    })
-    navigate.mockRestore()
-  })
-
-  test('useReset from a FOREIGN route persists only — it never navigates (A1)', async () => {
-    const store = createSearchStore({
-      key: 'r-reset-foreign',
-      fields: {
-        range: field.enum(['1d', '7d'], '7d'),
-        compare: field.enum(['none', 'prev'], 'none'),
-      },
-    })
-    let reset: (() => void) | null = null
-    const probe = sink()
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/other',
-      Other: () => {
-        reset = store.useReset()
-        const [value, set] = store.field.range.use()
-        probe.current = { value, set: set as (next: unknown) => void }
-        return null
-      },
-    })
-
-    const navigate = spyOn(router, 'navigate')
-    await act(async () => {
-      reset?.()
-    })
-
-    expect(navigate).not.toHaveBeenCalled()
-    expect(router.state.location.pathname).toBe('/other')
-    expect(currentSearch(router)['range']).toBeUndefined()
-    expect(currentSearch(router)['compare']).toBeUndefined()
-
-    // …and a subsequent field write on that same foreign route still persists only — the reset
-    // did not leak the params into the URL and flip the route into looking like an owner.
-    await act(async () => {
-      probe.current?.set('1d')
-    })
-    expect(navigate).not.toHaveBeenCalled()
-    expect(currentSearch(router)['range']).toBeUndefined()
-    navigate.mockRestore()
-  })
-})
-
-/**
- * Every navigate a store issues carries `resetScroll: false`. A filter is as often halfway down a
- * page as it is in the bar, and the router treats a same-route search write as a navigation — so
- * the default would scroll the reader back to the top on every change. Asserted on the OPTION and
- * not on a scroll position: happy-dom evaluates no layout, so the scroll itself is invisible here.
- */
-describe('store writes never scroll the page', () => {
-  test('a field write passes resetScroll: false', async () => {
-    const store = createSearchStore({
-      key: 'r-scroll-field',
-      fields: { range: field.enum(['1d', '7d'], '7d') },
-    })
-    const probe = sink()
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard',
-      Dashboard: fieldProbe(store.field.range, probe),
-    })
-
-    const navigate = spyOn(router, 'navigate')
-    await act(async () => {
-      probe.current?.set('1d')
-    })
-
-    expect(navigate).toHaveBeenCalledTimes(1)
-    expect(navigate.mock.calls[0]?.[0]).toMatchObject({ resetScroll: false })
-    navigate.mockRestore()
-  })
-
-  test('useReset passes resetScroll: false', async () => {
-    const store = createSearchStore({
-      key: 'r-scroll-reset',
-      fields: { range: field.enum(['1d', '7d'], '7d') },
-    })
-    let reset: (() => void) | null = null
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard?range=1d',
-      Dashboard: () => {
-        reset = store.useReset()
-        return null
-      },
-    })
-
-    const navigate = spyOn(router, 'navigate')
-    await act(async () => {
-      reset?.()
-    })
-
-    expect(navigate).toHaveBeenCalledTimes(1)
-    expect(navigate.mock.calls[0]?.[0]).toMatchObject({ resetScroll: false })
-    navigate.mockRestore()
-  })
-})
-
-/**
- * `{ url: false, persist: false }` — the third lane. It used to be the one combination that dropped
- * its write (no URL to put it in, no mirror to keep it in); it is now the same session-shared
- * in-memory lane `createLocalStore` gives such a field, through the same store-core helper.
- */
-const memoryStore = () =>
-  createSearchStore({
-    key: 'r-memory',
-    fields: {
-      range: field.enum(['1d', '7d'], '7d'),
-      scratch: field.enum(['a', 'b', 'c'], 'a', { url: false, persist: false }),
-    },
-  })
-
-describe('the memory-only lane — url: false, persist: false', () => {
-  test('a write survives a remount, and touches neither the URL nor localStorage', async () => {
-    const store = memoryStore()
-    const probe = sink()
-    const warn = spyOn(console, 'warn').mockImplementation(() => {})
-
-    const router = await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard',
-      Dashboard: fieldProbe(store.field.scratch, probe),
-    })
-
-    await act(async () => {
-      probe.current?.set('c')
-    })
-    expect(probe.current?.value).toBe('c')
-
-    // No URL param (the field declares none, so `validateSearch` never emits one) and no mirror.
-    expect(currentSearch(router)['scratch']).toBeUndefined()
-    expect(storedRecord('r-memory')).toBeNull()
-    // …and no dev warning: the write went somewhere.
-    expect(warn).not.toHaveBeenCalled()
-    warn.mockRestore()
-
-    // A remount inside the same session reads it back — the lane is the store's, not the mount's.
-    cleanup()
-    const second = sink()
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard',
-      Dashboard: fieldProbe(store.field.scratch, second),
-    })
-    expect(second.current?.value).toBe('c')
-  })
-
-  test('useActiveCount counts it, and useReset returns it to its fallback', async () => {
-    const store = memoryStore()
-    const probe = sink()
-    let count = -1
-    let reset: (() => void) | null = null
-
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard',
-      Dashboard: () => {
-        count = store.useActiveCount()
-        reset = store.useReset()
-        return fieldProbe(store.field.scratch, probe)()
-      },
-    })
-
-    expect(count).toBe(0)
-
-    await act(async () => {
-      probe.current?.set('b')
-    })
-    expect(count).toBe(1)
-
-    await act(async () => {
-      reset?.()
-    })
-    expect(probe.current?.value).toBe('a')
-    expect(count).toBe(0)
-    // `useReset` wrote the MIRROR for the persisted field beside it; the memory field is not in it.
-    expect(storedRecord('r-memory')).toEqual({ range: '7d' })
-  })
-
-  test('two mounts of the same field see one value', async () => {
-    const store = memoryStore()
-    const a = sink()
-    const b = sink()
-
-    await mountApp({
-      validateSearch: store.validateSearch,
-      entry: '/dashboard/detail',
-      Dashboard: fieldProbe(store.field.scratch, a),
-      Detail: fieldProbe(store.field.scratch, b),
-    })
-
-    await act(async () => {
-      a.current?.set('b')
-    })
-
-    expect(b.current?.value).toBe('b')
-  })
-})