index.ts 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. /**
  2. * jsdom slot test runtime: a real small runtime — Cordis `Context`, the
  3. * renderer-owned `SlotRegistry`, the `ui-session` adapter, and the UI renderer — assembled around
  4. * test-owned session/workspace doubles and a fail-loud file-upload stub, so feature specs exercise
  5. * declaration, registration, scope, store, inject, rendering, updates, and
  6. * disposal without hand-building the machinery per suite.
  7. *
  8. * Not part of the product plugin graph (no `dsh.client`); feature packages
  9. * depend on it in devDependencies only. It copies no SlotCore/renderer/store
  10. * machinery — everything mounts the production implementations.
  11. * @module @deepseek-ai/dsh-client-test-runtime
  12. */
  13. /* oxlint-disable typescript/no-redundant-type-constituents --
  14. * `keyof SlotMap & string` is the declare-merge key pattern (see ui-slots):
  15. * this compilation unit sees only the runtime's 'root' row, but consumer
  16. * programs merge their own keys in; the rule fires on the narrow-map view. */
  17. import { Context, Inject } from '@deepseek-ai/cordis'
  18. import type { Fiber, Plugin } from '@deepseek-ai/cordis'
  19. import { createElement, Fragment, useSyncExternalStore } from 'react'
  20. import type { ReactNode } from 'react'
  21. import { act, render, within } from '@testing-library/react'
  22. import type { RenderResult } from '@testing-library/react'
  23. import type { queries } from '@testing-library/dom'
  24. import type { BoundFunctions } from '@testing-library/dom'
  25. import { SlotRegistry } from '@deepseek-ai/dsh-client-ui-renderer/client'
  26. import { bindSnapshotSelector as bindRendererSnapshotSelector } from '@deepseek-ai/dsh-client-ui-renderer/src/client/bind.ts'
  27. import { createSlotRenderer as createRenderer } from '@deepseek-ai/dsh-client-ui-renderer/src/client/scoped-slots.tsx'
  28. import {
  29. apply as applyUiSession, inject as uiSessionInject,
  30. } from '@deepseek-ai/dsh-client-ui-session/client'
  31. import type { SessionId } from '@deepseek-ai/dsh-session/types'
  32. import { createSnapshotStore } from '@deepseek-ai/dsh-client-store'
  33. import type { PanelInfo } from '@deepseek-ai/dsh-client-ui-layout/client'
  34. import type {
  35. ChildrenDecl, ComposedProps, HostObservable, OwnerOf, RenderOpts, SlotComponent, SlotMap, SlotRenderer,
  36. SlotRendererHost, SnapshotSelectorHook, StoreInstanceLike,
  37. } from '@deepseek-ai/dsh-client-ui-slots'
  38. import { registerDomSnapshotSerializer } from './snapshot.ts'
  39. import { TestSessions } from './sessions.ts'
  40. import { TestWorkspaces } from './workspaces.ts'
  41. import type { Stabilizer } from './fixtures.ts'
  42. export type { UseSession } from '@deepseek-ai/dsh-client-ui-session/client'
  43. export { domSnapshotSerializer, registerDomSnapshotSerializer } from './snapshot.ts'
  44. export { FixtureSession, TestSessions } from './sessions.ts'
  45. export { stubSettingsScope } from './settings-scope.ts'
  46. export type { StubSettingsScope } from './settings-scope.ts'
  47. export { TestWorkspaces } from './workspaces.ts'
  48. export { RemoteError, TestRemote } from './remote.ts'
  49. export {
  50. chatSnapshot, conversationSnapshot, sessionSnapshot, workspaceSnapshot,
  51. } from './fixtures.ts'
  52. export type {
  53. FixtureSnapshot, SessionBehaviorOverrides, SessionFixture, SessionFixtureSnapshot, Stabilizer,
  54. } from './fixtures.ts'
  55. export { makeTranslate } from './translate.ts'
  56. export { usePinnedBrowserLanguages } from './locale-env.ts'
  57. /**
  58. * Bind an observable source to the production renderer's selector hook.
  59. * @param source - Observable snapshot source.
  60. * @returns Typed React selector hook.
  61. */
  62. export function bindSnapshotSelector<T>(source: HostObservable<T>): SnapshotSelectorHook<T> {
  63. return bindRendererSnapshotSelector(source)
  64. }
  65. /**
  66. * Create the production slot renderer used by client feature tests.
  67. * @returns Slot renderer instance.
  68. */
  69. export function createSlotRenderer(): SlotRenderer {
  70. return createRenderer()
  71. }
  72. /** Erased register face for the internal root call (the public declaration contract holds the typing). */
  73. type ErasedRegister = (options: object, component: unknown) => () => void
  74. /**
  75. * One rendered slot's local view, from {@link SlotTestRuntime.renderSlot}:
  76. * the renderer's own `[data-slot]` outlet anchor is the snapshot root
  77. * (`expect(view.container).toMatchSnapshot()` captures exactly this slot's
  78. * output), Testing Library queries are bound inside it, and `update`
  79. * re-renders with new owner props.
  80. */
  81. export interface SlotView<K extends keyof SlotMap & string> {
  82. /** The renderer's `<div data-slot="<key>">` anchor around the slot's rendered output. */
  83. readonly container: HTMLElement
  84. /** Testing Library queries scoped to {@link SlotView.container}. */
  85. readonly view: BoundFunctions<typeof queries>
  86. /**
  87. * Replace the owner props and flush the re-render (the render-site update:
  88. * in production the owner recomputes the share and React re-renders).
  89. * @param owner - the next owner props share.
  90. */
  91. update(owner: OwnerOf<K>): void
  92. }
  93. /**
  94. * Mounted feature plugin handle: the live fiber plus an act-wrapped,
  95. * idempotent dispose (unload cascade: entries, declared child slots, store
  96. * instances, and provided services all fall together).
  97. */
  98. export interface FeatureHandle {
  99. /** The plugin's live Cordis fiber (state assertions, escape hatch). */
  100. readonly fiber: Fiber
  101. /**
  102. * Dispose the plugin fiber inside React act; repeated calls no-op.
  103. * @returns completion of the unload cascade.
  104. */
  105. dispose(): Promise<void>
  106. }
  107. /** Mutable fail-loud file-upload stub installed by {@link SlotTestRuntime}. */
  108. export interface TestFileUpload {
  109. /** Test-supplied upload behavior; the default rejects every call. */
  110. upload: (sessionId: SessionId, ...args: unknown[]) => Promise<unknown>
  111. }
  112. /**
  113. * Owner-props cell behind the auto frame: one external store the frame
  114. * subscribes to, so {@link SlotTestRuntime.renderSlot} and
  115. * {@link SlotView.update} drive React through the standard uSES boundary.
  116. */
  117. class OwnerPropsCell {
  118. private readonly owners = new Map<string, { owner: object; opts: RenderOpts | undefined }>()
  119. private readonly listeners = new Set<() => void>()
  120. private version = 0
  121. /** Snapshot version for uSES pairing (bumped on every set). */
  122. readonly getVersion = (): number => this.version
  123. /**
  124. * Subscribe to owner-props changes.
  125. * @param fn - change callback.
  126. * @returns unsubscribe.
  127. */
  128. readonly subscribe = (fn: () => void): (() => void) => {
  129. this.listeners.add(fn)
  130. return () => { this.listeners.delete(fn) }
  131. }
  132. /**
  133. * Install or replace one key's owner props and notify (synchronous; the
  134. * caller wraps in act).
  135. * @param key - slot key.
  136. * @param owner - owner props share.
  137. * @param opts - explicit keyed or list selection for the render site.
  138. */
  139. set(key: string, owner: object, opts?: RenderOpts): void {
  140. this.owners.set(key, { owner, opts })
  141. this.version += 1
  142. for (const fn of [...this.listeners]) fn()
  143. }
  144. /** Keys with supplied owner props, in first-supply order. */
  145. entries(): readonly (readonly [string, { owner: object; opts: RenderOpts | undefined }])[] {
  146. return [...this.owners.entries()]
  147. }
  148. }
  149. /**
  150. * The test-owned 'root' occupant: declares the child slots a suite needs
  151. * through the REAL `slots.register`, with a caller-supplied minimal frame —
  152. * the runtime never guesses a feature's page structure.
  153. */
  154. export class TestRoot {
  155. private disposeEntry: (() => void) | undefined
  156. /**
  157. * @param slots - the runtime SlotRegistry.
  158. * @param stabilize - the owning runtime's act wrapper.
  159. */
  160. constructor(private readonly slots: SlotRegistry, private readonly stabilize: Stabilizer) {}
  161. /**
  162. * Register the root frame, declaring (and thereby claiming) the child
  163. * slots. One declaration per runtime — a second call fails loud in the
  164. * core ('root' is a single slot).
  165. * @param children - child-slot declaration table (declaration + render authorization + runtime spec).
  166. * @param frame - minimal frame component; its props derive from the declared keys (composed-props contract).
  167. * @returns completion of the act-wrapped registration.
  168. */
  169. async declare<const D extends ChildrenDecl>(
  170. children: D,
  171. frame: SlotComponent<ComposedProps<'root', never, keyof NoInfer<D> & keyof SlotMap & string, undefined, object>>,
  172. ): Promise<void> {
  173. await this.stabilize(() => {
  174. // Erased hop (same pattern as SlotRegistry's own implementation arm);
  175. // the declaration signature above is the typed contract.
  176. this.disposeEntry = (this.slots.register as unknown as ErasedRegister)({ name: 'root', children }, frame)
  177. })
  178. }
  179. /** Remove the root registration and collapse its declarations (runtime dispose path). */
  180. release(): void {
  181. this.disposeEntry?.()
  182. this.disposeEntry = undefined
  183. }
  184. }
  185. /**
  186. * The assembled test runtime. Obtain via {@link SlotTestRuntime.create};
  187. * dispose with {@link SlotTestRuntime.dispose} (afterEach). Public mutators
  188. * are act-wrapped throughout — tests never handle SlotCore microtask
  189. * batching or React act themselves.
  190. */
  191. export class SlotTestRuntime {
  192. /** The runtime's Cordis root for owner APIs and explicit test-only services. */
  193. readonly ctx: Context
  194. /** The production SlotRegistry mounted on {@link SlotTestRuntime.ctx}. */
  195. readonly slots: SlotRegistry
  196. /** The test-owned 'root' occupant. */
  197. readonly root: TestRoot
  198. /** Sessions double (list/current observable, cells, scopes, behavior faces). */
  199. readonly sessions: TestSessions
  200. /** Workspaces double (list observable, recorded intent actions). */
  201. readonly workspaces: TestWorkspaces
  202. /** Test-owned panel selection used by the framework's usePanelInfo hook. */
  203. readonly panelInfo = createSnapshotStore<PanelInfo>({ activePanelId: null })
  204. /** Mutable file-upload stub; replace `upload` in suites that exercise the capability. */
  205. readonly fileUpload: TestFileUpload
  206. private readonly stabilizer: Stabilizer = async (fn) => {
  207. await act(async () => { await fn() })
  208. }
  209. private host: SlotRendererHost | undefined
  210. private readonly views: RenderResult[] = []
  211. private readonly handles: FeatureHandle[] = []
  212. private disposed = false
  213. /** Auto-frame state ({@link SlotTestRuntime.declare} / {@link SlotTestRuntime.renderSlot}). */
  214. private readonly ownerCell = new OwnerPropsCell()
  215. private readonly autoDeclared = new Set<string>()
  216. private autoRootView: RenderResult | undefined
  217. private readonly disposeWorkspaceSource: () => void
  218. private readonly disposePanelInfoSource: () => void
  219. private constructor(ctx: Context, slots: SlotRegistry) {
  220. this.ctx = ctx
  221. this.slots = slots
  222. this.root = new TestRoot(slots, this.stabilizer)
  223. this.sessions = new TestSessions(this.stabilizer, ctx)
  224. this.workspaces = new TestWorkspaces(this.stabilizer)
  225. this.fileUpload = {
  226. upload: () => Promise.reject(new Error('client test runtime: file upload is not stubbed')),
  227. }
  228. ctx.provide('sessions', this.sessions)
  229. ctx.provide('workspaces', this.workspaces)
  230. ctx.provide('fileUpload', this.fileUpload as never)
  231. this.disposeWorkspaceSource = slots.provideRoot({ hooks: { workspaces: this.workspaces.list } })
  232. this.disposePanelInfoSource = slots.provideRoot({ hooks: { panelInfo: this.panelInfo } })
  233. // Capturing install: the production renderer does the rendering; the
  234. // wrapper only takes the host face for storeOf (no machinery copied).
  235. const renderer = createSlotRenderer()
  236. slots.install({
  237. renderRoot: (host, ownerProps) => {
  238. this.host = host
  239. return renderer.renderRoot(host, ownerProps)
  240. },
  241. })
  242. }
  243. /**
  244. * Assemble a runtime: real Context, mounted SlotRegistry, installed
  245. * renderer, and the session/workspace doubles provided as services.
  246. * @returns the ready runtime.
  247. */
  248. static async create(): Promise<SlotTestRuntime> {
  249. registerDomSnapshotSerializer()
  250. const ctx = new Context()
  251. const fiber = ctx.plugin(SlotRegistry)
  252. await fiber.await()
  253. const runtime = new SlotTestRuntime(ctx, ctx.get('slots') as SlotRegistry)
  254. await ctx.plugin({ inject: [...uiSessionInject], apply: applyUiSession }).await()
  255. return runtime
  256. }
  257. /**
  258. * Mount a feature plugin on a real fiber. Required services are prechecked
  259. * so a missing provider fails loud instead of suspending the fiber forever
  260. * (deliberate load-order suspension tests use `ctx.plugin` directly).
  261. * @param plugin - plugin value (function, class, or `{ inject, apply }` object).
  262. * @returns handle owning the fiber's explicit disposal.
  263. */
  264. async mount(plugin: Plugin): Promise<FeatureHandle> {
  265. const required = Object.keys(Inject.resolve((plugin as { inject?: Inject }).inject))
  266. const missing = required.filter(name => this.ctx.get(name) === undefined)
  267. if (missing.length > 0) {
  268. throw new Error(`mount would suspend: missing service(s) ${missing.join(', ')} — provide() them first`)
  269. }
  270. const fiber = this.ctx.plugin(plugin)
  271. await this.stabilizer(async () => {
  272. await fiber.await()
  273. })
  274. let disposed = false
  275. const handle: FeatureHandle = {
  276. fiber,
  277. dispose: async () => {
  278. if (disposed) return
  279. disposed = true
  280. await this.stabilizer(() => fiber.dispose())
  281. },
  282. }
  283. this.handles.push(handle)
  284. return handle
  285. }
  286. /** Release the default Workspace hook before mounting its production owner. */
  287. releaseWorkspaceSource(): void {
  288. this.disposeWorkspaceSource()
  289. }
  290. /** Release the default panel hook before mounting the production Layout owner. */
  291. releasePanelInfoSource(): void {
  292. this.disposePanelInfoSource()
  293. }
  294. /**
  295. * Render the root slot tree through the ctx-level entry (the shell's own
  296. * entry point): `ctx.slots.renderSlot('root', {})` under Testing Library.
  297. * @returns the Testing Library view.
  298. */
  299. renderRoot(): RenderResult {
  300. const view = render(createElement(Fragment, null, this.slots.renderSlot('root', {})))
  301. this.views.push(view)
  302. return view
  303. }
  304. /**
  305. * Declare child slots under an auto-generated root frame — the single-slot
  306. * mounting path for local DOM snapshots. Each key later supplied through
  307. * {@link SlotTestRuntime.renderSlot} renders inside the renderer's own
  308. * `<div data-slot="<key>">` outlet anchor (the snapshot root — the frame
  309. * adds no wrapper of its own). Mutually exclusive with
  310. * {@link TestRoot.declare} ('root' is a single slot); one call per runtime.
  311. * @param children - child-slot declaration table (same contract as TestRoot.declare).
  312. * @returns completion of the act-wrapped registration.
  313. */
  314. async declare(children: ChildrenDecl): Promise<void> {
  315. for (const key of Object.keys(children)) this.autoDeclared.add(key)
  316. const cell = this.ownerCell
  317. const AutoFrame = (props: { renderSlot: (key: string, owner: object, opts?: RenderOpts) => ReactNode }) => {
  318. useSyncExternalStore(cell.subscribe, cell.getVersion)
  319. // Keyed Fragments only: the renderer's outlet anchor is the one
  320. // `[data-slot]` element — the frame adding its own would nest
  321. // duplicate anchors under the same key.
  322. return createElement(Fragment, null, cell.entries().map(([key, { owner, opts }]) =>
  323. createElement(Fragment, { key }, props.renderSlot(key, owner, opts))))
  324. }
  325. await this.root.declare(children as never, AutoFrame as never)
  326. }
  327. /**
  328. * Render one declared slot with its owner props and return the local view.
  329. * The whole root tree mounts through the production assembly path
  330. * (renderer, scope providers, store axis); only this key's output lands in
  331. * the returned container. Call again with another key to view a sibling
  332. * slot of the same tree.
  333. * @param key - a key declared through {@link SlotTestRuntime.declare}.
  334. * @param owner - owner props share for the render site.
  335. * @param opts - explicit keyed or list selection; retained by view updates.
  336. * @returns the slot-local view (snapshot container, scoped queries, owner updates).
  337. */
  338. renderSlot<K extends keyof SlotMap & string>(key: K, owner: OwnerOf<K>, opts?: RenderOpts): SlotView<K> {
  339. if (!this.autoDeclared.has(key)) {
  340. throw new Error(`renderSlot('${key}') without declare() — declare the key first (or use root.declare for a custom frame)`)
  341. }
  342. const install = (next: object): void => {
  343. // Synchronous cell write inside act: the frame re-renders through uSES.
  344. act(() => {
  345. this.ownerCell.set(key, next, opts)
  346. })
  347. }
  348. install(owner)
  349. this.autoRootView ??= this.renderRoot()
  350. const container = this.autoRootView.container.querySelector(`[data-slot="${key}"]`)
  351. if (!(container instanceof HTMLElement)) {
  352. throw new Error(`renderSlot('${key}'): the auto frame rendered no wrapper — was the runtime already disposed?`)
  353. }
  354. return { container, view: within(container), update: install }
  355. }
  356. /**
  357. * Resolve the store instance the renderer would hand a slot's component
  358. * (identity assertions, action-driven writes). Requires a prior
  359. * {@link SlotTestRuntime.renderRoot} — the host face exists only inside the
  360. * installed renderer, exactly as in production.
  361. * @param key - slot key whose first entry declares the store.
  362. * @param scopeKey - session id for session-scope slots; omit for root scope.
  363. * @returns the live store instance.
  364. */
  365. storeOf(key: keyof SlotMap & string, scopeKey?: string): StoreInstanceLike {
  366. if (this.host === undefined) {
  367. throw new Error('storeOf before renderRoot() — the host face exists only inside the installed renderer')
  368. }
  369. const entry = this.host.entriesOf(key)[0]
  370. if (entry === undefined) throw new Error(`storeOf('${key}'): no registration on the ledger`)
  371. const scopeBinding = scopeKey === undefined
  372. ? undefined
  373. : this.host.scope('session')?.resolve(scopeKey)
  374. if (scopeKey !== undefined && scopeBinding === undefined) {
  375. throw new Error(`storeOf('${key}'): no live Session binding for '${scopeKey}'`)
  376. }
  377. const instance = this.host.storeOf(entry, scopeBinding)
  378. if (instance === undefined) throw new Error(`storeOf('${key}'): the entry declares no store`)
  379. return instance
  380. }
  381. /**
  382. * Flush pending ledger/store notifications inside act — for mutations made
  383. * outside the runtime's own methods (e.g. a direct `slots.register`).
  384. * @returns completion of the act pass.
  385. */
  386. async flush(): Promise<void> {
  387. await this.stabilizer(() => {})
  388. }
  389. /**
  390. * Tear down: unmount React trees first, then dispose feature fibers, the
  391. * root registration and standard sources, minted session scopes, and persisted test state.
  392. * Idempotent.
  393. * @returns completion of the teardown.
  394. */
  395. async dispose(): Promise<void> {
  396. if (this.disposed) return
  397. this.disposed = true
  398. this.autoRootView = undefined
  399. for (const view of this.views.splice(0)) view.unmount()
  400. for (const handle of this.handles.splice(0)) await handle.dispose()
  401. this.root.release()
  402. this.disposeWorkspaceSource()
  403. this.disposePanelInfoSource()
  404. await this.sessions.disposeScopes()
  405. localStorage.clear()
  406. }
  407. }