207 lines
8.3 KiB
TypeScript
207 lines
8.3 KiB
TypeScript
// @vitest-environment happy-dom
|
||
import { mount } from '@vue/test-utils'
|
||
import { describe, expect, it } from 'vitest'
|
||
import type { AgentEvent, AgentEventType } from '@/contracts'
|
||
import TraceTimeline from './TraceTimeline.vue'
|
||
|
||
let sequence = 0
|
||
|
||
function event(type: AgentEventType, data: Record<string, unknown> = {}): AgentEvent {
|
||
return {
|
||
event: type,
|
||
sequence: ++sequence,
|
||
run_id: 'run-1',
|
||
data,
|
||
timestamp: '2026-01-01T00:00:00.000Z',
|
||
}
|
||
}
|
||
|
||
/** 一次带工具调用的运行：模型调用有子节点，Usage / 引用是叶子。 */
|
||
function sampleEvents(): AgentEvent[] {
|
||
return [
|
||
event('RunStarted'),
|
||
event('ModelCallStarted', { model_call_id: 'mc-1', model: 'mock-1' }),
|
||
event('ModelCallCompleted', { model_call_id: 'mc-1', duration_ms: 800 }),
|
||
event('ToolCall', { tool_call_id: 'tc-1', name: 'read_note', parent_model_call_id: 'mc-1' }),
|
||
event('ToolResult', { tool_call_id: 'tc-1', name: 'read_note', success: true, parent_model_call_id: 'mc-1' }),
|
||
event('Citation', { file_path: 'notes/a.md', block_id: 'blk-1', heading_path: 'A > B' }),
|
||
event('RunCompleted'),
|
||
]
|
||
}
|
||
|
||
function mountTree(events: AgentEvent[]) {
|
||
const wrapper = mount(TraceTimeline, { props: { events } })
|
||
return wrapper
|
||
}
|
||
|
||
async function switchToTree(wrapper: ReturnType<typeof mountTree>) {
|
||
const treeButton = wrapper.findAll('button').find((b) => b.text() === '树形')
|
||
await treeButton!.trigger('click')
|
||
return wrapper
|
||
}
|
||
|
||
describe('TraceTimeline 树形视图', () => {
|
||
it('bounds rendered events while searching the complete history', async () => {
|
||
const events = Array.from({ length: 1000 }, (_, i) => event('TextDelta', { text: `message-${i}` }))
|
||
const wrapper = mountTree(events)
|
||
expect(wrapper.findAll('.event-card')).toHaveLength(200)
|
||
await wrapper.findAll('button').find(button => button.text() === '下一页')!.trigger('click')
|
||
expect(wrapper.findAll('.event-card')).toHaveLength(200)
|
||
await wrapper.get('input').setValue('message-999')
|
||
expect(wrapper.findAll('.event-card')).toHaveLength(1)
|
||
expect(wrapper.text()).toContain('message-999')
|
||
wrapper.unmount()
|
||
})
|
||
it('filters errors while retaining tree ancestors and final tool data', async () => {
|
||
const events = sampleEvents()
|
||
const result = events.find(item => item.event === 'ToolResult')!
|
||
result.data.success = false
|
||
result.data.error_code = 'TIMEOUT'
|
||
const wrapper = mountTree(events)
|
||
await wrapper.get('input[type="checkbox"]').setValue(true)
|
||
expect(wrapper.findAll('.event-card')).toHaveLength(1)
|
||
await switchToTree(wrapper)
|
||
expect(wrapper.findAll('.tree-node')).toHaveLength(2)
|
||
expect(wrapper.text()).toContain('TIMEOUT')
|
||
await wrapper.get('[aria-label="搜索执行轨迹"]').setValue('no-match')
|
||
expect(wrapper.text()).toContain('没有匹配的事件')
|
||
wrapper.unmount()
|
||
})
|
||
it('filters a tool including its result and keeps citation navigation usable', async () => {
|
||
const wrapper = mountTree(sampleEvents())
|
||
await wrapper.get('[aria-label="工具筛选"]').setValue('read_note')
|
||
expect(wrapper.findAll('.event-card')).toHaveLength(2)
|
||
await wrapper.findAll('button').find(button => button.text() === '清除筛选')!.trigger('click')
|
||
await wrapper.get('[aria-label="事件类型"]').setValue('Citation')
|
||
await wrapper.get('.event-citation').trigger('click')
|
||
expect(wrapper.emitted('open-citation')).toHaveLength(1)
|
||
wrapper.unmount()
|
||
})
|
||
it('叶子节点点击后能看到自己的数据', async () => {
|
||
// 回归：之前行的 click 是 `children.length && toggleExpand(id)`，
|
||
// 而详情 v-if 又要求 children.length === 0 —— 两个条件互斥，
|
||
// 叶子节点永远打不开详情。
|
||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||
|
||
const rows = wrapper.findAll('.node-row')
|
||
const citationRow = rows.find((row) => row.text().includes('引用来源'))
|
||
expect(citationRow).toBeTruthy()
|
||
expect(wrapper.find('.node-detail').exists()).toBe(false)
|
||
|
||
await citationRow!.trigger('click')
|
||
|
||
const detail = wrapper.find('.node-detail')
|
||
expect(detail.exists()).toBe(true)
|
||
expect(detail.text()).toContain('notes/a.md')
|
||
})
|
||
|
||
it('有子节点的节点也能查看自己的数据，不只是展开子树', async () => {
|
||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||
|
||
const modelRow = wrapper.findAll('.node-row').find((row) => row.text().includes('模型调用'))
|
||
await modelRow!.trigger('click')
|
||
|
||
const detail = wrapper.find('.node-detail')
|
||
expect(detail.exists()).toBe(true)
|
||
expect(detail.text()).toContain('mc-1')
|
||
})
|
||
|
||
it('展开箭头只切子树，不会连带打开详情', async () => {
|
||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||
|
||
// 初始只有顶层节点：运行开始、模型调用、引用、运行完成
|
||
expect(wrapper.findAll('.node-row')).toHaveLength(4)
|
||
|
||
const arrow = wrapper.find('.expand-icon:not(.placeholder)')
|
||
expect(arrow.exists()).toBe(true)
|
||
await arrow.trigger('click')
|
||
|
||
// 子节点出现，但没有任何详情面板被打开
|
||
expect(wrapper.findAll('.node-row')).toHaveLength(5)
|
||
expect(wrapper.text()).toContain('工具调用：read_note')
|
||
expect(wrapper.find('.node-detail').exists()).toBe(false)
|
||
})
|
||
|
||
it('键盘 Enter 与空格可以打开详情', async () => {
|
||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||
const row = wrapper.findAll('.node-row').find((r) => r.text().includes('运行开始'))!
|
||
|
||
await row.trigger('keydown.enter')
|
||
expect(wrapper.find('.node-detail').exists()).toBe(true)
|
||
|
||
await row.trigger('keydown.space')
|
||
expect(wrapper.find('.node-detail').exists()).toBe(false)
|
||
})
|
||
|
||
it('行的 aria-expanded 跟随详情开合', async () => {
|
||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||
const row = wrapper.findAll('.node-row').find((r) => r.text().includes('运行开始'))!
|
||
|
||
expect(row.attributes('aria-expanded')).toBe('false')
|
||
await row.trigger('click')
|
||
expect(row.attributes('aria-expanded')).toBe('true')
|
||
})
|
||
|
||
it('引用节点带「定位」按钮，点击后抛出 open-citation 且不打开详情', async () => {
|
||
const wrapper = await switchToTree(mountTree(sampleEvents()))
|
||
|
||
const locate = wrapper.find('.node-locate')
|
||
expect(locate.exists()).toBe(true)
|
||
await locate.trigger('click')
|
||
|
||
const emitted = wrapper.emitted('open-citation')
|
||
expect(emitted).toHaveLength(1)
|
||
expect((emitted![0][0] as Record<string, unknown>).file_path).toBe('notes/a.md')
|
||
// @click.stop 生效，行的详情不该被顺带打开
|
||
expect(wrapper.find('.node-detail').exists()).toBe(false)
|
||
})
|
||
|
||
it('引用缺少 file_path 时不显示定位按钮', async () => {
|
||
const wrapper = await switchToTree(mountTree([event('Citation', { heading_path: 'A' })]))
|
||
|
||
expect(wrapper.find('.node-locate').exists()).toBe(false)
|
||
})
|
||
})
|
||
|
||
describe('TraceTimeline 时间线视图', () => {
|
||
it('Usage 卡片读后端真实字段 token_usage', () => {
|
||
// 后端只发累计的 token_usage（runtime.py），没有 input/output/total_tokens。
|
||
const wrapper = mountTree([event('Usage', { token_usage: 1024 })])
|
||
|
||
expect(wrapper.find('.event-usage').text()).toContain('1024')
|
||
})
|
||
|
||
it('Usage 缺字段时显示占位符而不是 undefined', () => {
|
||
const wrapper = mountTree([event('Usage', {})])
|
||
|
||
const text = wrapper.find('.event-usage').text()
|
||
expect(text).toContain('-')
|
||
expect(text).not.toContain('undefined')
|
||
})
|
||
|
||
it('点击引用卡片抛出 open-citation', async () => {
|
||
const wrapper = mountTree([event('Citation', { file_path: 'notes/a.md', heading_path: 'A' })])
|
||
|
||
await wrapper.find('.event-citation').trigger('click')
|
||
|
||
expect(wrapper.emitted('open-citation')).toHaveLength(1)
|
||
})
|
||
|
||
it('工具调用统计按 ToolResult 显示最终状态，不停在 running', () => {
|
||
const wrapper = mountTree([
|
||
event('ToolCall', { tool_call_id: 'tc-9', name: 'write_note' }),
|
||
event('ToolResult', { tool_call_id: 'tc-9', name: 'write_note', success: false, error_code: 'TOOL_DENIED' }),
|
||
])
|
||
|
||
const item = wrapper.find('.tool-call-item')
|
||
expect(item.classes()).toContain('error')
|
||
expect(item.text()).toContain('失败')
|
||
})
|
||
|
||
it('没有事件时显示等待态', () => {
|
||
const wrapper = mountTree([])
|
||
|
||
expect(wrapper.find('.empty-state').text()).toContain('等待执行轨迹')
|
||
})
|
||
})
|