|
| 1 | +/** |
| 2 | + * @vitest-environment jsdom |
| 3 | + */ |
| 4 | +import { act } from 'react' |
| 5 | +import { createRoot, type Root } from 'react-dom/client' |
| 6 | +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' |
| 7 | +import { AgentGroup } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group' |
| 8 | +import type { AgentGroupItem } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view' |
| 9 | +import type { ToolCallData, ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types' |
| 10 | + |
| 11 | +function tool(id: string, status: ToolCallStatus = 'executing'): ToolCallData { |
| 12 | + return { id, toolName: 'read', displayTitle: `Reading ${id}`, status } |
| 13 | +} |
| 14 | + |
| 15 | +function items(tools: ToolCallData[]): AgentGroupItem[] { |
| 16 | + return tools.map((data) => ({ type: 'tool', data })) |
| 17 | +} |
| 18 | + |
| 19 | +describe.each(['mothership', 'workflow', 'browser'])('%s activity cadence', (agentName) => { |
| 20 | + let root: Root |
| 21 | + let container: HTMLDivElement |
| 22 | + beforeEach(() => { |
| 23 | + vi.useFakeTimers() |
| 24 | + ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true |
| 25 | + container = document.createElement('div') |
| 26 | + document.body.appendChild(container) |
| 27 | + root = createRoot(container) |
| 28 | + }) |
| 29 | + afterEach(() => { |
| 30 | + act(() => root.unmount()) |
| 31 | + container.remove() |
| 32 | + vi.useRealTimers() |
| 33 | + }) |
| 34 | + const render = (tools: ToolCallData[], active = true) => |
| 35 | + act(() => |
| 36 | + root.render( |
| 37 | + <AgentGroup |
| 38 | + agentName={agentName} |
| 39 | + agentLabel='Agent prefix' |
| 40 | + items={items(tools)} |
| 41 | + isStreaming={active} |
| 42 | + isLaneOpen={active} |
| 43 | + /> |
| 44 | + ) |
| 45 | + ) |
| 46 | + const header = () => container.querySelector('[role="status"]') |
| 47 | + const advance = (ms: number) => act(() => vi.advanceTimersByTime(ms)) |
| 48 | + |
| 49 | + it('shows the first action immediately and coalesces bursts without replaying a backlog', () => { |
| 50 | + render([]) |
| 51 | + advance(100) |
| 52 | + render([tool('first')]) |
| 53 | + expect(header()?.textContent).toBe('Reading first') |
| 54 | + const row = header() |
| 55 | + const shimmer = container.querySelector('[class*="shimmer"]') |
| 56 | + advance(100) |
| 57 | + render([tool('first', 'success')]) |
| 58 | + expect(header()?.textContent).toBe('Reading first') |
| 59 | + expect(container.querySelector('[class*="shimmer"]')).toBe(shimmer) |
| 60 | + render([tool('first', 'success'), tool('second')]) |
| 61 | + expect(header()).toBe(row) |
| 62 | + expect(container.querySelector('[class*="shimmer"]')).toBe(shimmer) |
| 63 | + expect(header()?.textContent).toBe('Reading first') |
| 64 | + advance(600) |
| 65 | + render([tool('first', 'success'), tool('second', 'success'), tool('third')]) |
| 66 | + advance(299) |
| 67 | + expect(header()?.textContent).toBe('Reading first') |
| 68 | + advance(1) |
| 69 | + expect(header()?.textContent).toBe('Reading third') |
| 70 | + expect(container.textContent).not.toContain('Agent prefix') |
| 71 | + advance(1000) |
| 72 | + expect(header()?.textContent).toBe('Reading third') |
| 73 | + }) |
| 74 | + |
| 75 | + it('keeps live history complete under a stable expanded header with keyboard disclosure', () => { |
| 76 | + render([tool('first', 'success'), tool('second')]) |
| 77 | + const trigger = container.querySelector<HTMLElement>('[role="button"]')! |
| 78 | + const event = new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }) |
| 79 | + act(() => trigger.dispatchEvent(event)) |
| 80 | + expect(event.defaultPrevented).toBe(true) |
| 81 | + expect(trigger.getAttribute('aria-expanded')).toBe('true') |
| 82 | + expect(header()?.textContent).toBe('Tool activity') |
| 83 | + render([tool('first', 'success'), tool('second', 'success'), tool('third')]) |
| 84 | + expect(header()?.textContent).toBe('Tool activity') |
| 85 | + expect(container.querySelector('[data-state="open"]')?.textContent).toBe( |
| 86 | + 'Read firstRead secondReading third' |
| 87 | + ) |
| 88 | + act(() => trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))) |
| 89 | + expect(trigger.getAttribute('aria-expanded')).toBe('false') |
| 90 | + expect(header()?.textContent).toBe('Reading third') |
| 91 | + }) |
| 92 | + |
| 93 | + it.each(['error', 'cancelled', 'interrupted', 'rejected', 'skipped'] as const)( |
| 94 | + 'shows %s immediately and cancels a pending cosmetic update', |
| 95 | + (status) => { |
| 96 | + render([tool('first')]) |
| 97 | + advance(100) |
| 98 | + render([tool('first', 'success'), tool('second')]) |
| 99 | + render([tool('first', 'success'), tool('second', status)]) |
| 100 | + const prefix = |
| 101 | + status === 'error' || status === 'rejected' |
| 102 | + ? 'Failed' |
| 103 | + : status === 'skipped' |
| 104 | + ? 'Skipped' |
| 105 | + : 'Stopped' |
| 106 | + expect(header()?.textContent).toBe(`${prefix} reading second`) |
| 107 | + expect(container.querySelector('[class*="shimmer"]')).toBeNull() |
| 108 | + advance(1500) |
| 109 | + expect(header()?.textContent).toBe(`${prefix} reading second`) |
| 110 | + } |
| 111 | + ) |
| 112 | + |
| 113 | + it('shows final completion immediately and never replays the held action', () => { |
| 114 | + render([tool('first')]) |
| 115 | + advance(100) |
| 116 | + render([tool('first', 'success'), tool('second')]) |
| 117 | + render([tool('first', 'success'), tool('second', 'success')], false) |
| 118 | + expect(header()?.textContent).toBe('Read files') |
| 119 | + expect(container.querySelector('[class*="shimmer"]')).toBeNull() |
| 120 | + advance(2000) |
| 121 | + expect(header()?.textContent).toBe('Read files') |
| 122 | + }) |
| 123 | + |
| 124 | + it.each(['error', 'cancelled', 'interrupted', 'rejected', 'skipped'] as const)( |
| 125 | + 'keeps an earlier parallel call active when the latest one becomes %s', |
| 126 | + (status) => { |
| 127 | + render([tool('first'), tool('second')]) |
| 128 | + advance(100) |
| 129 | + render([tool('first'), tool('second', status)]) |
| 130 | + const outcome = |
| 131 | + status === 'error' || status === 'rejected' |
| 132 | + ? 'failed' |
| 133 | + : status === 'skipped' |
| 134 | + ? 'skipped' |
| 135 | + : 'stopped' |
| 136 | + expect(header()?.textContent).toBe(`Reading first · 1 ${outcome}`) |
| 137 | + expect(container.querySelector('[class*="shimmer"]')).not.toBeNull() |
| 138 | + advance(1000) |
| 139 | + expect(header()?.textContent).toBe(`Reading first · 1 ${outcome}`) |
| 140 | + } |
| 141 | + ) |
| 142 | + |
| 143 | + it('surfaces an earlier parallel failure while the latest call keeps working', () => { |
| 144 | + render([tool('first'), tool('second')]) |
| 145 | + advance(100) |
| 146 | + render([tool('first', 'error'), tool('second')]) |
| 147 | + expect(header()?.textContent).toBe('Reading second · 1 failed') |
| 148 | + }) |
| 149 | + |
| 150 | + it('keeps narration from prematurely completing an open lane', () => { |
| 151 | + act(() => |
| 152 | + root.render( |
| 153 | + <AgentGroup |
| 154 | + agentName={agentName} |
| 155 | + agentLabel='Sim' |
| 156 | + isStreaming |
| 157 | + isLaneOpen |
| 158 | + items={[ |
| 159 | + ...items([tool('first', 'success')]), |
| 160 | + { type: 'text', content: 'Checking another source.' }, |
| 161 | + ...items([tool('second', 'success')]), |
| 162 | + ]} |
| 163 | + /> |
| 164 | + ) |
| 165 | + ) |
| 166 | + const rows = container.querySelectorAll('[role="status"]') |
| 167 | + if (agentName === 'mothership') { |
| 168 | + expect(rows[0].textContent).toBe('Read first') |
| 169 | + expect(rows[0].querySelector('[class*="shimmer"]')).toBeNull() |
| 170 | + } |
| 171 | + const liveRow = rows[rows.length - 1] |
| 172 | + expect(liveRow.textContent).toBe('Reading second') |
| 173 | + expect(liveRow.querySelector('[class*="shimmer"]')).not.toBeNull() |
| 174 | + }) |
| 175 | +}) |
0 commit comments