// @vitest-environment jsdom /** * Todo display acceptance: the TodoPanel plan strip (empty-hidden, status rows * including several `in_progress` at once, collapse), its TodoDock adapter * (selects the plan off the session snapshot and follows changes), the row's * plan summary (counts plus the two halves of the active summary — the named * task and the `+N` count that parallel work adds, kept apart so the row never * ellipsizes the count away), and the todo_write toolview row (progress summary * from args, generic fallback on malformed JSON, shared ToolRow state dots and * leading expansion). */ import { act, cleanup, fireEvent, render, screen } from '@testing-library/react' import { afterEach, describe, expect, it, vi } from 'vitest' import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react' import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client' import type { TodoItem, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client' import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime' import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts' // Export discipline: packages/client/AGENTS.md. import { TodoRow, todoToolview } from '../src/client/toolviews/todo-row.tsx' import type { TodoDockProps } from '../src/client/skeleton/TodoPanel.tsx' import { TodoDock, TodoPanel, todoDockEntry } from '../src/client/skeleton/TodoPanel.tsx' import { planSummary } from '../src/client/toolviews/plan-summary.ts' import { NS, zh } from '../src/client/locales.ts' type TodoRowProps = Parameters[0] // Mirrors the real lookup chain (conversation namespace, then common). const t: TodoDockProps['t'] = makeTranslate(zh, commonZh) afterEach(cleanup) const LIST: TodoItem[] = [ { content: '搭骨架', status: 'completed' }, { content: '写组件', status: 'in_progress' }, { content: '补测试', status: 'pending' }, ] /** A parallel plan: three tasks running at once (concurrent subagents). */ const PARALLEL: TodoItem[] = [ { content: '搭骨架', status: 'completed' }, { content: '写组件', status: 'in_progress' }, { content: '跑后台构建', status: 'in_progress' }, { content: '读源码', status: 'in_progress' }, { content: '补测试', status: 'pending' }, ] describe('planSummary', () => { it('counts done/total and names the single active item with no extra count', () => { expect(planSummary(LIST)).toEqual({ done: 1, total: 3, activeContent: '写组件', activeExtra: 0 }) }) it('reports the extra active count separately when several items are in progress', () => { // Parallel work marks several: naming one and hiding the rest would lose // them, and the count stays unjoined so the row cannot ellipsize it. expect(planSummary(PARALLEL)).toEqual({ done: 1, total: 5, activeContent: '写组件', activeExtra: 2 }) }) it('has no hint when nothing is in progress', () => { expect(planSummary([{ content: '都完了', status: 'completed' }])) .toEqual({ done: 1, total: 1, activeContent: null, activeExtra: 0 }) }) it('has no hint when the first active item carries no usable content (model JSON)', () => { // Unvalidated args: a missing, mistyped, or empty content yields no hint — // and no orphan count, even with a second active item to count. expect(planSummary([{ status: 'in_progress' }, { content: 'x', status: 'in_progress' }])) .toMatchObject({ activeContent: null, activeExtra: 0 }) expect(planSummary([{ content: 42, status: 'in_progress' }]).activeContent).toBeNull() expect(planSummary([{ content: '', status: 'in_progress' }]).activeContent).toBeNull() }) it('is empty-safe', () => { expect(planSummary([])).toEqual({ done: 0, total: 0, activeContent: null, activeExtra: 0 }) }) }) describe('TodoPanel', () => { it('renders nothing while the list is empty', () => { const { container } = render() expect(container.innerHTML).toBe('') }) it('starts collapsed with the per-status count summary visible', () => { render() expect(screen.getByTestId('todo-panel')).toBeTruthy() expect(screen.getByText('任务')).toBeTruthy() expect(screen.getByText('1 已完成 · 1 进行中 · 1 待处理')).toBeTruthy() expect(screen.getByRole('button', { expanded: false })).toBeTruthy() expect(screen.queryByRole('list')).toBeNull() }) it('omits the completed segment while nothing is done yet', () => { render() expect(screen.getByText('1 进行中 · 1 待处理')).toBeTruthy() expect(screen.queryByText(/已完成/)).toBeNull() }) it('expands to show one row per item with its status glyph', () => { render() fireEvent.click(screen.getByRole('button', { expanded: false })) const items = screen.getAllByRole('listitem') expect(items.map(li => li.getAttribute('data-status'))).toEqual(['completed', 'in_progress', 'pending']) expect(screen.getByText('搭骨架')).toBeTruthy() expect(screen.getByText('写组件')).toBeTruthy() // Each status row carries an SVG glyph (not a text bullet). expect(items.every(li => li.querySelector('svg') !== null)).toBe(true) }) it('collapse hides an expanded list; expand restores; header keeps the count summary', () => { render() fireEvent.click(screen.getByRole('button', { expanded: false })) const header = screen.getByRole('button', { expanded: true }) fireEvent.click(header) expect(screen.queryByRole('list')).toBeNull() // Collapsed header is title + progress only (no in-progress content hint). expect(screen.getByText('1 已完成 · 1 进行中 · 1 待处理')).toBeTruthy() expect(screen.queryByText('写组件')).toBeNull() fireEvent.click(screen.getByRole('button', { expanded: false })) expect(screen.getAllByRole('listitem')).toHaveLength(3) }) it('marks every parallel active item, and counts them all in the header', () => { render() fireEvent.click(screen.getByRole('button', { expanded: false })) // The cap this branch removes made this list unreachable: three items carry // the in-progress glyph at once, and the header counts all three. const statuses = screen.getAllByRole('listitem').map(li => li.getAttribute('data-status')) expect(statuses.filter(s => s === 'in_progress')).toHaveLength(3) expect(screen.getByText('跑后台构建')).toBeTruthy() expect(screen.getByText('读源码')).toBeTruthy() expect(screen.getByText('1 已完成 · 3 进行中 · 1 待处理')).toBeTruthy() }) it('an all-completed list collapses the summary to the done count alone', () => { render() expect(screen.getByRole('button', { expanded: false })).toBeTruthy() expect(screen.queryByText('都完了')).toBeNull() expect(screen.getByText('1 已完成')).toBeTruthy() expect(screen.queryByText(/进行中|待处理/)).toBeNull() }) }) /** Dock props stub: the adapter reads the 'todos' projection only; the rest of the owner share is unused. */ function dockProps(store: ReturnType>): TodoDockProps { const useProjection = (_key: string, selector?: (v: unknown) => unknown) => bindSnapshotSelector(store)(s => (selector ?? (v => v))(s.value)) return { useProjection, t } as unknown as TodoDockProps } describe('TodoDock', () => { it('reads the host-computed todos projection and follows pushed updates', () => { const store = createSnapshotStore<{ value: readonly TodoItem[] | null | undefined }>({ value: undefined }) render() // Capability absent (no baseline/frame yet) renders nothing. expect(screen.queryByTestId('todo-panel')).toBeNull() act(() => { store.set({ value: LIST }) }) expect(screen.getByText('1 已完成 · 1 进行中 · 1 待处理')).toBeTruthy() // The pre-first-write whole value (null) retires the strip (the panel owns no data). act(() => { store.set({ value: null }) }) expect(screen.queryByTestId('todo-panel')).toBeNull() }) it('registers before the goal and queue entries', () => { expect(todoDockEntry.name).toBe('conversation-todo-dock') expect(todoDockEntry.inject).toEqual(['slots', 'conversation']) const register = vi.fn() todoDockEntry.apply({ slots: { register } } as never) expect(register).toHaveBeenCalledWith({ name: 'conversation.input.dock', id: 'todo', order: 0, locale: NS }, TodoDock) }) }) const resultNode = (argsRaw: string, over?: Partial): ToolResultNode => ({ kind: 'tool-result', seq: 10, time: 2_000, callTime: 1_000, callId: 'c1', call: { name: 'todo_write', argsRaw }, content: [], isError: false, callView: null, resultView: null, ...over, }) function rowProps(block: unknown): TodoRowProps { return { callId: 'c1', toolName: 'todo_write', block, openFile: vi.fn(), sessionId: 's1', useSessions: () => undefined, t, } as unknown as TodoRowProps } describe('TodoRow', () => { const ARGS = JSON.stringify({ todos: LIST }) it('summarizes counts and the active item from the call args', () => { render() expect(screen.getByText('更新任务清单')).toBeTruthy() expect(screen.getByText('1/3 已完成 · 写组件')).toBeTruthy() }) it('reports the extra active count outside the ellipsized summary text', () => { const { container } = render() const text = screen.getByText('1/5 已完成 · 写组件') const extra = screen.getByText('+2') // Separate spans: .summary truncates, the count must not travel inside it. expect(text.contains(extra)).toBe(false) expect(container.textContent).toContain('1/5 已完成 · 写组件+2') }) it('omits the active clause when no item is in progress and reads running-call args', () => { const args = JSON.stringify({ todos: [{ content: 'x', status: 'completed' }] }) render() expect(screen.getByText('1/1 已完成')).toBeTruthy() }) it('keeps the counts when an active item has unusable content, instead of the generic summary', () => { // planSummary yields activeContent null here, but the counts are known good, // so the row drops only the active clause — `?? model.summary` never runs. const args = JSON.stringify({ todos: [{ content: 'done', status: 'completed' }, { content: 42, status: 'in_progress' }] }) const { container } = render() expect(screen.getByText('1/2 已完成')).toBeTruthy() expect(container.textContent).not.toContain('+') }) it('keeps the non-ok execution states visible through the shared row states', () => { // A running call (no result yet) carries the running state (row sweep). const args = JSON.stringify({ todos: LIST }) const running = render() expect(running.container.querySelector('[data-state="running"]')).not.toBeNull() expect(running.container.querySelector('[data-state="running"] svg')).not.toBeNull() running.unmount() // A cancelled call wrote no todo/write: the row must not read as a completed update. const stopped = render() expect(stopped.container.querySelector('[data-state="stopped"]')).not.toBeNull() }) it('falls back to the generic summary on malformed args and marks the error state', () => { const view = render() expect(view.container.querySelector('[data-state="error"]')).not.toBeNull() // Generic others summary: " · ". expect(screen.getByText('todo_write · not json')).toBeTruthy() }) it('falls back when parsed args carry no todos array', () => { render() expect(screen.getByText('todo_write · {"other":1}')).toBeTruthy() }) it('leading toggle expands the raw args body', () => { render() fireEvent.click(screen.getByRole('button', { expanded: false })) expect(screen.getByRole('button', { expanded: true })).toBeTruthy() // The expanded body is the pretty-printed args, not the tool output. expect(screen.getByText(/搭骨架/)).toBeTruthy() }) it.each([ { label: 'null root', argsRaw: 'null' }, { label: 'non-object root', argsRaw: '42' }, { label: 'null items', argsRaw: '{"todos":[null]}' }, ])('falls back to the generic summary on valid JSON with an invalid shape ($label)', ({ argsRaw }) => { render() // No throw, and the generic others summary carries the raw args verbatim. expect(screen.getByText(`todo_write · ${argsRaw}`)).toBeTruthy() }) it('window-truncated result (call head lost) falls back to the callId summary', () => { render() expect(screen.getByText('todo_write · c1')).toBeTruthy() }) it('todoToolview is a plain registrant riding the conversation load-order seam', () => { expect(todoToolview.name).toBe('todo-toolview') expect(todoToolview.inject).toEqual(['slots', 'conversation']) const register = vi.fn() todoToolview.apply({ slots: { register } } as never) expect(register).toHaveBeenCalledWith({ name: 'conversation.chat.toolview', key: 'todo_write', locale: NS }, TodoRow) }) })