68 lines
7.2 KiB
TypeScript
68 lines
7.2 KiB
TypeScript
/** Real nested React DOM components; deliberately no Electron, SDK, network, or layout claim. */
|
|
import assert from 'node:assert/strict'
|
|
import { createRequire } from 'node:module'
|
|
const { JSDOM } = createRequire(process.cwd() + '/package.json')(process.env.YCODE_TEST_DOM_MODULE || 'jsdom')
|
|
const dom = new JSDOM('<html><body><main id="root"></main></body></html>', { pretendToBeVisual: true, url: 'http://localhost/' })
|
|
for (const key of ['window', 'document', 'Node', 'Element', 'HTMLElement', 'MouseEvent', 'KeyboardEvent', 'Event', 'CustomEvent']) Object.defineProperty(globalThis, key, { value: dom.window[key], configurable: true })
|
|
Object.defineProperty(globalThis, 'navigator', { value: dom.window.navigator, configurable: true })
|
|
Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true, requestAnimationFrame: dom.window.requestAnimationFrame.bind(dom.window), cancelAnimationFrame: dom.window.cancelAnimationFrame.bind(dom.window) })
|
|
const { act } = require('react') as typeof import('react')
|
|
const { createRoot } = require('react-dom/client') as typeof import('react-dom/client')
|
|
const { CompletedFold } = require('../src/renderer/src/workbuddy/conversation/CompletedFold') as typeof import('../src/renderer/src/workbuddy/conversation/CompletedFold')
|
|
const { ToolGroup } = require('../src/renderer/src/workbuddy/conversation/ToolCall') as typeof import('../src/renderer/src/workbuddy/conversation/ToolCall')
|
|
const { ToolCallRenderer } = require('../src/renderer/src/workbuddy/conversation/ToolCallRenderer') as typeof import('../src/renderer/src/workbuddy/conversation/ToolCallRenderer')
|
|
const { ThinkingBlock, TaskBlock, PlanCreateBlock } = require('../src/renderer/src/workbuddy/conversation/SpecializedBlocks') as typeof import('../src/renderer/src/workbuddy/conversation/SpecializedBlocks')
|
|
const root = createRoot(document.getElementById('root')!)
|
|
const tool = (id: string) => ({ id, name: id === 'q' ? 'AskUserQuestion' : 'UnknownOrdinaryTool', status: 'executed' as const, args: { value: id }, result: 'RAW TOOL RESULT', metaData: id === 'q' ? { questionAnswer: { questions: [{ question: 'Choose?', answers: ['Yes'] }] } } : undefined })
|
|
const initialParts = [{ type: 'reasoning', id: 'r', text: 'Thought' }, { type: 'tool', toolId: 't' }, { type: 'tool', toolId: 'q' }, { type: 'text', text: 'Answer' }, { type: 'reasoning', id: 'r2', text: 'Later thought' }, { type: 'tool', toolId: 't2' }, { type: 'tool', toolId: 'task' }, { type: 'tool', toolId: 'plan' }]
|
|
function Fixture({ parts = initialParts, id = 'message-one', finished = true }: { parts?: typeof initialParts; id?: string; finished?: boolean }) {
|
|
return <CompletedFold foldId={id} parts={parts} turnFinished={finished} classifyToolCall={part => part.toolId === 'q' ? { role: 'inline-question' } : undefined}
|
|
renderGroup={(group, children) => <ToolGroup variant="summary" className={`group-${group.units[0].part.id || group.units[0].part.toolId}`} stats={{ toolCallCount: group.toolCallCount, messageCount: group.units.length, errorCount: 0 }}>{children}</ToolGroup>}
|
|
renderUnit={part => part.type === 'tool' && part.toolId === 'task' ? <TaskBlock status="executed" data={{ finalResult: 'Task result', toolInfo: [] }} /> : part.type === 'tool' && part.toolId === 'plan' ? <PlanCreateBlock status="success" data={{ id: 'plan', name: 'Plan', todolist: [] }} /> : part.type === 'reasoning' ? <ThinkingBlock text={String(part.text)} isFinished /> : part.type === 'tool' ? <ToolCallRenderer tool={tool(String(part.toolId))} /> : <p>{String(part.text)}</p>} />
|
|
}
|
|
const get = (selector: string) => { const el = document.querySelector(selector); assert.ok(el, selector); return el }
|
|
const expanded = (selector: string) => get(selector).getAttribute('aria-expanded')
|
|
const outer = '.cr-collapse--completed > .cr-collapse__header'
|
|
const question = '.ask-user-question__header .cr-tool-head__main'
|
|
const ordinary = '[data-tool-call-id="t"] .cr-tool-head__main'
|
|
const thinking = '.group-r .cr-reasoning > .cr-collapse__header'
|
|
const group = '.group-r > .cr-collapse__header'
|
|
const second = '.group-r2 > .cr-collapse__header'
|
|
async function click(selector: string) { await act(async () => get(selector).dispatchEvent(new MouseEvent('click', { bubbles: true }))) }
|
|
async function keyboard(selector: string, key: string) { await act(async () => get(selector).dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }))) }
|
|
async function main() {
|
|
await act(async () => root.render(<Fixture />))
|
|
assert.equal(expanded(outer), 'false')
|
|
await keyboard(outer, 'Enter')
|
|
for (const selector of [group, thinking, ordinary, question]) { assert.equal(expanded(selector), 'false'); await click(selector); assert.equal(expanded(selector), 'true', `${selector} opens on click`) }
|
|
assert.equal(expanded(second), 'false', 'local summaries are independent')
|
|
for (const selector of ['.cb-task-result-item-title', '.cb-plan-header-left']) { assert.equal(expanded(selector), 'true'); await click(selector); assert.equal(expanded(selector), 'false') }
|
|
await keyboard(outer, ' ')
|
|
const content = document.getElementById(get(outer).getAttribute('aria-controls')!)!
|
|
assert.equal(content.getAttribute('aria-hidden'), 'true')
|
|
assert.ok(content.hasAttribute('inert'), 'outer hidden descendants cannot receive focus')
|
|
await keyboard(outer, 'Enter')
|
|
for (const selector of [group, thinking, ordinary, question]) assert.equal(expanded(selector), 'true', `${selector} survives outer remount`)
|
|
assert.equal(expanded(second), 'false')
|
|
for (const selector of ['.cb-task-result-item-title', '.cb-plan-header-left']) assert.equal(expanded(selector), 'false', 'specialized tool choice retained')
|
|
await click(ordinary)
|
|
await act(async () => root.render(<Fixture parts={[...initialParts, { type: 'tool', toolId: 't3' }]} />))
|
|
await click(outer); await click(outer)
|
|
assert.equal(expanded(ordinary), 'false', 'explicit collapsed choice persists after later event')
|
|
for (const selector of [group, thinking, question]) assert.equal(expanded(selector), 'true', `${selector} retained after later event`)
|
|
assert.equal(expanded(second), 'false')
|
|
assert.equal(document.querySelectorAll('.ask-user-question--completed').length, 1, 'no duplicated hidden content trees')
|
|
await act(async () => root.render(<Fixture id="message-two" />))
|
|
assert.equal(expanded(outer), 'false', 'message identity resets outer state')
|
|
await click(outer)
|
|
for (const selector of [group, thinking, ordinary, question]) assert.equal(expanded(selector), 'false', 'message identity isolates nested state')
|
|
await act(async () => root.render(<Fixture id="live-message" finished={false} />))
|
|
for (const selector of [group, thinking, ordinary, question]) await click(selector)
|
|
await act(async () => root.render(<Fixture id="live-message" finished />))
|
|
assert.equal(expanded(outer), 'true', 'completion preserves manually opened reasoning reader')
|
|
for (const selector of [group, thinking, ordinary, question]) assert.equal(expanded(selector), 'true', `${selector} survives live-to-completed reparenting`)
|
|
await act(async () => root.unmount()); dom.window.close()
|
|
console.log('completed-fold-nested: real question/tool/thinking/local-summary remount, event, keyboard and identity contracts passed')
|
|
}
|
|
main().then(() => process.exit(0)).catch(error => { console.error(error); dom.window.close(); process.exit(1) })
|