one 1.17.10 → 1.17.11

package/src/router/web/__tests__/WebStackView.runtime.test.tsx

@@ -0,0 +1,309 @@
+import { describe, expect, it, vi } from 'vitest'
+import React, { createElement, useId, useState, type ReactNode } from 'react'
+import TestRenderer, { act } from 'react-test-renderer'
+
+import { WebStackView } from '../WebStackView'
+import { StackRenderProvider, type StackRender } from '../ScreenRenderContext'
+
+function makeRoute(name: string) {
+  return { key: `${name}-key`, name, params: undefined }
+}
+
+function makeState(names: string[], index: number) {
+  return {
+    key: 'stack-1',
+    index,
+    routeNames: names,
+    routes: names.map(makeRoute),
+    type: 'stack',
+    stale: false,
+    preloadedRoutes: [],
+  } as any
+}
+
+type DescOpts = {
+  options: any
+  content: ReactNode
+}
+
+function makeDescriptors(perRoute: Record<string, DescOpts>) {
+  const out: Record<string, any> = {}
+  for (const name of Object.keys(perRoute)) {
+    out[`${name}-key`] = {
+      options: perRoute[name]!.options,
+      render: () => perRoute[name]!.content,
+      navigation: {},
+    }
+  }
+  return out
+}
+
+// Default render used in regular (non-keepMounted) tests: unmounts content
+// when closed.
+const PassThroughRender = ({ children, open }: any) =>
+  open ? createElement('div', { 'data-open': 'true' }, children) : null
+
+// Render that keeps children mounted when closed - required for keepMounted
+// to actually preserve component state. Mirrors how Tamagui Sheet / Vaul
+// behave when `modal` is true and `open` toggles.
+const KeepMountedRender = ({ children, open }: any) =>
+  createElement(
+    'div',
+    {
+      'data-open': String(open),
+      style: { display: open ? 'block' : 'none' },
+    },
+    children
+  )
+
+// A probe component that exposes its id via a callback so we can assert
+// identity stability across re-renders.
+function IdProbe({ onId }: { onId: (id: string) => void }) {
+  const id = useId()
+  React.useEffect(() => {
+    onId(id)
+  }, [id, onId])
+  return createElement('span', { 'data-id': id })
+}
+
+// A probe that tracks how often it mounts (effect runs with []).
+function MountProbe({ onMount }: { onMount: () => void }) {
+  React.useEffect(() => {
+    onMount()
+  }, [onMount])
+  return null
+}
+
+// A probe with internal state we can manipulate via a captured setter.
+function StatefulProbe({
+  initial,
+  onMount,
+}: {
+  initial: number
+  onMount: (setter: (v: number) => void) => void
+}) {
+  const [value, setValue] = useState(initial)
+  React.useEffect(() => {
+    onMount(setValue)
+  }, [onMount])
+  return createElement('span', { 'data-value': String(value) })
+}
+
+describe('useId stability', () => {
+  it('returns the same id across parent re-renders for the same mount', () => {
+    const captured: string[] = []
+    const onId = (id: string) => captured.push(id)
+
+    const state = makeState(['home', 'sheet'], 1)
+    const descriptors = makeDescriptors({
+      home: { options: { presentation: 'card' }, content: null },
+      sheet: {
+        options: { presentation: 'formSheet' },
+        content: createElement(IdProbe, { onId }),
+      },
+    })
+    const navigation = { dispatch: vi.fn() } as any
+
+    let testRoot: TestRenderer.ReactTestRenderer
+    act(() => {
+      testRoot = TestRenderer.create(
+        createElement(
+          StackRenderProvider,
+          { value: { web: KeepMountedRender } as StackRender },
+          createElement(WebStackView, {
+            state,
+            navigation,
+            descriptors: descriptors as any,
+          })
+        )
+      )
+    })
+
+    const firstId = captured.at(-1)!
+    expect(firstId).toBeTruthy()
+
+    // Force the parent to re-render with the same state. The route's
+    // useId must return the same value.
+    act(() => {
+      testRoot!.update(
+        createElement(
+          StackRenderProvider,
+          { value: { web: KeepMountedRender } as StackRender },
+          createElement(WebStackView, {
+            state,
+            navigation,
+            descriptors: descriptors as any,
+          })
+        )
+      )
+    })
+
+    const secondId = captured.at(-1)!
+    expect(secondId).toBe(firstId)
+  })
+})
+
+describe('regular overlay (no keepMounted) lifecycle', () => {
+  it('mounts once on open, unmounts on pop', () => {
+    const mounts: number[] = []
+    const onMount = () => mounts.push(Date.now())
+
+    const stateOpen = makeState(['home', 'sheet'], 1)
+    const stateClosed = makeState(['home'], 0)
+    const descriptors = makeDescriptors({
+      home: { options: { presentation: 'card' }, content: null },
+      sheet: {
+        options: { presentation: 'formSheet' },
+        content: createElement(MountProbe, { onMount }),
+      },
+    })
+    const navigation = { dispatch: vi.fn() } as any
+
+    let testRoot: TestRenderer.ReactTestRenderer
+    act(() => {
+      testRoot = TestRenderer.create(
+        createElement(
+          StackRenderProvider,
+          { value: { web: KeepMountedRender } as StackRender },
+          createElement(WebStackView, {
+            state: stateOpen,
+            navigation,
+            descriptors: descriptors as any,
+          })
+        )
+      )
+    })
+    expect(mounts).toHaveLength(1)
+
+    // Re-render with sheet popped. Mount probe should NOT mount again on
+    // re-renders, but it WILL unmount because the route is gone.
+    act(() => {
+      testRoot!.update(
+        createElement(
+          StackRenderProvider,
+          { value: { web: KeepMountedRender } as StackRender },
+          createElement(WebStackView, {
+            state: stateClosed,
+            navigation,
+            descriptors: descriptors as any,
+          })
+        )
+      )
+    })
+    expect(mounts).toHaveLength(1)
+
+    // Re-open the sheet (new route key would normally be assigned but for
+    // this test we reuse). Mount probe re-mounts because the previous
+    // mount unmounted.
+    act(() => {
+      testRoot!.update(
+        createElement(
+          StackRenderProvider,
+          { value: { web: KeepMountedRender } as StackRender },
+          createElement(WebStackView, {
+            state: stateOpen,
+            navigation,
+            descriptors: descriptors as any,
+          })
+        )
+      )
+    })
+    expect(mounts).toHaveLength(2)
+  })
+})
+
+describe('keepMounted overlay lifecycle', () => {
+  it('survives dismissal: state persists when route is popped and re-opened', () => {
+    const mounts: number[] = []
+    let setValue: ((v: number) => void) | undefined
+
+    const stateOpen = makeState(['home', 'settings'], 1)
+    const stateClosed = makeState(['home'], 0)
+
+    // Stable content reference - re-creating it would break the persistent
+    // slot's element identity. In real navigation, descriptor.render() is
+    // called only once when the route is first captured; here we mimic
+    // that by computing it once.
+    const stableContent = createElement(StatefulProbe, {
+      initial: 7,
+      onMount: (setter) => {
+        mounts.push(Date.now())
+        setValue = setter
+      },
+    })
+
+    const descriptors = makeDescriptors({
+      home: { options: { presentation: 'card' }, content: null },
+      settings: {
+        options: { presentation: 'formSheet', keepMounted: true },
+        content: stableContent,
+      },
+    })
+    const navigation = { dispatch: vi.fn() } as any
+
+    let testRoot: TestRenderer.ReactTestRenderer
+    act(() => {
+      testRoot = TestRenderer.create(
+        createElement(
+          StackRenderProvider,
+          { value: { web: KeepMountedRender } as StackRender },
+          createElement(WebStackView, {
+            state: stateOpen,
+            navigation,
+            descriptors: descriptors as any,
+          })
+        )
+      )
+    })
+    expect(mounts).toHaveLength(1)
+    expect(typeof setValue).toBe('function')
+
+    // Mutate the state of the mounted component.
+    act(() => {
+      setValue!(42)
+    })
+
+    // Re-render with the route popped from navigation state. Persistent
+    // slot keeps rendering the captured element with open=false.
+    act(() => {
+      testRoot!.update(
+        createElement(
+          StackRenderProvider,
+          { value: { web: KeepMountedRender } as StackRender },
+          createElement(WebStackView, {
+            state: stateClosed,
+            navigation,
+            // descriptor for 'settings' no longer present in state.routes -
+            // we keep the same map so the captured slot still works.
+            descriptors: descriptors as any,
+          })
+        )
+      )
+    })
+    // Mount probe should NOT remount; only one mount across the lifecycle.
+    expect(mounts).toHaveLength(1)
+
+    // Re-open: persistent slot's open transitions to true. Component
+    // instance must be the same - value should still be 42 not 7.
+    act(() => {
+      testRoot!.update(
+        createElement(
+          StackRenderProvider,
+          { value: { web: KeepMountedRender } as StackRender },
+          createElement(WebStackView, {
+            state: stateOpen,
+            navigation,
+            descriptors: descriptors as any,
+          })
+        )
+      )
+    })
+    expect(mounts).toHaveLength(1)
+
+    // Inspect the rendered output for the persisted value.
+    const tree = testRoot!.toJSON() as any
+    const json = JSON.stringify(tree)
+    expect(json).toContain('"data-value":"42"')
+    expect(json).not.toContain('"data-value":"7"')
+  })
+})