5081697aaf
The bash tool already declares the `card: 'terminal'` render intent for both its call and its result, and host/connection/runtime already deliver it to the browser as callView/resultView. The Web client ignored it: rows derived from raw args, and the details panel flattened every tool's content into one soft-wrapping `<pre>`. Column-aligned output folded into a paragraph and a long listing stretched the panel without bound. `TerminalBlock` (ui-primitives) renders a command as a terminal surface: a shortened-cwd prompt line, output at `white-space: pre` in a horizontally scrolling box, a head/tail height cap with an expand control, an exit-code/signal status pill, and a copy control for the raw output. ANSI SGR runs are parsed with `anser` and resolved onto `--dsw-*` theme tokens, with literal rgb kept for values the design system has no token for. Geometry and fonts mirror CodeBlock; the clipboard write both need moved into a package-internal `clipboard.ts`. Both Web render sites for a bash call consume the intent through one derivation (`terminal-card-model.ts`), so they cannot disagree about a command, its cwd, or its exit status: the keyed BashRow carries the card resident below its summary row, and the render-site fallback row keeps it behind its existing expand control. Rows cap at 8 lines against the panel's 16. Inline output in the chat row reverses this package's stated no-inline-output convention, on the owner's explicit decision; the Agent Note records the reversal and its bound. Tests: TerminalBlock/ansi/clipboard unit specs, ui-conversation wiring specs at every render site, a built-client-graph snapshot covering both chat-row shapes, and a real-browser e2e asserting the no-wrap layout and the page's own Clipboard API.
316 lines
14 KiB
TypeScript
316 lines
14 KiB
TypeScript
// @vitest-environment jsdom
|
|
// TerminalBlock: the prompt label's cwd shortening, the running/empty/settled
|
|
// arms, the exit-status pill, the head/tail height cap and its expand control,
|
|
// and the copy control writing the raw output on both the accepted and the
|
|
// refused clipboard paths. writeClipboard's own return contract is pinned here
|
|
// too, since it is the seam both copy controls in this package share; the
|
|
// resolution of ANSI runs into styles is pinned in ansi.spec.ts, so only its
|
|
// DOM consequence (which runs get a span wrapper) is asserted here.
|
|
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
|
|
import { DEFAULT_TERMINAL_MAX_LINES, TerminalBlock } from '../src/index.ts'
|
|
import { writeClipboard } from '../src/clipboard.ts'
|
|
|
|
const ESC = '\u001b'
|
|
|
|
afterEach(cleanup)
|
|
|
|
beforeEach(() => {
|
|
vi.useRealTimers()
|
|
})
|
|
|
|
/** The rendered output rows, one string per visible line (CSS-module class prefix). */
|
|
function outputLines(container: HTMLElement): string[] {
|
|
return [...container.querySelectorAll('[class^="_line_"]')].map(row => row.textContent ?? '')
|
|
}
|
|
|
|
/** `count` numbered output lines, without the terminating newline. */
|
|
function body(count: number): string {
|
|
return Array.from({ length: count }, (_value, index) => `line ${index + 1}`).join('\n')
|
|
}
|
|
|
|
describe('TerminalBlock prompt label', () => {
|
|
it('collapses the home directory itself to ~', () => {
|
|
render(<TerminalBlock command="ls" cwd="/Users/me" home="/Users/me" />)
|
|
expect(screen.getByText('~')).toBeTruthy()
|
|
})
|
|
|
|
it('shows only the last segment below home', () => {
|
|
render(<TerminalBlock command="ls" cwd="/Users/me/Documents" home="/Users/me" />)
|
|
expect(screen.getByText('Documents')).toBeTruthy()
|
|
})
|
|
|
|
it('ignores trailing separators on both the cwd and home', () => {
|
|
const view = render(<TerminalBlock command="ls" cwd="/Users/me/" home="/Users/me" />)
|
|
expect(view.getByText('~')).toBeTruthy()
|
|
view.rerender(<TerminalBlock command="ls" cwd="/Users/me" home="/Users/me/" />)
|
|
expect(view.getByText('~')).toBeTruthy()
|
|
})
|
|
|
|
it('drops trailing separators before taking the last segment', () => {
|
|
render(<TerminalBlock command="ls" cwd="/Users/me/Documents///" home="/Users/me" />)
|
|
expect(screen.getByText('Documents')).toBeTruthy()
|
|
})
|
|
|
|
it('takes the last segment when no home is known', () => {
|
|
render(<TerminalBlock command="ls" cwd="C:\\Users\\me\\Projects" />)
|
|
expect(screen.getByText('Projects')).toBeTruthy()
|
|
})
|
|
|
|
it('collapses a backslash home path to ~', () => {
|
|
render(<TerminalBlock command="ls" cwd="C:\\Users\\me" home="C:\\Users\\me" />)
|
|
expect(screen.getByText('~')).toBeTruthy()
|
|
})
|
|
|
|
it('falls back to the raw path when it has no segment', () => {
|
|
render(<TerminalBlock command="ls" cwd="/" home="/Users/me" />)
|
|
expect(screen.getByText('/')).toBeTruthy()
|
|
})
|
|
|
|
it('renders a plain $ with no cwd', () => {
|
|
render(<TerminalBlock command="ls" />)
|
|
expect(screen.getByText('$')).toBeTruthy()
|
|
})
|
|
|
|
it('renders the command verbatim after the label', () => {
|
|
render(<TerminalBlock command="git log --oneline | head -3" cwd="/Users/me/app" />)
|
|
expect(screen.getByText('git log --oneline | head -3')).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe('TerminalBlock states', () => {
|
|
it('running shows the command line only: no output, no placeholder, no copy', () => {
|
|
const view = render(<TerminalBlock command="sleep 5" running output="partial" />)
|
|
expect(view.getByText('sleep 5')).toBeTruthy()
|
|
expect(view.queryByText('partial')).toBeNull()
|
|
expect(view.queryByText('无输出')).toBeNull()
|
|
expect(view.queryByRole('button')).toBeNull()
|
|
expect(view.container.firstElementChild?.getAttribute('data-running')).toBe('')
|
|
})
|
|
|
|
it('running still shows a settled-looking status pill when one is supplied', () => {
|
|
render(<TerminalBlock command="sleep 5" running signal="SIGINT" />)
|
|
expect(screen.getByText('信号 SIGINT')).toBeTruthy()
|
|
})
|
|
|
|
it('settled with whitespace-only output shows the dimmed placeholder', () => {
|
|
const view = render(<TerminalBlock command="true" output={' \n '} exitCode={0} />)
|
|
expect(view.getByText('无输出')).toBeTruthy()
|
|
expect(view.queryByRole('button', { name: '复制' })).toBeNull()
|
|
})
|
|
|
|
it('settled with absent output shows the placeholder', () => {
|
|
render(<TerminalBlock command="true" exitCode={0} />)
|
|
expect(screen.getByText('无输出')).toBeTruthy()
|
|
})
|
|
|
|
it('settled with an empty string shows the placeholder', () => {
|
|
render(<TerminalBlock command="true" output="" exitCode={0} />)
|
|
expect(screen.getByText('无输出')).toBeTruthy()
|
|
})
|
|
|
|
it('merges className onto the wrapper', () => {
|
|
const view = render(<TerminalBlock command="ls" className="x" output="a" />)
|
|
expect(view.container.firstElementChild?.classList.contains('x')).toBe(true)
|
|
expect(view.container.firstElementChild?.hasAttribute('data-running')).toBe(false)
|
|
})
|
|
|
|
it('drops the output text terminator instead of drawing a blank line', () => {
|
|
const view = render(<TerminalBlock command="ls" output={'a\nb\n'} />)
|
|
expect(outputLines(view.container)).toEqual(['a', 'b'])
|
|
})
|
|
|
|
it('keeps a genuinely blank final line when the output ends with two newlines', () => {
|
|
const view = render(<TerminalBlock command="ls" output={'a\nb\n\n'} />)
|
|
expect(outputLines(view.container)).toEqual(['a', 'b', ''])
|
|
})
|
|
|
|
it('renders ANSI runs as styled spans and plain text bare', () => {
|
|
const view = render(<TerminalBlock command="ls" output={`${ESC}[31mbad${ESC}[39m ok`} />)
|
|
const span = view.container.querySelector('span[style]')
|
|
expect(span?.textContent).toBe('bad')
|
|
expect(span?.getAttribute('style')).toContain('--dsw-alias-state-error-primary')
|
|
expect(outputLines(view.container)).toEqual(['bad ok'])
|
|
})
|
|
|
|
it('renders uncolored output with no span wrappers at all', () => {
|
|
const view = render(<TerminalBlock command="ls" output={'plain one\nplain two\n'} />)
|
|
expect(view.container.querySelectorAll('[class^="_line_"] span')).toHaveLength(0)
|
|
})
|
|
})
|
|
|
|
describe('TerminalBlock status pill', () => {
|
|
it('renders no pill for a clean exit', () => {
|
|
const view = render(<TerminalBlock command="true" output="a" exitCode={0} />)
|
|
expect(view.queryByText(/退出码|信号/u)).toBeNull()
|
|
})
|
|
|
|
it('renders no pill while the exit status is unknown', () => {
|
|
const view = render(<TerminalBlock command="ls" output="a" />)
|
|
expect(view.queryByText(/退出码|信号/u)).toBeNull()
|
|
})
|
|
|
|
it('renders the exit-code pill for a non-zero exit', () => {
|
|
render(<TerminalBlock command="false" output="a" exitCode={1} />)
|
|
expect(screen.getByText('退出码 1')).toBeTruthy()
|
|
})
|
|
|
|
it('renders the signal pill, which outranks the exit code', () => {
|
|
render(<TerminalBlock command="sleep 9" output="a" exitCode={0} signal="SIGKILL" />)
|
|
expect(screen.getByText('信号 SIGKILL')).toBeTruthy()
|
|
expect(screen.queryByText(/退出码/u)).toBeNull()
|
|
})
|
|
})
|
|
|
|
describe('TerminalBlock height cap', () => {
|
|
it('renders every line and no expand control under the cap', () => {
|
|
const view = render(<TerminalBlock command="ls" output={body(4)} maxLines={4} />)
|
|
expect(outputLines(view.container)).toHaveLength(4)
|
|
expect(view.container.querySelector('[aria-expanded]')).toBeNull()
|
|
})
|
|
|
|
it('does not count the output terminator against the cap', () => {
|
|
const view = render(<TerminalBlock command="ls" output={`${body(4)}\n`} maxLines={4} />)
|
|
expect(outputLines(view.container)).toHaveLength(4)
|
|
expect(view.container.querySelector('[aria-expanded]')).toBeNull()
|
|
})
|
|
|
|
it('slices head and tail over the cap and expands on click', () => {
|
|
const view = render(<TerminalBlock command="ls" output={body(10)} maxLines={4} />)
|
|
// maxLines 4: head = ceil(4/2) = 2, tail = 4 - 2 = 2, 6 hidden.
|
|
expect(outputLines(view.container)).toEqual(['line 1', 'line 2', 'line 9', 'line 10'])
|
|
const toggle = view.getByRole('button', { name: '展开其余 6 行输出' })
|
|
expect(toggle.getAttribute('aria-expanded')).toBe('false')
|
|
expect(toggle.textContent).toBe('… 其余 6 行')
|
|
|
|
fireEvent.click(toggle)
|
|
expect(outputLines(view.container)).toHaveLength(10)
|
|
const collapse = view.getByRole('button', { name: '收起输出' })
|
|
expect(collapse.getAttribute('aria-expanded')).toBe('true')
|
|
expect(collapse.textContent).toBe('收起')
|
|
|
|
fireEvent.click(collapse)
|
|
expect(outputLines(view.container)).toEqual(['line 1', 'line 2', 'line 9', 'line 10'])
|
|
})
|
|
|
|
it('renders the head slice alone when the cap leaves no tail', () => {
|
|
const view = render(<TerminalBlock command="ls" output={body(5)} maxLines={1} />)
|
|
expect(outputLines(view.container)).toEqual(['line 1'])
|
|
expect(view.getByRole('button', { name: '展开其余 4 行输出' })).toBeTruthy()
|
|
})
|
|
|
|
it('caps at the documented default when maxLines is absent', () => {
|
|
const view = render(<TerminalBlock command="ls" output={body(DEFAULT_TERMINAL_MAX_LINES + 1)} />)
|
|
expect(outputLines(view.container)).toHaveLength(DEFAULT_TERMINAL_MAX_LINES)
|
|
expect(view.getByRole('button', { name: '展开其余 1 行输出' })).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe('TerminalBlock copy', () => {
|
|
it('copies the raw output, never the prompt line or the pill', async () => {
|
|
vi.useFakeTimers()
|
|
const writeText = vi.fn().mockResolvedValue(undefined)
|
|
Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } })
|
|
const output = `${ESC}[31mbad${ESC}[39m\n`
|
|
render(<TerminalBlock command="make" cwd="/Users/me/app" output={output} exitCode={2} />)
|
|
fireEvent.click(screen.getByRole('button', { name: '复制' }))
|
|
// Escape codes, the newline terminator, and nothing of the chrome around them.
|
|
expect(writeText).toHaveBeenCalledWith(output)
|
|
await act(async () => {
|
|
await Promise.resolve()
|
|
})
|
|
expect(screen.getByRole('button', { name: '复制成功' })).toBeTruthy()
|
|
// While the ok label is showing, further clicks are no-ops.
|
|
fireEvent.click(screen.getByRole('button', { name: '复制成功' }))
|
|
expect(writeText).toHaveBeenCalledTimes(1)
|
|
await vi.advanceTimersByTimeAsync(1000)
|
|
expect(screen.getByRole('button', { name: '复制' })).toBeTruthy()
|
|
})
|
|
|
|
it('copies the whole output while the height cap hides its middle', async () => {
|
|
const writeText = vi.fn().mockResolvedValue(undefined)
|
|
Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } })
|
|
const output = `${body(10)}\n`
|
|
render(<TerminalBlock command="ls" output={output} maxLines={4} exitCode={0} />)
|
|
fireEvent.click(screen.getByRole('button', { name: '复制' }))
|
|
expect(writeText).toHaveBeenCalledWith(output)
|
|
expect(await screen.findByRole('button', { name: '复制成功' })).toBeTruthy()
|
|
})
|
|
|
|
it('does not claim success when the host refuses the write', async () => {
|
|
Object.defineProperty(navigator, 'clipboard', {
|
|
configurable: true,
|
|
value: { writeText: vi.fn().mockRejectedValue(new Error('denied')) },
|
|
})
|
|
render(<TerminalBlock command="ls" output="a" />)
|
|
fireEvent.click(screen.getByRole('button', { name: '复制' }))
|
|
await act(async () => {
|
|
await Promise.resolve()
|
|
})
|
|
expect(screen.getByRole('button', { name: '复制' })).toBeTruthy()
|
|
expect(screen.queryByRole('button', { name: '复制成功' })).toBeNull()
|
|
})
|
|
})
|
|
|
|
describe('writeClipboard', () => {
|
|
it('reports true after the async Clipboard API accepts the exact text', async () => {
|
|
const writeText = vi.fn().mockResolvedValue(undefined)
|
|
Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText } })
|
|
await expect(writeClipboard('payload')).resolves.toBe(true)
|
|
expect(writeText).toHaveBeenCalledWith('payload')
|
|
})
|
|
|
|
it('reports false when the Clipboard API rejects', async () => {
|
|
Object.defineProperty(navigator, 'clipboard', {
|
|
configurable: true,
|
|
value: { writeText: vi.fn().mockRejectedValue(new Error('denied')) },
|
|
})
|
|
await expect(writeClipboard('payload')).resolves.toBe(false)
|
|
})
|
|
|
|
it('selects a detached textarea for the execCommand fallback and removes it after', async () => {
|
|
Object.defineProperty(navigator, 'clipboard', { configurable: true, value: undefined })
|
|
let selected: string | undefined
|
|
const exec = vi.fn(() => {
|
|
selected = document.querySelector<HTMLTextAreaElement>('textarea[readonly]')?.value
|
|
return true
|
|
})
|
|
Object.defineProperty(document, 'execCommand', { configurable: true, value: exec })
|
|
await expect(writeClipboard('payload')).resolves.toBe(true)
|
|
expect(exec).toHaveBeenCalledWith('copy')
|
|
expect(selected).toBe('payload')
|
|
expect(document.querySelector('textarea')).toBeNull()
|
|
})
|
|
|
|
it('reports execCommand\'s own refusal verbatim', async () => {
|
|
Object.defineProperty(navigator, 'clipboard', { configurable: true, value: undefined })
|
|
Object.defineProperty(document, 'execCommand', { configurable: true, value: vi.fn(() => false) })
|
|
await expect(writeClipboard('payload')).resolves.toBe(false)
|
|
})
|
|
|
|
it('reports false and still removes the textarea when execCommand throws', async () => {
|
|
Object.defineProperty(navigator, 'clipboard', { configurable: true, value: undefined })
|
|
Object.defineProperty(document, 'execCommand', {
|
|
configurable: true,
|
|
value: () => {
|
|
throw new Error('denied')
|
|
},
|
|
})
|
|
await expect(writeClipboard('payload')).resolves.toBe(false)
|
|
expect(document.querySelector('textarea')).toBeNull()
|
|
})
|
|
|
|
it('reports false on a host with neither clipboard path', async () => {
|
|
Object.defineProperty(navigator, 'clipboard', { configurable: true, value: undefined })
|
|
Object.defineProperty(document, 'execCommand', { configurable: true, value: undefined })
|
|
await expect(writeClipboard('payload')).resolves.toBe(false)
|
|
})
|
|
|
|
it('reports false when navigator.clipboard exists without writeText', async () => {
|
|
Object.defineProperty(navigator, 'clipboard', { configurable: true, value: {} })
|
|
Object.defineProperty(document, 'execCommand', { configurable: true, value: undefined })
|
|
await expect(writeClipboard('payload')).resolves.toBe(false)
|
|
})
|
|
})
|