184 lines
9.0 KiB
TypeScript
184 lines
9.0 KiB
TypeScript
// @vitest-environment jsdom
|
|
// The built-bundle boot smoke: the ONE assembled-jsdom test that loads the
|
|
// real `packages/client/*/lib/client.js` artifacts through AppWebEntry's
|
|
// ModuleLoader path (loadBundle) and proves the boot graph
|
|
// assembles — staged activation across the immediately tier and the inject
|
|
// layers, per-plugin CSS injection, and a rendered journey reaching chat
|
|
// content from the keyless FixtureApiClient transport.
|
|
//
|
|
// Component behavior remains owned by per-package suites (SlotTestRuntime
|
|
// benches over src). This smoke additionally pins the resident interaction
|
|
// fixture's cross-plugin projection because only the built connection/runtime/
|
|
// workspace graph can prove that transport-to-row path end to end.
|
|
import { readFileSync } from 'node:fs'
|
|
import { join } from 'node:path'
|
|
import { act, cleanup, fireEvent, screen, waitFor, within } from '@testing-library/react'
|
|
import { afterEach, beforeEach, expect, it, vi } from 'vitest'
|
|
import type { WebBootEntry } from '@deepseek-ai/dsh-client-modules/client'
|
|
import { AppWebEntry } from '@deepseek-ai/dsh-client-web'
|
|
|
|
const PLUGINS: readonly (WebBootEntry & { dir: string })[] = [
|
|
{ id: '@deepseek-ai/dsh-client-connection', dir: 'connection', url: '/plugins/connection.js', rev: 'fx', inject: [], immediately: true },
|
|
{ id: '@deepseek-ai/dsh-client-runtime', dir: 'runtime', url: '/plugins/runtime.js', rev: 'fx', inject: ['@deepseek-ai/dsh-client-connection'], immediately: true },
|
|
{ id: '@deepseek-ai/dsh-client-ui-theme', dir: 'ui-theme', url: '/plugins/ui-theme.js', rev: 'fx', inject: [], immediately: true },
|
|
{ id: '@deepseek-ai/dsh-client-locale', dir: 'locale', url: '/plugins/locale.js', rev: 'fx', inject: [], immediately: true },
|
|
{ id: '@deepseek-ai/dsh-client-ui-layout', dir: 'ui-layout', url: '/plugins/ui-layout.js', rev: 'fx', inject: ['@deepseek-ai/dsh-client-runtime'] },
|
|
{ id: '@deepseek-ai/dsh-client-ui-sidebar', dir: 'ui-sidebar', url: '/plugins/ui-sidebar.js', rev: 'fx', inject: ['@deepseek-ai/dsh-client-ui-layout'] },
|
|
{ id: '@deepseek-ai/dsh-client-ui-conversation', dir: 'ui-conversation', url: '/plugins/ui-conversation.js', rev: 'fx', inject: ['@deepseek-ai/dsh-client-ui-layout'] },
|
|
{
|
|
id: '@deepseek-ai/dsh-client-ui-workspace',
|
|
dir: 'ui-workspace',
|
|
url: '/plugins/ui-workspace.js',
|
|
rev: 'fx',
|
|
inject: [
|
|
'@deepseek-ai/dsh-client-runtime',
|
|
'@deepseek-ai/dsh-client-ui-conversation',
|
|
'@deepseek-ai/dsh-client-ui-sidebar',
|
|
],
|
|
},
|
|
{ id: '@deepseek-ai/dsh-client-ui-trajectory', dir: 'ui-trajectory', url: '/plugins/ui-trajectory.js', rev: 'fx', inject: ['@deepseek-ai/dsh-client-ui-conversation'] },
|
|
]
|
|
|
|
const bundles = new Map(PLUGINS.map(plugin => [
|
|
plugin.url,
|
|
readFileSync(join(process.cwd(), 'packages/client', plugin.dir, 'lib/client.js'), 'utf8'),
|
|
]))
|
|
|
|
interface FixtureWindow extends Window {
|
|
__DSH_BOOT__?: { rev: string; entries: WebBootEntry[] }
|
|
__ModuleLoader__?: unknown
|
|
}
|
|
|
|
class ResizeObserverStub {
|
|
observe(): void {}
|
|
disconnect(): void {}
|
|
unobserve(): void {}
|
|
}
|
|
|
|
const win = window as FixtureWindow
|
|
let unmount: (() => void) | undefined
|
|
|
|
beforeEach(() => {
|
|
localStorage.clear()
|
|
// English pinned before boot: role/text locators stay deterministic across
|
|
// localized component migrations (the newEnglishPage e2e convention).
|
|
localStorage.setItem('dsh.locale', 'en')
|
|
document.title = 'DeepSeek Harness'
|
|
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
|
|
vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) =>
|
|
setTimeout(() => { callback(0) }, 0) as unknown as number)
|
|
vi.stubGlobal('cancelAnimationFrame', (id: number) => { clearTimeout(id) })
|
|
})
|
|
|
|
afterEach(() => {
|
|
act(() => { unmount?.() })
|
|
unmount = undefined
|
|
cleanup()
|
|
delete win.__DSH_BOOT__
|
|
delete win.__ModuleLoader__
|
|
document.body.innerHTML = ''
|
|
document.head.querySelectorAll('style[data-plugin]').forEach((style) => { style.remove() })
|
|
document.title = ''
|
|
history.replaceState(null, '', '/')
|
|
vi.unstubAllGlobals()
|
|
})
|
|
|
|
it('boots the built plugin graph and renders a fixture session end to end', async () => {
|
|
history.replaceState(null, '', '/?fixture')
|
|
const root = document.createElement('div')
|
|
root.id = 'root'
|
|
document.body.appendChild(root)
|
|
win.__DSH_BOOT__ = { rev: 'fx', entries: PLUGINS.map(({ dir: _dir, ...plugin }) => plugin) }
|
|
act(() => {
|
|
const entry = new AppWebEntry(root, {
|
|
loadBundle: async (url) => {
|
|
const code = bundles.get(url)
|
|
if (code === undefined) throw new Error(`missing built bundle ${url}`)
|
|
;(0, eval)(code)
|
|
},
|
|
})
|
|
void entry.run()
|
|
unmount = () => { entry.dispose() }
|
|
})
|
|
|
|
// The sidebar renders from the boot graph: every inject layer activated.
|
|
const tree = await screen.findByRole('tree', { name: 'Sessions' }, { timeout: 10_000 })
|
|
await within(tree).findByText('4 sessions')
|
|
|
|
// The resident fixture has both a question and an approval; composer routing
|
|
// exposes the question first, and the assembled workspace plugin mirrors that
|
|
// actionable wait instead of the underlying running state.
|
|
const waitingTitle = await within(tree).findByText('Fixture 历史会话')
|
|
const waitingRow = waitingTitle.closest<HTMLElement>('[role="treeitem"]')
|
|
if (waitingRow === null) throw new Error('fixture Session title must belong to a tree row')
|
|
expect(waitingRow.querySelector('[data-state="warning"]')).not.toBeNull()
|
|
expect(waitingRow.querySelector('[data-state="ongoing"]')).toBeNull()
|
|
within(waitingRow).getByText('Waiting for answer')
|
|
|
|
// Opening a session reaches chat content through the fixture transport.
|
|
fireEvent.click(waitingTitle)
|
|
await waitFor(() => {
|
|
expect(document.querySelector('[data-sample="bash"]')).not.toBeNull()
|
|
}, { timeout: 10_000 })
|
|
|
|
// Resolve the resident approval so the ordinary composer bar (which owns
|
|
// ContextMeter) resumes without replacing the session shell. This minimal
|
|
// boot graph intentionally does not mount the separate question UI plugin.
|
|
fireEvent.click(await screen.findByRole('button', { name: 'Allow once' }))
|
|
|
|
// The fixture mirrors all three token-meter projections, so the assembled
|
|
// ContextMeter reaches its composition panel instead of only the occupancy
|
|
// fallback path.
|
|
const contextTrigger = await screen.findByRole('button', { name: /of context used/ })
|
|
fireEvent.click(contextTrigger)
|
|
const contextPanel = await screen.findByRole('dialog', { name: 'of context used' })
|
|
within(contextPanel).getByText('System prompt')
|
|
within(contextPanel).getByText('Tools')
|
|
within(contextPanel).getByText('Messages')
|
|
|
|
// The write/edit turns render a real diff card through the assembled graph
|
|
// (the keyed FileMutationRow composing ToolRow + DiffBlock), not just the
|
|
// fixture's raw text. The card is collapsed by default, so expand each edit/
|
|
// write row first. The write turn's `hello fixture\n` proves the terminator
|
|
// rule end to end: a trailing newline terminates its line, so the footer reads
|
|
// `+1` (not a phantom `+2`) and one distinct file. The `+ ` prefix is a CSS
|
|
// ::before, so it is absent from textContent — assert on the line body and the
|
|
// footer.
|
|
const mutationRows = [...document.querySelectorAll('[data-variant="write"],[data-variant="edit"]')]
|
|
expect(mutationRows.length).toBeGreaterThan(0)
|
|
for (const row of mutationRows) {
|
|
const toggle = row.querySelector('[data-expandable]')
|
|
if (toggle !== null) act(() => { fireEvent.click(toggle) })
|
|
}
|
|
const diffCards = [...document.querySelectorAll('[data-diff]')]
|
|
expect(diffCards.length).toBeGreaterThan(0)
|
|
const footers = diffCards.map(card => card.textContent ?? '')
|
|
expect(footers.some(text => text.includes('hello fixture') && text.includes('+1 -0 · 1 file'))).toBe(true)
|
|
|
|
// The web render intent reaches the assembled boot graph: the fixture's
|
|
// web_search / web_fetch turns render their keyed WebRow cards, proving the
|
|
// registration, wire projection, and card rendering survive the real bundle
|
|
// path (not just the per-package src benches). WebRow composes ToolRow, so the
|
|
// card is collapsed behind the row; the keyed row is pinned by its `data-tool`
|
|
// (ToolRow sets it from the wire tool name).
|
|
const webSearchRow = await waitFor(() => {
|
|
const row = document.querySelector('[data-tool="web_search"]')
|
|
expect(row).not.toBeNull()
|
|
expect(document.querySelector('[data-tool="web_fetch"]')).not.toBeNull()
|
|
return row!
|
|
}, { timeout: 10_000 })
|
|
// Expand the web_search row to prove its WebBlock card renders end to end.
|
|
const webToggle = webSearchRow.querySelector('[data-expandable]')
|
|
if (webToggle !== null) act(() => { fireEvent.click(webToggle) })
|
|
await waitFor(() => {
|
|
expect(webSearchRow.querySelector('[data-web]')).not.toBeNull()
|
|
}, { timeout: 10_000 })
|
|
|
|
// Every bundle injected its plugin-owned style tag (the loader's CSS path).
|
|
const styleOwners = [...document.head.querySelectorAll('style[data-plugin]')]
|
|
.map(style => style.getAttribute('data-plugin'))
|
|
for (const plugin of ['@deepseek-ai/dsh-client-ui-layout', '@deepseek-ai/dsh-client-ui-sidebar', '@deepseek-ai/dsh-client-ui-conversation']) {
|
|
expect(styleOwners).toContain(plugin)
|
|
}
|
|
})
|