|
|
@@ -0,0 +1,255 @@
|
|
|
+// @vitest-environment jsdom
|
|
|
+// The web render intent on the web side: the pure webCardModel derivation over
|
|
|
+// resultView, and the conversation render sites that consume it — the keyed
|
|
|
+// WebRow (registered under both web_search and web_fetch), the GenericToolCard
|
|
|
+// render-site fallback, and the details panel's Output section. Mirrors
|
|
|
+// terminal-card.spec.tsx: model derivation + null arms, both kinds, the chat
|
|
|
+// row's resident card, the panel arm, and the keyed registration.
|
|
|
+
|
|
|
+import { afterEach, describe, expect, it, vi } from 'vitest'
|
|
|
+import { cleanup, render } from '@testing-library/react'
|
|
|
+import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
|
|
|
+import type {
|
|
|
+ ConversationSnapshot, RunningToolCall, SessionId, SessionListState, ToolResultNode, WorkspaceListState,
|
|
|
+} from '@deepseek-ai/dsh-client-runtime/client'
|
|
|
+import type { ToolResultView } from '@deepseek-ai/dsh-client-connection/client'
|
|
|
+import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react'
|
|
|
+import type { SelectionTarget, ToolRowOwnerProps, ToolRowProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
|
|
|
+import { CHAT_WEB_MAX_SOURCES, webCardModel } from '../src/client/contract/web-card-model.ts'
|
|
|
+import { createChatStore } from '../src/client/stores.ts'
|
|
|
+import { GenericToolCard } from '../src/client/chat/GenericToolCard.tsx'
|
|
|
+import { DetailsPanel } from '../src/client/skeleton/DetailsPanel.tsx'
|
|
|
+import { WebRow, webToolview } from '../src/client/toolviews/web-row.tsx'
|
|
|
+
|
|
|
+afterEach(cleanup)
|
|
|
+
|
|
|
+const SID = 's1' as SessionId
|
|
|
+
|
|
|
+const SEARCH_ARGS = '{"query":"deepseek harness"}'
|
|
|
+const FETCH_ARGS = '{"url":"https://example.com/page"}'
|
|
|
+
|
|
|
+/** A web_search result view; overrides tune the sources / answer / truncation. */
|
|
|
+const resultSearch = (over?: Partial<Extract<ToolResultView, { card: 'web'; kind: 'search' }>>): ToolResultView => ({
|
|
|
+ card: 'web', kind: 'search', truncated: false,
|
|
|
+ answer: 'A short answer.',
|
|
|
+ sources: [
|
|
|
+ { url: 'https://example.com/a', title: 'Titled', snippet: 'excerpt', publishedAt: '2026-07-01' },
|
|
|
+ { url: 'https://plain.example.org/b' },
|
|
|
+ ],
|
|
|
+ ...over,
|
|
|
+})
|
|
|
+
|
|
|
+/** A web_fetch result view. */
|
|
|
+const resultFetch = (over?: Partial<Extract<ToolResultView, { card: 'web'; kind: 'fetch' }>>): ToolResultView => ({
|
|
|
+ card: 'web', kind: 'fetch', url: 'https://example.com/page', statusCode: 200, truncated: false, ...over,
|
|
|
+})
|
|
|
+
|
|
|
+const runningSearch = (over?: Partial<RunningToolCall>): RunningToolCall => ({
|
|
|
+ callId: 'c1', name: 'web_search', argsRaw: SEARCH_ARGS,
|
|
|
+ turn: 1, step: 1, time: 1_000, callView: { card: 'generic', title: 'Search', kind: 'search' }, ...over,
|
|
|
+})
|
|
|
+
|
|
|
+const settledSearch = (over?: Partial<ToolResultNode>): ToolResultNode => ({
|
|
|
+ kind: 'tool-result', seq: 10, time: 2_000, callId: 'c1',
|
|
|
+ call: { name: 'web_search', argsRaw: SEARCH_ARGS },
|
|
|
+ callTime: 1_000,
|
|
|
+ content: [{ type: 'text', text: 'search text' }], isError: false,
|
|
|
+ callView: { card: 'generic', title: 'Search', kind: 'search' }, resultView: resultSearch(), ...over,
|
|
|
+})
|
|
|
+
|
|
|
+const settledFetch = (over?: Partial<ToolResultNode>): ToolResultNode => ({
|
|
|
+ kind: 'tool-result', seq: 11, time: 2_000, callId: 'c2',
|
|
|
+ call: { name: 'web_fetch', argsRaw: FETCH_ARGS },
|
|
|
+ callTime: 1_000,
|
|
|
+ content: [{ type: 'text', text: 'fetch body' }], isError: false,
|
|
|
+ callView: { card: 'generic', title: 'Fetch', kind: 'fetch' }, resultView: resultFetch(), ...over,
|
|
|
+})
|
|
|
+
|
|
|
+describe('webCardModel', () => {
|
|
|
+ it('derives a search card from the result view, projecting every source field', () => {
|
|
|
+ expect(webCardModel(settledSearch())).toEqual({
|
|
|
+ kind: 'search',
|
|
|
+ answer: 'A short answer.',
|
|
|
+ truncated: false,
|
|
|
+ sources: [
|
|
|
+ { url: 'https://example.com/a', title: 'Titled', snippet: 'excerpt', publishedAt: '2026-07-01' },
|
|
|
+ { url: 'https://plain.example.org/b', title: undefined, snippet: undefined, publishedAt: undefined },
|
|
|
+ ],
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ it('carries the search truncation flag and an absent answer', () => {
|
|
|
+ const model = webCardModel(settledSearch({ resultView: { card: 'web', kind: 'search', truncated: true, sources: [] } }))
|
|
|
+ expect(model).toEqual({ kind: 'search', answer: undefined, truncated: true, sources: [] })
|
|
|
+ })
|
|
|
+
|
|
|
+ it('derives a fetch card from the result view', () => {
|
|
|
+ expect(webCardModel(settledFetch())).toEqual({
|
|
|
+ kind: 'fetch', url: 'https://example.com/page', statusCode: 200, truncated: false,
|
|
|
+ })
|
|
|
+ expect(webCardModel(settledFetch({ resultView: resultFetch({ statusCode: 404, truncated: true }) })))
|
|
|
+ .toEqual({ kind: 'fetch', url: 'https://example.com/page', statusCode: 404, truncated: true })
|
|
|
+ })
|
|
|
+
|
|
|
+ it('returns null for a running call, since the web card is result-only', () => {
|
|
|
+ expect(webCardModel(runningSearch())).toBeNull()
|
|
|
+ // Even a running call that somehow carried a web call view stays generic:
|
|
|
+ // the derivation reads resultView only.
|
|
|
+ expect(webCardModel(runningSearch({ callView: null }))).toBeNull()
|
|
|
+ })
|
|
|
+
|
|
|
+ it('returns null for a settled call whose result view is not a web card', () => {
|
|
|
+ expect(webCardModel(settledSearch({ resultView: null }))).toBeNull()
|
|
|
+ expect(webCardModel(settledSearch({ resultView: { card: 'generic' } }))).toBeNull()
|
|
|
+ // A card tag this UI version does not know arrives over the wire; the
|
|
|
+ // documented generic-card default takes it, not a crash.
|
|
|
+ const future = { card: 'chart', kind: 'search' } as unknown as ToolResultView
|
|
|
+ expect(webCardModel(settledSearch({ resultView: future }))).toBeNull()
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+describe('chat row web body', () => {
|
|
|
+ const ownerProps = (block: RunningToolCall | ToolResultNode, toolName: string): ToolRowOwnerProps => ({
|
|
|
+ callId: block.callId, toolName, block, openFile: vi.fn(),
|
|
|
+ })
|
|
|
+ // WebRow reads only toolName/block off the full runtime share; the standard
|
|
|
+ // kit is unused, so the cast supplies the owner slice alone (as BashRow's
|
|
|
+ // tests do for the terminal card).
|
|
|
+ const rowProps = (block: RunningToolCall | ToolResultNode, toolName: string): ToolRowProps =>
|
|
|
+ ownerProps(block, toolName) as unknown as ToolRowProps
|
|
|
+
|
|
|
+ it('the WebRow renders the search card resident under the summary, capped tighter than the panel', () => {
|
|
|
+ expect(CHAT_WEB_MAX_SOURCES).toBeLessThan(16)
|
|
|
+ const view = render(<WebRow {...rowProps(settledSearch(), 'web_search')} />)
|
|
|
+ // The summary row plus the resident card, without any expand gesture on the row itself.
|
|
|
+ expect(view.getByText('Search')).toBeTruthy()
|
|
|
+ expect(view.getByText('Titled')).toBeTruthy()
|
|
|
+ expect(view.getByText('excerpt')).toBeTruthy()
|
|
|
+ // hostname fallback for the source with no title
|
|
|
+ expect(view.getByText('plain.example.org')).toBeTruthy()
|
|
|
+ })
|
|
|
+
|
|
|
+ it('the WebRow renders the fetch card resident, titled Fetch', () => {
|
|
|
+ const view = render(<WebRow {...rowProps(settledFetch(), 'web_fetch')} />)
|
|
|
+ expect(view.getByText('Fetch')).toBeTruthy()
|
|
|
+ // The url shows in the summary row and as the card's link; scope to the card.
|
|
|
+ const card = view.container.querySelector('[data-web="fetch"]')
|
|
|
+ expect(card?.querySelector('a')?.getAttribute('href')).toBe('https://example.com/page')
|
|
|
+ expect(view.getByText('HTTP 200')).toBeTruthy()
|
|
|
+ })
|
|
|
+
|
|
|
+ it('a running web call is the summary row alone (no card until it settles)', () => {
|
|
|
+ const view = render(<WebRow {...rowProps(runningSearch(), 'web_search')} />)
|
|
|
+ expect(view.getByText('Search')).toBeTruthy()
|
|
|
+ expect(view.queryByText('Titled')).toBeNull()
|
|
|
+ expect(view.container.querySelector('[data-web]')).toBeNull()
|
|
|
+ })
|
|
|
+
|
|
|
+ it('a failed web call keeps the summary row without the card', () => {
|
|
|
+ const view = render(<WebRow {...rowProps(settledSearch({
|
|
|
+ isError: true, resultView: { card: 'generic' },
|
|
|
+ }), 'web_search')} />)
|
|
|
+ expect(view.getByText('Search')).toBeTruthy()
|
|
|
+ expect(view.container.querySelector('[data-web]')).toBeNull()
|
|
|
+ // The row reflects the error state so the summary line still reads as failed.
|
|
|
+ expect(view.container.querySelector('[data-state="error"]')).not.toBeNull()
|
|
|
+ })
|
|
|
+
|
|
|
+ it('the GenericToolCard fallback also renders a resident web card for a web-declaring tool', () => {
|
|
|
+ // A web-declaring tool without its own keyed row lands on the fallback; its
|
|
|
+ // card is resident there too.
|
|
|
+ const view = render(<GenericToolCard {...ownerProps(settledSearch({
|
|
|
+ call: { name: 'fx-web', argsRaw: SEARCH_ARGS },
|
|
|
+ }), 'fx-web')} />)
|
|
|
+ expect(view.getByText('Titled')).toBeTruthy()
|
|
|
+ expect(view.container.querySelector('[data-web="search"]')).not.toBeNull()
|
|
|
+ })
|
|
|
+
|
|
|
+ it('the GenericToolCard fallback keeps the plain row for a non-web call', () => {
|
|
|
+ const view = render(<GenericToolCard {...ownerProps(settledSearch({
|
|
|
+ call: { name: 'echo', argsRaw: '{}' }, callView: null, resultView: null,
|
|
|
+ }), 'echo')} />)
|
|
|
+ expect(view.container.querySelector('[data-web]')).toBeNull()
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+describe('DetailsPanel web Output section', () => {
|
|
|
+ function mount(snapshot: ConversationSnapshot, selection: SelectionTarget | null) {
|
|
|
+ localStorage.clear()
|
|
|
+ const chat = createChatStore().create()
|
|
|
+ if (selection !== null) chat.actions.select(selection)
|
|
|
+ const sessions = createSnapshotStore<SessionListState>({ ids: [], byId: {}, current: undefined, phase: 'ready' })
|
|
|
+ const workspaces = createSnapshotStore<WorkspaceListState>({
|
|
|
+ items: [], state: 'idle', phase: 'ready', error: null,
|
|
|
+ baselinesReady: true, recentWorkspaceId: undefined,
|
|
|
+ })
|
|
|
+ return render(
|
|
|
+ <DetailsPanel
|
|
|
+ sessionId={SID}
|
|
|
+ useSession={bindSnapshotSelector({ getSnapshot: () => snapshot, subscribe: () => () => {} })}
|
|
|
+ useSessions={bindSnapshotSelector(sessions)}
|
|
|
+ useWorkspaces={bindSnapshotSelector(workspaces)}
|
|
|
+ useInput={(() => { throw new Error('unused') })}
|
|
|
+ inputActions={{ setDraft: () => {}, submit: () => {} }}
|
|
|
+ useProjection={(() => undefined)}
|
|
|
+ useStore={bindSnapshotSelector(chat)}
|
|
|
+ actions={chat.actions}
|
|
|
+ closeDetails={vi.fn()}
|
|
|
+ />,
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ function snapshot(over: Partial<ConversationSnapshot> = {}): ConversationSnapshot {
|
|
|
+ return {
|
|
|
+ sessionId: SID, nodes: [], foldDegraded: false, partial: null, runningCalls: [], codeDispatches: new Map(),
|
|
|
+ pending: [], queue: [], running: false, composerPhase: 'active', removed: false,
|
|
|
+ openState: 'open', openError: null, hasMore: false, loadingOlder: false,
|
|
|
+ promptError: null, blank: false, lastAgentError: null, ...over,
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ it('renders the search card at full source allowance', () => {
|
|
|
+ const view = mount(snapshot({ nodes: [settledSearch()] }), { turnSeq: 10, callId: 'c1', toolName: 'web_search' })
|
|
|
+ expect(view.getByText('Titled')).toBeTruthy()
|
|
|
+ expect(view.getByText('excerpt')).toBeTruthy()
|
|
|
+ // The Input JSON section survives beside it.
|
|
|
+ expect(view.getByText(/"query"/)).toBeTruthy()
|
|
|
+ })
|
|
|
+
|
|
|
+ it('renders the fetch card', () => {
|
|
|
+ const view = mount(snapshot({ nodes: [settledFetch()] }), { turnSeq: 11, callId: 'c2', toolName: 'web_fetch' })
|
|
|
+ const card = view.container.querySelector('[data-web="fetch"]')
|
|
|
+ expect(card?.querySelector('a')?.getAttribute('href')).toBe('https://example.com/page')
|
|
|
+ expect(view.getByText('HTTP 200')).toBeTruthy()
|
|
|
+ })
|
|
|
+
|
|
|
+ it('a non-web result keeps the flattened pre form', () => {
|
|
|
+ const view = mount(snapshot({
|
|
|
+ nodes: [settledSearch({ callView: null, resultView: null })],
|
|
|
+ }), { turnSeq: 10, callId: 'c1', toolName: 'web_search' })
|
|
|
+ expect(view.container.querySelector('[data-web]')).toBeNull()
|
|
|
+ const output = view.getByText('Output').closest('section')
|
|
|
+ expect(output?.querySelector('pre')?.textContent).toContain('search text')
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+describe('web toolview registration', () => {
|
|
|
+ it('registers one WebRow under both web_search and web_fetch', () => {
|
|
|
+ const registered: { key: string; component: unknown }[] = []
|
|
|
+ const ctx = {
|
|
|
+ slots: {
|
|
|
+ register: (options: { name: string; key: string }, component: unknown) => {
|
|
|
+ registered.push({ key: options.key, component })
|
|
|
+ return () => {}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ } as unknown as import('cordis').Context
|
|
|
+ webToolview.apply(ctx)
|
|
|
+ expect(registered.map(r => r.key)).toEqual(['web_search', 'web_fetch'])
|
|
|
+ // One component under both keys, not two thin rows.
|
|
|
+ expect(registered[0]?.component).toBe(WebRow)
|
|
|
+ expect(registered[1]?.component).toBe(WebRow)
|
|
|
+ // The load-order seam the render site depends on.
|
|
|
+ expect(webToolview.inject).toEqual(['slots', 'conversation'])
|
|
|
+ })
|
|
|
+})
|
Chinesezjc