rows.spec.tsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. // @vitest-environment jsdom
  2. import { afterEach, describe, expect, it, vi } from 'vitest'
  3. import { act, cleanup, createEvent, fireEvent, render, screen } from '@testing-library/react'
  4. import type { SessionId, WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
  5. import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime'
  6. import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts'
  7. import type { RowDragProps } from '../src/client/rows/Rows.tsx'
  8. import { ProjectRowItem, SearchResultItem, SessionNodeItem } from '../src/client/rows/Rows.tsx'
  9. import type { GroupNode, SearchResultNode, SessionNode } from '../src/client/tree.ts'
  10. import { zh } from '../src/client/locales.ts'
  11. afterEach(cleanup)
  12. // Standard locale seat stub mirroring the real ns → common → key chain (zh default).
  13. const t = makeTranslate(zh, commonZh) as never
  14. const sid = (id: string) => id as SessionId
  15. const wid = (id: string) => id as WorkspaceId
  16. /** Half detection reads the row rect; jsdom rects are all-zero by default. */
  17. function stubRect(row: HTMLElement): void {
  18. row.getBoundingClientRect = () => ({
  19. top: 100, bottom: 134, left: 0, right: 200, width: 200, height: 34,
  20. x: 0, y: 100, toJSON: () => ({}),
  21. })
  22. }
  23. function dragProps(overrides: Partial<RowDragProps> = {}): RowDragProps {
  24. return {
  25. start: vi.fn(), active: false, marker: null,
  26. hover: vi.fn(), drop: vi.fn(), end: vi.fn(),
  27. ...overrides,
  28. }
  29. }
  30. /** Install the async browser clipboard and restore its prior host shape. */
  31. function installClipboard(writeText: (text: string) => Promise<void>): () => void {
  32. const prior = Object.getOwnPropertyDescriptor(navigator, 'clipboard')
  33. Object.defineProperty(navigator, 'clipboard', {
  34. configurable: true,
  35. value: { writeText },
  36. })
  37. return () => {
  38. if (prior === undefined) Reflect.deleteProperty(navigator, 'clipboard')
  39. else Object.defineProperty(navigator, 'clipboard', prior)
  40. }
  41. }
  42. const dataTransfer = { effectAllowed: '', dropEffect: '' }
  43. /** jsdom lacks DragEvent — the fireEvent fallback drops clientY, so pin it on the built event. */
  44. function fireDrag(row: HTMLElement, kind: 'dragOver' | 'drop', clientY: number): void {
  45. const event = kind === 'dragOver' ? createEvent.dragOver(row) : createEvent.drop(row)
  46. Object.defineProperty(event, 'clientY', { value: clientY })
  47. Object.defineProperty(event, 'dataTransfer', { value: { ...dataTransfer } })
  48. fireEvent(row, event)
  49. }
  50. describe('workspace browser rows', () => {
  51. it('renders a selected content-search row and opens only its session', () => {
  52. const onOpen = vi.fn()
  53. const result: SearchResultNode = {
  54. id: sid('result'),
  55. title: 'Result title',
  56. workspace: 'Workspace context',
  57. running: true,
  58. snippet: 'matching message excerpt',
  59. }
  60. render(<SearchResultItem result={result} currentId={result.id} onOpen={onOpen} t={t} />)
  61. const row = screen.getByRole('treeitem')
  62. expect(row.getAttribute('aria-selected')).toBe('true')
  63. expect(screen.getByText('Workspace context')).toBeTruthy()
  64. expect(screen.getByText('matching message excerpt')).toBeTruthy()
  65. expect(row.querySelector('[data-state="ongoing"]')).toBeTruthy()
  66. expect(screen.getByText('进行中')).toBeTruthy()
  67. expect(row.hasAttribute('draggable')).toBe(false)
  68. fireEvent.click(row)
  69. expect(onOpen).toHaveBeenCalledWith(result.id)
  70. })
  71. it.each([
  72. ['approval', '等待审批'],
  73. ['plan-review', '计划待审'],
  74. ['question', '等待回答'],
  75. ] as const)('shows %s ahead of running in search results', (pendingInteraction, label) => {
  76. const result: SearchResultNode = {
  77. id: sid(pendingInteraction), title: 'Needs input', workspace: 'Project',
  78. pendingInteraction, running: true,
  79. }
  80. render(<SearchResultItem result={result} currentId={undefined} onOpen={vi.fn()} t={t} />)
  81. const row = screen.getByRole('treeitem')
  82. expect(row.querySelector('[data-state="warning"]')).toBeTruthy()
  83. expect(row.querySelector('[data-state="ongoing"]')).toBeNull()
  84. expect(screen.getByText(label)).toBeTruthy()
  85. })
  86. it('renders an active Workspace and keeps its create action separate from toggling', () => {
  87. const onToggle = vi.fn()
  88. const onCreate = vi.fn()
  89. const group: GroupNode = {
  90. key: 'project', workspaceId: wid('project'), cwd: '/projects/project', createdAt: 0, label: 'Project',
  91. sessionCount: 1, expanded: true, containsCurrent: true, sessions: [],
  92. }
  93. render(<ProjectRowItem group={group} onToggle={onToggle} onCreate={onCreate} t={t} />)
  94. expect(screen.getByText('1 个会话')).toBeTruthy()
  95. expect(screen.getByRole('treeitem').getAttribute('aria-expanded')).toBe('true')
  96. fireEvent.click(screen.getByRole('button', { name: '在“Project”中新建会话' }))
  97. expect(onCreate).toHaveBeenCalledOnce()
  98. expect(onToggle).not.toHaveBeenCalled()
  99. fireEvent.click(screen.getByText('Project'))
  100. expect(onToggle).toHaveBeenCalledOnce()
  101. })
  102. it('renders and opens a selected running Session row', () => {
  103. const node: SessionNode = {
  104. id: sid('session'), title: 'Session', blank: false, running: true, updatedAt: 0,
  105. }
  106. const onOpen = vi.fn()
  107. render(
  108. <SessionNodeItem node={node} currentId={node.id} now={0} onOpen={onOpen}
  109. onRename={vi.fn()} onFork={vi.fn()} onArchive={vi.fn()} t={t} />,
  110. )
  111. const row = screen.getByRole('treeitem')
  112. expect(row.getAttribute('aria-selected')).toBe('true')
  113. expect(row.hasAttribute('aria-expanded')).toBe(false)
  114. expect(screen.queryByRole('button', { name: /展开|收起/ })).toBeNull()
  115. fireEvent.click(row)
  116. expect(onOpen).toHaveBeenCalledWith(node.id)
  117. })
  118. it('workspace row menu opens on the ellipsis, renames, and shows the danger delete row', () => {
  119. const onRename = vi.fn()
  120. const onDelete = vi.fn()
  121. const onToggle = vi.fn()
  122. const group: GroupNode = {
  123. key: 'project', workspaceId: wid('project'), cwd: '/projects/project', createdAt: 0, label: 'Project',
  124. sessionCount: 0, expanded: false, containsCurrent: false, sessions: [],
  125. }
  126. render(<ProjectRowItem
  127. group={group} onToggle={onToggle} onCreate={vi.fn()}
  128. actions={{ rename: onRename, delete: onDelete }} t={t}
  129. />)
  130. fireEvent.click(screen.getByRole('button', { name: '工作区“Project”的操作' }))
  131. // Opening the menu neither toggles the group nor renames yet.
  132. expect(onToggle).not.toHaveBeenCalled()
  133. expect(screen.getByRole('menuitem', { name: '删除工作区' }).className).toMatch(/danger/)
  134. fireEvent.click(screen.getByRole('menuitem', { name: '重命名' }))
  135. expect(onRename).toHaveBeenCalledOnce()
  136. expect(screen.queryByRole('menu')).toBeNull()
  137. fireEvent.click(screen.getByRole('button', { name: '工作区“Project”的操作' }))
  138. fireEvent.click(screen.getByRole('menuitem', { name: '删除工作区' }))
  139. expect(screen.queryByRole('menu')).toBeNull()
  140. expect(onRename).toHaveBeenCalledOnce()
  141. expect(onDelete).toHaveBeenCalledOnce()
  142. // Escape closes without selecting (Menu onClose path).
  143. fireEvent.click(screen.getByRole('button', { name: '工作区“Project”的操作' }))
  144. fireEvent.keyDown(document, { key: 'Escape' })
  145. expect(screen.queryByRole('menu')).toBeNull()
  146. })
  147. it('workspace hover card shows its details and copies the full directory path', async () => {
  148. vi.useFakeTimers()
  149. const writeText = vi.fn(async () => {})
  150. const restoreClipboard = installClipboard(writeText)
  151. try {
  152. const group: GroupNode = {
  153. key: 'project', workspaceId: wid('project'), cwd: '/projects/project', createdAt: 0, label: 'Project',
  154. sessionCount: 0, expanded: false, containsCurrent: false, sessions: [],
  155. }
  156. render(<ProjectRowItem group={group} onToggle={vi.fn()} onCreate={vi.fn()} t={t} />)
  157. fireEvent.pointerEnter(screen.getByRole('treeitem').parentElement as HTMLElement)
  158. act(() => { vi.advanceTimersByTime(500) })
  159. // Card body: full title + cwd + absolute creation time.
  160. expect(screen.getAllByText('Project')).toHaveLength(2)
  161. expect(screen.getByText('/projects/project')).toBeTruthy()
  162. expect(screen.getByText(/^创建于 \d+年\d+月\d+日 /)).toBeTruthy()
  163. await act(async () => { fireEvent.click(screen.getByRole('button', { name: '复制: /projects/project' })) })
  164. expect(writeText).toHaveBeenCalledWith('/projects/project')
  165. expect(screen.getByRole('status').textContent).toBe('已复制')
  166. } finally {
  167. restoreClipboard()
  168. vi.useRealTimers()
  169. }
  170. })
  171. it('ungrouped bucket renders no workspace menu', () => {
  172. const group: GroupNode = {
  173. key: '', workspaceId: undefined, cwd: undefined, createdAt: undefined, label: 'Ungrouped',
  174. sessionCount: 0, expanded: false, containsCurrent: false, sessions: [],
  175. }
  176. render(<ProjectRowItem group={group} onToggle={vi.fn()} onCreate={vi.fn()} t={t} />)
  177. expect(screen.queryByRole('button', { name: /工作区/ })).toBeNull()
  178. })
  179. it('blank New Session rows carry no menu, no time label, and no hover-card time', () => {
  180. vi.useFakeTimers()
  181. try {
  182. const node: SessionNode = {
  183. id: sid('s-blank'), title: 'ignored', blank: true, running: false, updatedAt: 0,
  184. }
  185. render(<SessionNodeItem node={node} currentId={node.id} now={0} onOpen={vi.fn()}
  186. onRename={vi.fn()} onFork={vi.fn()} onArchive={vi.fn()} t={t} />)
  187. // The placeholder has no content yet: no row verbs, no "now" stamp.
  188. expect(screen.queryByRole('button', { name: /会话.*的操作/ })).toBeNull()
  189. expect(screen.queryByText('刚刚')).toBeNull()
  190. // The hover card keeps title + status but drops the timestamp line.
  191. const wrapper = screen.getByRole('treeitem').parentElement as HTMLElement
  192. fireEvent.pointerEnter(wrapper)
  193. act(() => { vi.advanceTimersByTime(500) })
  194. expect(screen.getAllByText('新会话').length).toBeGreaterThanOrEqual(2)
  195. expect(screen.getByText('空闲')).toBeTruthy()
  196. expect(screen.queryByText('刚刚')).toBeNull()
  197. expect(screen.getByText('空闲').closest('[role="button"]')).toBeNull()
  198. } finally {
  199. vi.useRealTimers()
  200. }
  201. })
  202. it('session row menu opens without opening the session and dispatches rename, fork, and archive', () => {
  203. const onOpen = vi.fn()
  204. const onRename = vi.fn()
  205. const onFork = vi.fn()
  206. const onArchive = vi.fn()
  207. const node: SessionNode = {
  208. id: sid('s1'), title: 'One', blank: false, running: false, updatedAt: 0,
  209. }
  210. render(<SessionNodeItem node={node} currentId={undefined} now={0} onOpen={onOpen}
  211. onRename={onRename} onFork={onFork} onArchive={onArchive} t={t} />)
  212. fireEvent.click(screen.getByRole('button', { name: '会话“One”的操作' }))
  213. expect(onOpen).not.toHaveBeenCalled()
  214. // Archive is not destructive (log and accounting slot remain): no danger styling.
  215. expect(screen.getByRole('menuitem', { name: '归档会话' }).className).not.toMatch(/danger/)
  216. // Rename dispatches with the current display title (dialog prefill).
  217. fireEvent.click(screen.getByRole('menuitem', { name: '重命名' }))
  218. expect(screen.queryByRole('menu')).toBeNull()
  219. expect(onRename).toHaveBeenCalledWith(node.id, 'One')
  220. expect(onOpen).not.toHaveBeenCalled()
  221. fireEvent.click(screen.getByRole('button', { name: '会话“One”的操作' }))
  222. fireEvent.click(screen.getByRole('menuitem', { name: '分叉会话' }))
  223. expect(onFork).toHaveBeenCalledWith(node.id)
  224. // Archive dispatches without opening the session.
  225. fireEvent.click(screen.getByRole('button', { name: '会话“One”的操作' }))
  226. fireEvent.click(screen.getByRole('menuitem', { name: '归档会话' }))
  227. expect(onArchive).toHaveBeenCalledWith(node.id)
  228. expect(onRename).toHaveBeenCalledOnce()
  229. expect(onOpen).not.toHaveBeenCalled()
  230. // Escape closes without selecting (Menu onClose path).
  231. fireEvent.click(screen.getByRole('button', { name: '会话“One”的操作' }))
  232. fireEvent.keyDown(document, { key: 'Escape' })
  233. expect(screen.queryByRole('menu')).toBeNull()
  234. })
  235. it('shows the hover card after the dwell and suppresses it while the row menu is open', () => {
  236. vi.useFakeTimers()
  237. try {
  238. const node: SessionNode = {
  239. id: sid('s1'), title: 'Hovered', blank: false, running: true, updatedAt: 0,
  240. }
  241. render(<SessionNodeItem node={node} currentId={undefined} now={60_000} onOpen={vi.fn()}
  242. onRename={vi.fn()} onFork={vi.fn()} onArchive={vi.fn()} t={t} />)
  243. const wrapper = screen.getByRole('treeitem').parentElement as HTMLElement
  244. fireEvent.pointerEnter(wrapper)
  245. act(() => { vi.advanceTimersByTime(500) })
  246. // Card body: full title + relative time + running status.
  247. expect(screen.getAllByText('Hovered')).toHaveLength(2)
  248. expect(screen.getByText('1分钟前')).toBeTruthy()
  249. expect(screen.getAllByText('进行中')).toHaveLength(2)
  250. fireEvent.pointerLeave(wrapper)
  251. // Menu open (disabled=true) suppresses the card for the same hover.
  252. fireEvent.click(screen.getByRole('button', { name: '会话“Hovered”的操作' }))
  253. fireEvent.pointerEnter(wrapper)
  254. act(() => { vi.advanceTimersByTime(1000) })
  255. expect(screen.queryByText('1分钟前')).toBeNull()
  256. } finally {
  257. vi.useRealTimers()
  258. }
  259. })
  260. it.each([
  261. ['approval', '等待审批'],
  262. ['plan-review', '计划待审'],
  263. ['question', '等待回答'],
  264. ] as const)('shows %s as warning ahead of the running state', (pendingInteraction, label) => {
  265. vi.useFakeTimers()
  266. try {
  267. const node: SessionNode = {
  268. id: sid(pendingInteraction), title: 'Needs input', blank: false,
  269. pendingInteraction, running: true, updatedAt: 0,
  270. }
  271. const view = render(<SessionNodeItem node={node} currentId={undefined} now={0} onOpen={vi.fn()}
  272. onRename={vi.fn()} onFork={vi.fn()} onArchive={vi.fn()} t={t} />)
  273. const row = screen.getByRole('treeitem')
  274. expect(row.querySelector('[data-state="warning"]')).toBeTruthy()
  275. expect(row.querySelector('[data-state="ongoing"]')).toBeNull()
  276. expect(screen.getByText(label)).toBeTruthy()
  277. view.rerender(<SessionNodeItem node={{ ...node, running: false }} currentId={undefined} now={0}
  278. onOpen={vi.fn()} onRename={vi.fn()} onFork={vi.fn()} onArchive={vi.fn()} t={t} />)
  279. expect(screen.getByRole('treeitem').querySelector('[data-state="warning"]')).toBeTruthy()
  280. fireEvent.pointerEnter(screen.getByRole('treeitem').parentElement as HTMLElement)
  281. act(() => { vi.advanceTimersByTime(500) })
  282. expect(screen.getAllByText(label)).toHaveLength(2)
  283. expect(document.querySelectorAll('[data-state="warning"]')).toHaveLength(2)
  284. } finally {
  285. vi.useRealTimers()
  286. }
  287. })
  288. it('idle hover card shows the Idle status line', () => {
  289. vi.useFakeTimers()
  290. try {
  291. const node: SessionNode = {
  292. id: sid('s1'), title: 'Quiet', blank: false, running: false, updatedAt: 0,
  293. }
  294. render(<SessionNodeItem node={node} currentId={undefined} now={0} onOpen={vi.fn()}
  295. onRename={vi.fn()} onFork={vi.fn()} onArchive={vi.fn()} t={t} />)
  296. fireEvent.pointerEnter(screen.getByRole('treeitem').parentElement as HTMLElement)
  297. act(() => { vi.advanceTimersByTime(500) })
  298. expect(screen.getByText('空闲')).toBeTruthy()
  299. expect(screen.getAllByText('刚刚')).toHaveLength(2)
  300. } finally {
  301. vi.useRealTimers()
  302. }
  303. })
  304. it('draggable row wires start/end and gates hover/drop on an active same-group drag', () => {
  305. const node: SessionNode = {
  306. id: sid('s1'), title: 'Drag me', blank: false, running: false, updatedAt: 0,
  307. }
  308. const inactive = dragProps()
  309. const { rerender } = render(
  310. <SessionNodeItem node={node} currentId={undefined} now={0} onOpen={vi.fn()}
  311. onRename={vi.fn()} onFork={vi.fn()} onArchive={vi.fn()} drag={inactive} t={t} />,
  312. )
  313. const row = screen.getByRole('treeitem')
  314. stubRect(row)
  315. expect(row.getAttribute('draggable')).toBe('true')
  316. fireEvent.dragStart(row, { dataTransfer })
  317. expect(inactive.start).toHaveBeenCalledOnce()
  318. // Inactive drag: hover and drop are rejected.
  319. fireEvent.dragOver(row, { dataTransfer })
  320. fireEvent.drop(row, { dataTransfer })
  321. expect(inactive.hover).not.toHaveBeenCalled()
  322. expect(inactive.drop).not.toHaveBeenCalled()
  323. fireEvent.dragEnd(row)
  324. expect(inactive.end).toHaveBeenCalledOnce()
  325. const active = dragProps({ active: true, marker: 'before' })
  326. rerender(
  327. <SessionNodeItem node={node} currentId={undefined} now={0} onOpen={vi.fn()}
  328. onRename={vi.fn()} onFork={vi.fn()} onArchive={vi.fn()} drag={active} t={t} />,
  329. )
  330. stubRect(screen.getByRole('treeitem'))
  331. // Top half hovers/drops 'before'; bottom half 'after' (row mid = 117).
  332. fireDrag(screen.getByRole('treeitem'), 'dragOver', 105)
  333. expect(active.hover).toHaveBeenCalledWith('before')
  334. fireDrag(screen.getByRole('treeitem'), 'dragOver', 130)
  335. expect(active.hover).toHaveBeenCalledWith('after')
  336. fireDrag(screen.getByRole('treeitem'), 'drop', 130)
  337. expect(active.drop).toHaveBeenCalledWith('after')
  338. const after = dragProps({ active: true, marker: 'after' })
  339. rerender(
  340. <SessionNodeItem node={node} currentId={undefined} now={0} onOpen={vi.fn()}
  341. onRename={vi.fn()} onFork={vi.fn()} onArchive={vi.fn()} drag={after} t={t} />,
  342. )
  343. expect(screen.getByRole('treeitem').className).toMatch(/dropAfter/)
  344. })
  345. })