395 lines
17 KiB
TypeScript
395 lines
17 KiB
TypeScript
// @vitest-environment jsdom
|
|
/**
|
|
* QueueDock rendering and operations: authoritative rows, inline editing,
|
|
* collapse state, removal, strict steering, failure notices, and live retirement.
|
|
*/
|
|
import { afterEach, describe, expect, it, vi } from 'vitest'
|
|
import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react'
|
|
import { useSyncExternalStore } from 'react'
|
|
import { EMPTY_CHAT_SNAPSHOT } from '@deepseek-ai/dsh-client-runtime/client'
|
|
import type {
|
|
ConversationSnapshot, QueuedMessage, SessionId, SessionListState,
|
|
} from '@deepseek-ai/dsh-client-runtime/client'
|
|
import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
|
|
import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime'
|
|
import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts'
|
|
import type { QueueItemId } from '../src/client/contract/queue.ts'
|
|
import type { InputState } from '../src/client/input/contract.ts'
|
|
import { zh } from '../src/client/locales.ts'
|
|
import { QueueDock, queueDockEntry, type QueueDockInjected, type QueueDockProps } from '../src/client/queue/QueueDock.tsx'
|
|
|
|
afterEach(cleanup)
|
|
|
|
const SID = 's1' as SessionId
|
|
const iid = (id: string): QueueItemId => id as QueueItemId
|
|
|
|
function row(id: string, text: string | null, preview = text ?? '[image]'): QueuedMessage {
|
|
return {
|
|
id: iid(id), messageId: `message-${id}` as never, placement: 'queued',
|
|
content: text === null ? [{ type: 'image', data: 'x' } as never] : [{ type: 'text', text }],
|
|
preview, text,
|
|
}
|
|
}
|
|
|
|
function snapshotWith(queue: QueuedMessage[]): ConversationSnapshot {
|
|
return {
|
|
sessionId: SID, chat: EMPTY_CHAT_SNAPSHOT,
|
|
nodes: [], turnTimings: new Map(), turnEnds: new Map(), partial: null, runningCalls: [],
|
|
pending: [], queue, running: true, composerPhase: 'active', removed: false, openState: 'open', openError: null,
|
|
hasMore: false, loadingOlder: false, promptError: null, blank: false, subagent: null, lastAgentError: null,
|
|
}
|
|
}
|
|
|
|
/** Minimal live source backing the useSession stub. */
|
|
function liveSession(initial: ConversationSnapshot) {
|
|
let snapshot = initial
|
|
const listeners = new Set<() => void>()
|
|
const useSession: SnapshotSelectorHook<ConversationSnapshot> = selector =>
|
|
useSyncExternalStore(
|
|
(listener) => {
|
|
listeners.add(listener)
|
|
return () => listeners.delete(listener)
|
|
},
|
|
() => selector(snapshot),
|
|
)
|
|
return {
|
|
useSession,
|
|
push(next: ConversationSnapshot): void {
|
|
snapshot = next
|
|
for (const listener of [...listeners]) listener()
|
|
},
|
|
}
|
|
}
|
|
|
|
/** InputZone owner stub (the dock reads useSession only; the zone fields satisfy the owner share). */
|
|
const INPUT_STATE: InputState = { draft: '', imageIds: [], draftRev: 0, phase: 'plain', occurrences: [], queue: [] }
|
|
|
|
// Standard locale seat stub mirroring the real ns → common → key chain.
|
|
const t: QueueDockProps['t'] = makeTranslate(zh, commonZh)
|
|
|
|
function kitFor(snapshot: ConversationSnapshot, injected: Partial<QueueDockInjected> = {}) {
|
|
return {
|
|
sessionId: SID,
|
|
t,
|
|
useSessions: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<SessionListState>,
|
|
useWorkspaces: (() => { throw new Error('unused') }) as never,
|
|
useProjection: (() => undefined) as never,
|
|
useInput: (() => { throw new Error('unused') }) as never,
|
|
inputActions: { setDraft: () => {}, submit: () => {} } as never,
|
|
session: snapshot,
|
|
input: INPUT_STATE,
|
|
updateQueue: vi.fn(() => Promise.resolve()),
|
|
notify: vi.fn(),
|
|
...injected,
|
|
}
|
|
}
|
|
|
|
describe('QueueDock', () => {
|
|
it('renders null while the queue is empty', () => {
|
|
const snap = snapshotWith([])
|
|
const source = liveSession(snap)
|
|
const { container } = render(<QueueDock {...kitFor(snap)} useSession={source.useSession} />)
|
|
expect(container.innerHTML).toBe('')
|
|
})
|
|
|
|
it('leaves pending steering to the conversation flow', () => {
|
|
const steering = { ...row('s-1', 'interrupt'), placement: 'steering' as const }
|
|
const snap = snapshotWith([steering])
|
|
const source = liveSession(snap)
|
|
const { container } = render(<QueueDock {...kitFor(snap)} useSession={source.useSession} />)
|
|
expect(container.innerHTML).toBe('')
|
|
})
|
|
|
|
it('renders one row directly and defaults multiple rows to a collapsible count header', () => {
|
|
const single = snapshotWith([row('i-1', 'one')])
|
|
const source = liveSession(single)
|
|
const view = render(<QueueDock {...kitFor(single)} useSession={source.useSession} />)
|
|
expect(view.queryByRole('button', { name: '1 条排队消息' })).toBeNull()
|
|
expect(view.getByText('one')).toBeTruthy()
|
|
|
|
act(() => { source.push(snapshotWith([row('i-1', 'one'), row('i-2', 'two')])) })
|
|
const header = view.getByRole('button', { name: '2 条排队消息' })
|
|
expect(header.getAttribute('aria-expanded')).toBe('false')
|
|
expect(document.getElementById(header.getAttribute('aria-controls')!)).toBeTruthy()
|
|
expect(view.queryByText('one')).toBeNull()
|
|
expect(view.queryByText('two')).toBeNull()
|
|
|
|
fireEvent.click(header)
|
|
expect(header.getAttribute('aria-expanded')).toBe('true')
|
|
expect(view.getByText('one')).toBeTruthy()
|
|
expect(view.getByText('two')).toBeTruthy()
|
|
|
|
fireEvent.click(header)
|
|
expect(header.getAttribute('aria-expanded')).toBe('false')
|
|
expect(view.queryByText('one')).toBeNull()
|
|
})
|
|
|
|
it('keeps an active single-row editor visible when another item arrives', () => {
|
|
const single = snapshotWith([row('i-edit', 'before')])
|
|
const source = liveSession(single)
|
|
const view = render(<QueueDock {...kitFor(single)} useSession={source.useSession} />)
|
|
|
|
fireEvent.click(view.getByLabelText('编辑排队消息'))
|
|
fireEvent.change(view.getByLabelText('编辑排队消息'), { target: { value: 'draft' } })
|
|
act(() => {
|
|
source.push(snapshotWith([row('i-edit', 'before'), row('i-2', 'second')]))
|
|
})
|
|
|
|
const header = view.getByRole('button', { name: '2 条排队消息' })
|
|
expect(header).toHaveProperty('disabled', true)
|
|
expect(header.getAttribute('aria-expanded')).toBe('true')
|
|
expect(view.getByRole('textbox', { name: '编辑排队消息' })).toHaveProperty('value', 'draft')
|
|
expect(view.getByText('second')).toBeTruthy()
|
|
|
|
fireEvent.click(view.getByLabelText('取消编辑'))
|
|
expect(header).toHaveProperty('disabled', false)
|
|
expect(header.getAttribute('aria-expanded')).toBe('false')
|
|
expect(view.queryByText('second')).toBeNull()
|
|
})
|
|
|
|
it('keeps an in-flight row action visible when another item arrives', async () => {
|
|
const single = snapshotWith([row('i-remove', 'remove me')])
|
|
const source = liveSession(single)
|
|
let finishUpdate: (() => void) | undefined
|
|
const updateQueue = vi.fn(() => new Promise<void>((resolve) => { finishUpdate = resolve }))
|
|
const view = render(
|
|
<QueueDock {...kitFor(single, { updateQueue })} useSession={source.useSession} />,
|
|
)
|
|
|
|
fireEvent.click(view.getByLabelText('删除排队消息'))
|
|
act(() => {
|
|
source.push(snapshotWith([row('i-remove', 'remove me'), row('i-2', 'second')]))
|
|
})
|
|
|
|
const header = view.getByRole('button', { name: '2 条排队消息' })
|
|
expect(header).toHaveProperty('disabled', true)
|
|
expect(header.getAttribute('aria-expanded')).toBe('true')
|
|
expect(view.getByText('remove me')).toBeTruthy()
|
|
expect(view.getByText('second')).toBeTruthy()
|
|
|
|
expect(updateQueue).toHaveBeenCalledOnce()
|
|
await act(async () => {
|
|
finishUpdate?.()
|
|
await Promise.resolve()
|
|
})
|
|
await waitFor(() => {
|
|
expect(header).toHaveProperty('disabled', false)
|
|
expect(header.getAttribute('aria-expanded')).toBe('false')
|
|
})
|
|
})
|
|
|
|
it('defaults a new multi-row queue to collapsed after the prior queue empties', () => {
|
|
const first = snapshotWith([row('i-1', 'one'), row('i-2', 'two')])
|
|
const source = liveSession(first)
|
|
const view = render(<QueueDock {...kitFor(first)} useSession={source.useSession} />)
|
|
fireEvent.click(view.getByRole('button', { name: '2 条排队消息' }))
|
|
expect(view.getByText('one')).toBeTruthy()
|
|
|
|
act(() => { source.push(snapshotWith([])) })
|
|
expect(view.container.innerHTML).toBe('')
|
|
act(() => {
|
|
source.push(snapshotWith([row('i-3', 'three'), row('i-4', 'four')]))
|
|
})
|
|
|
|
const header = view.getByRole('button', { name: '2 条排队消息' })
|
|
expect(header.getAttribute('aria-expanded')).toBe('false')
|
|
expect(view.queryByText('three')).toBeNull()
|
|
})
|
|
|
|
it('renders active actions and disables editing for mixed-content rows', () => {
|
|
const snap = snapshotWith([
|
|
row('i-1', '第一条排队消息'),
|
|
row('i-2', null, 'image [image]'),
|
|
])
|
|
const source = liveSession(snap)
|
|
const { container, getByRole } = render(<QueueDock {...kitFor(snap)} useSession={source.useSession} />)
|
|
fireEvent.click(getByRole('button', { name: '2 条排队消息' }))
|
|
expect([...container.querySelectorAll('li')].map(item => item.textContent))
|
|
.toEqual(['第一条排队消息', 'image [image]'])
|
|
expect(container.querySelectorAll('button')).toHaveLength(7)
|
|
expect(container.querySelectorAll('[aria-label="编辑排队消息"]')).toHaveLength(2)
|
|
expect(container.querySelectorAll('[aria-label="删除排队消息"]')).toHaveLength(2)
|
|
expect(container.querySelectorAll('[aria-label="插话发送"]')).toHaveLength(2)
|
|
expect((container.querySelectorAll('[aria-label="编辑排队消息"]')[0] as HTMLButtonElement).disabled).toBe(false)
|
|
expect((container.querySelectorAll('[aria-label="编辑排队消息"]')[1] as HTMLButtonElement).disabled).toBe(true)
|
|
expect(container.querySelectorAll('[aria-label="编辑排队消息"]')[1]?.getAttribute('title'))
|
|
.toBe('包含非文本内容，暂不支持编辑')
|
|
})
|
|
|
|
it('edits text inline with save and cancel controls, then saves with the same item identity', async () => {
|
|
const snap = snapshotWith([row('i-edit', 'before')])
|
|
const source = liveSession(snap)
|
|
const updateQueue = vi.fn(() => Promise.resolve())
|
|
const { getByLabelText, queryByLabelText } = render(
|
|
<QueueDock {...kitFor(snap, { updateQueue })} useSession={source.useSession} />,
|
|
)
|
|
|
|
fireEvent.click(getByLabelText('编辑排队消息'))
|
|
const editor = getByLabelText('编辑排队消息') as HTMLInputElement
|
|
expect(getByLabelText('保存排队消息')).toBeTruthy()
|
|
expect(getByLabelText('取消编辑')).toBeTruthy()
|
|
expect(queryByLabelText('删除排队消息')).toBeNull()
|
|
fireEvent.change(editor, { target: { value: 'after' } })
|
|
fireEvent.keyDown(editor, { key: 'Enter' })
|
|
|
|
await waitFor(() => {
|
|
expect(updateQueue).toHaveBeenCalledWith(iid('i-edit'), {
|
|
kind: 'edit',
|
|
content: [{ type: 'text', text: 'after' }],
|
|
})
|
|
})
|
|
})
|
|
|
|
it('cancels an edit by button or Escape without mutating the queue', () => {
|
|
const snap = snapshotWith([row('i-edit', 'before')])
|
|
const source = liveSession(snap)
|
|
const updateQueue = vi.fn(() => Promise.resolve())
|
|
const { getByLabelText, getByText } = render(
|
|
<QueueDock {...kitFor(snap, { updateQueue })} useSession={source.useSession} />,
|
|
)
|
|
|
|
fireEvent.click(getByLabelText('编辑排队消息'))
|
|
fireEvent.change(getByLabelText('编辑排队消息'), { target: { value: 'abandoned' } })
|
|
fireEvent.click(getByLabelText('取消编辑'))
|
|
expect(getByText('before')).toBeTruthy()
|
|
|
|
fireEvent.click(getByLabelText('编辑排队消息'))
|
|
fireEvent.keyDown(getByLabelText('编辑排队消息'), { key: 'Escape' })
|
|
expect(getByText('before')).toBeTruthy()
|
|
expect(updateQueue).not.toHaveBeenCalled()
|
|
})
|
|
|
|
it('keeps editing during IME composition and disables a blank save', () => {
|
|
const snap = snapshotWith([row('i-edit', 'before')])
|
|
const source = liveSession(snap)
|
|
const updateQueue = vi.fn(() => Promise.resolve())
|
|
const { getByLabelText } = render(
|
|
<QueueDock {...kitFor(snap, { updateQueue })} useSession={source.useSession} />,
|
|
)
|
|
|
|
fireEvent.click(getByLabelText('编辑排队消息'))
|
|
const editor = getByLabelText('编辑排队消息')
|
|
fireEvent.change(editor, { target: { value: ' ' } })
|
|
expect(getByLabelText('保存排队消息')).toHaveProperty('disabled', true)
|
|
fireEvent.change(editor, { target: { value: '输入中' } })
|
|
fireEvent.keyDown(editor, { key: 'Enter', isComposing: true })
|
|
expect(updateQueue).not.toHaveBeenCalled()
|
|
expect(getByLabelText('编辑排队消息')).toBeTruthy()
|
|
})
|
|
|
|
it('removes the addressed row', async () => {
|
|
const snap = snapshotWith([row('i-1', 'one'), row('i-2', 'two')])
|
|
const source = liveSession(snap)
|
|
const updateQueue = vi.fn(() => Promise.resolve())
|
|
const { getAllByLabelText, getByRole } = render(
|
|
<QueueDock {...kitFor(snap, { updateQueue })} useSession={source.useSession} />,
|
|
)
|
|
|
|
fireEvent.click(getByRole('button', { name: '2 条排队消息' }))
|
|
fireEvent.click(getAllByLabelText('删除排队消息')[0]!)
|
|
await waitFor(() => {
|
|
expect(updateQueue).toHaveBeenCalledWith(iid('i-1'), { kind: 'remove' })
|
|
})
|
|
})
|
|
|
|
it('strictly steers complete row content only while the agent is running', async () => {
|
|
const running = snapshotWith([row('i-steer', null, 'image [image]')])
|
|
const source = liveSession(running)
|
|
const updateQueue = vi.fn(() => Promise.resolve())
|
|
const rendered = render(
|
|
<QueueDock {...kitFor(running, { updateQueue })} useSession={source.useSession} />,
|
|
)
|
|
|
|
const button = rendered.getByLabelText('插话发送')
|
|
expect(button).toHaveProperty('disabled', false)
|
|
fireEvent.click(button)
|
|
await waitFor(() => {
|
|
expect(updateQueue).toHaveBeenCalledWith(iid('i-steer'), { kind: 'steer' })
|
|
})
|
|
|
|
act(() => { source.push({ ...running, running: false }) })
|
|
expect(rendered.getByLabelText('插话发送')).toHaveProperty('disabled', true)
|
|
expect(rendered.getByLabelText('插话发送').getAttribute('title')).toBe('仅运行中可插话发送')
|
|
})
|
|
|
|
it('renders a session-backed subagent Queue without unsupported actions', () => {
|
|
const snap = {
|
|
...snapshotWith([row('i-subagent', 'pending child follow-up')]),
|
|
subagent: {
|
|
address: {
|
|
parentSessionId: 'parent' as SessionId,
|
|
childSessionId: SID,
|
|
mode: 'continuable' as const,
|
|
},
|
|
parentAvailable: true,
|
|
},
|
|
}
|
|
const source = liveSession(snap)
|
|
const view = render(
|
|
<QueueDock {...kitFor(snap)} useSession={source.useSession} />,
|
|
)
|
|
|
|
expect(view.getByText('pending child follow-up')).toBeTruthy()
|
|
expect(view.queryByLabelText('编辑排队消息')).toBeNull()
|
|
expect(view.queryByLabelText('删除排队消息')).toBeNull()
|
|
expect(view.queryByLabelText('插话发送')).toBeNull()
|
|
})
|
|
|
|
it('keeps the row and reports a genuine steer failure', async () => {
|
|
const snap = snapshotWith([row('i-steer-race', 'pending steer')])
|
|
const source = liveSession(snap)
|
|
const notify = vi.fn()
|
|
const updateQueue = vi.fn(() => Promise.reject(new Error('transport failed')))
|
|
const { getByLabelText, getByText } = render(
|
|
<QueueDock {...kitFor(snap, { updateQueue, notify })} useSession={source.useSession} />,
|
|
)
|
|
|
|
fireEvent.click(getByLabelText('插话发送'))
|
|
await waitFor(() => {
|
|
expect(notify).toHaveBeenCalledWith(
|
|
'error',
|
|
'插话发送失败，请重试。',
|
|
)
|
|
})
|
|
expect(getByText('pending steer')).toBeTruthy()
|
|
})
|
|
|
|
it('keeps the row and surfaces a notice when an operation loses the claim race', async () => {
|
|
const snap = snapshotWith([row('i-race', 'pending')])
|
|
const source = liveSession(snap)
|
|
const notify = vi.fn()
|
|
const updateQueue = vi.fn(() => Promise.reject(new Error('not found')))
|
|
const { getByLabelText, getByText } = render(
|
|
<QueueDock {...kitFor(snap, { updateQueue, notify })} useSession={source.useSession} />,
|
|
)
|
|
|
|
fireEvent.click(getByLabelText('删除排队消息'))
|
|
await waitFor(() => {
|
|
expect(notify).toHaveBeenCalledWith('error', '删除失败：这条消息可能已经开始发送。')
|
|
})
|
|
expect(getByText('pending')).toBeTruthy()
|
|
})
|
|
|
|
it('follows authoritative retirement back to null', () => {
|
|
const snap = snapshotWith([row('i-1', '在场')])
|
|
const source = liveSession(snap)
|
|
const { container } = render(<QueueDock {...kitFor(snap)} useSession={source.useSession} />)
|
|
expect(container.textContent).toContain('在场')
|
|
act(() => { source.push(snapshotWith([])) })
|
|
expect(container.innerHTML).toBe('')
|
|
})
|
|
|
|
it('registers as the terminal composer-context entry', () => {
|
|
expect(queueDockEntry.name).toBe('conversation-queue-dock')
|
|
expect(queueDockEntry.inject).toEqual(['slots', 'conversation', 'sessions'])
|
|
const register = vi.fn(() => () => undefined)
|
|
const inject = vi.fn((_name: string, callback: () => () => void) => callback())
|
|
queueDockEntry.apply({ slots: { inject, register } } as never)
|
|
expect(inject).toHaveBeenCalledWith('conversation.input.dock', expect.any(Function))
|
|
expect(register).toHaveBeenCalledWith(
|
|
expect.objectContaining({ name: 'conversation.input.dock', id: 'queue', order: 20 }),
|
|
QueueDock,
|
|
)
|
|
})
|
|
})
|