built-boot.expected.e2e.ts 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. // @vitest-environment jsdom
  2. // The built-bundle boot smoke: the assembled-jsdom test that owns the boot
  3. // graph itself. Other files share the same scaffolding (assembled-boot.ts) to
  4. // reach a surface only the built bundles expose; this one asserts that the
  5. // graph assembles at all — staged activation across the immediately tier and
  6. // the inject layers, per-plugin CSS injection, and a rendered journey reaching
  7. // chat content from the keyless FixtureApiClient transport.
  8. //
  9. // Component behavior remains owned by per-package suites (SlotTestRuntime
  10. // benches over src). This smoke additionally pins the resident interaction
  11. // fixture's cross-plugin projection because only the built connection,
  12. // Controller, UI adapter, and Workspace graph can prove that transport-to-row
  13. // path end to end.
  14. import { resolve } from 'node:path'
  15. import { act, fireEvent, screen, waitFor, within } from '@testing-library/react'
  16. import { expect, it } from 'vitest'
  17. import { installAssembledBootEnv, mountAssembledApp } from './assembled-boot.ts'
  18. installAssembledBootEnv()
  19. const buildEnvironmentModulePath = '../../../scripts/client-build-environment.ts'
  20. const buildEnvironmentModule: unknown = await import(buildEnvironmentModulePath)
  21. if (typeof buildEnvironmentModule !== 'object' || buildEnvironmentModule === null) {
  22. throw new TypeError('client build environment module must be an object')
  23. }
  24. const readClientBuildRecord: unknown = Reflect.get(buildEnvironmentModule, 'readClientBuildRecord')
  25. if (!isBuildRecordReader(readClientBuildRecord)) {
  26. throw new TypeError('client build environment module must export readClientBuildRecord')
  27. }
  28. const record: unknown = readClientBuildRecord(resolve(import.meta.dirname, '../../..'))
  29. if (typeof record !== 'object' || record === null) throw new TypeError('client build record must be an object')
  30. const clientBuildEnvironment = requireObject(
  31. Reflect.get(record, 'environment'),
  32. 'client build record environment must be an object',
  33. )
  34. function isBuildRecordReader(value: unknown): value is (root: string) => unknown {
  35. return typeof value === 'function'
  36. }
  37. function requireObject(value: unknown, message: string): Record<string, unknown> {
  38. if (!isUnknownRecord(value)) throw new TypeError(message)
  39. return value
  40. }
  41. function isUnknownRecord(value: unknown): value is Record<string, unknown> {
  42. return typeof value === 'object' && value !== null
  43. }
  44. /** Read one optional string from the verified client build record. */
  45. function clientBuildValue(name: string): string | undefined {
  46. const value = clientBuildEnvironment[name]
  47. if (value !== undefined && typeof value !== 'string') {
  48. throw new TypeError(`client build record environment ${name} must be a string`)
  49. }
  50. return value
  51. }
  52. it('boots the built plugin graph and renders a fixture session end to end', async () => {
  53. mountAssembledApp()
  54. // The sidebar renders from the boot graph: every inject layer activated.
  55. const tree = await screen.findByRole('tree', { name: 'Sessions' }, { timeout: 10_000 })
  56. if (clientBuildValue('DSH_CLIENT_BUILD_PROFILE') === 'official') {
  57. expect(document.querySelector('svg[viewBox="26 0 156 24"]')).not.toBeNull()
  58. expect(screen.queryByText('DSH Local Build')).toBeNull()
  59. } else {
  60. expect(document.querySelector('svg[viewBox="0 0 23.16 17.04"]')).not.toBeNull()
  61. const version = clientBuildValue('DSH_CLIENT_VERSION')
  62. if (version === undefined) throw new Error('default client build record must carry DSH_CLIENT_VERSION')
  63. const commit = clientBuildValue('DSH_CLIENT_COMMIT_HASH')
  64. const buildVersion = version
  65. + (commit === undefined ? '' : `-${commit}`)
  66. + (clientBuildValue('DSH_CLIENT_GIT_DIRTY') === 'true' ? '-dirty' : '')
  67. screen.getByText('DSH Local Build')
  68. screen.getByText(buildVersion)
  69. }
  70. // The compact layout dropped group session counts; the fixture workspace
  71. // group row renders immediately with its sessions beneath it.
  72. const fixtureGroup = (await within(tree).findAllByText('fixture'))
  73. .map(el => el.closest<HTMLElement>('[role="treeitem"]'))
  74. .find(el => el?.getAttribute('aria-expanded') !== null)
  75. if (fixtureGroup === undefined) throw new Error('fixture Workspace group missing')
  76. // The resident fixture has both a question and an approval; composer routing
  77. // exposes the question first, and the assembled workspace plugin mirrors that
  78. // actionable wait instead of the underlying running state.
  79. const waitingTitle = await within(tree).findByText('Fixture 历史会话')
  80. const waitingRow = waitingTitle.closest<HTMLElement>('[role="treeitem"]')
  81. if (waitingRow === null) throw new Error('fixture Session title must belong to a tree row')
  82. expect(waitingRow.querySelector('[data-state="warning"]')).not.toBeNull()
  83. expect(waitingRow.querySelector('[data-state="ongoing"]')).toBeNull()
  84. within(waitingRow).getByText('Waiting for answer')
  85. // Opening a session reaches chat content through the fixture transport.
  86. fireEvent.click(waitingTitle)
  87. await waitFor(() => {
  88. expect(document.querySelector('[data-sample="bash"]')).not.toBeNull()
  89. }, { timeout: 10_000 })
  90. // The generated bundle roster mounts the question UI before the approval UI.
  91. // Skip the resident fixture's three questions, then resolve its approval so
  92. // the ordinary composer bar (which owns ContextMeter) resumes.
  93. for (let index = 0; index < 3; index += 1) {
  94. fireEvent.click(await screen.findByRole('button', { name: 'Skip this question' }))
  95. }
  96. fireEvent.click(await screen.findByRole('button', { name: 'Allow once' }))
  97. // The fixture mirrors all three token-meter projections, so the assembled
  98. // ContextMeter reaches its composition panel instead of only the occupancy
  99. // fallback path.
  100. const contextTrigger = await screen.findByRole('button', { name: /of context used/ })
  101. fireEvent.click(contextTrigger)
  102. const contextPanel = await screen.findByRole('dialog', { name: 'of context used' })
  103. within(contextPanel).getByText('System prompt')
  104. within(contextPanel).getByText('Tools')
  105. within(contextPanel).getByText('Messages')
  106. // The write/edit turns render a real diff card through the assembled graph
  107. // (the keyed FileMutationRow composing ToolRow + DiffBlock), not just the
  108. // fixture's raw text. The card is collapsed by default, so expand each edit/
  109. // write row first. The write turn's `hello fixture\n` proves the terminator
  110. // rule end to end: a trailing newline terminates its line, so the footer reads
  111. // `+1` (not a phantom `+2`) and one distinct file. The `+ ` prefix is a CSS
  112. // ::before, so it is absent from textContent — assert on the line body and the
  113. // footer.
  114. const mutationRows = [...document.querySelectorAll('[data-variant="write"],[data-variant="edit"]')]
  115. expect(mutationRows.length).toBeGreaterThan(0)
  116. for (const row of mutationRows) {
  117. const toggle = row.querySelector('[data-expandable]')
  118. if (toggle !== null) act(() => { fireEvent.click(toggle) })
  119. }
  120. const diffCards = [...document.querySelectorAll('[data-diff]')]
  121. expect(diffCards.length).toBeGreaterThan(0)
  122. const footers = diffCards.map(card => card.textContent ?? '')
  123. expect(footers.some(text => text.includes('hello fixture') && text.includes('+1 -0 · 1 file'))).toBe(true)
  124. // The web render intent reaches the assembled boot graph: the fixture's
  125. // web_search / web_fetch turns render their keyed WebRow cards, proving the
  126. // registration, wire projection, and card rendering survive the real bundle
  127. // path (not just the per-package src benches). WebRow composes ToolRow, so the
  128. // card is collapsed behind the row; the keyed row is pinned by its `data-tool`
  129. // (ToolRow sets it from the wire tool name).
  130. const webSearchRow = await waitFor(() => {
  131. const row = document.querySelector('[data-tool="web_search"]')
  132. expect(row).not.toBeNull()
  133. expect(document.querySelector('[data-tool="web_fetch"]')).not.toBeNull()
  134. return row!
  135. }, { timeout: 10_000 })
  136. // Expand the web_search row to prove its WebBlock card renders end to end.
  137. const webToggle = webSearchRow.querySelector('[data-expandable]')
  138. if (webToggle !== null) act(() => { fireEvent.click(webToggle) })
  139. await waitFor(() => {
  140. expect(webSearchRow.querySelector('[data-web]')).not.toBeNull()
  141. }, { timeout: 10_000 })
  142. // Every bundle injected its plugin-owned style tag (the loader's CSS path).
  143. const styleOwners = [...document.head.querySelectorAll('style[data-plugin]')]
  144. .map(style => style.getAttribute('data-plugin'))
  145. for (const plugin of ['@deepseek-ai/dsh-client-ui-layout', '@deepseek-ai/dsh-client-ui-sidebar', '@deepseek-ai/dsh-client-ui-conversation', '@deepseek-ai/dsh-client-ui-tool']) {
  146. expect(styleOwners).toContain(plugin)
  147. }
  148. })
  149. it('boots without ui-chat and does not select another conversation view implicitly', async () => {
  150. mountAssembledApp('?fixture', { exclude: ['@deepseek-ai/dsh-client-ui-chat'] })
  151. const tree = await screen.findByRole('tree', { name: 'Sessions' }, { timeout: 10_000 })
  152. const boot = Reflect.get(window, '__DSH_BOOT__') as { entries: Array<{ id: string }> } | undefined
  153. expect(boot?.entries.some(entry => entry.id === '@deepseek-ai/dsh-client-ui-chat')).toBe(false)
  154. const sessionTitle = await within(tree).findByText('Fixture 历史会话')
  155. fireEvent.click(sessionTitle)
  156. await waitFor(() => {
  157. expect(document.querySelector('[data-slot="conversation.session"]')).not.toBeNull()
  158. }, { timeout: 10_000 })
  159. expect(document.querySelector('[data-slot="conversation.view"]')).toBeNull()
  160. })