question-composer.spec.tsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. // @vitest-environment jsdom
  2. import { afterEach, describe, expect, it, vi } from 'vitest'
  3. import { cleanup, fireEvent, render, screen } from '@testing-library/react'
  4. import type {
  5. ConversationSnapshot, SessionId, SessionListState, WorkspaceListState,
  6. } from '@deepseek-ai/dsh-client-runtime/client'
  7. import { PendingWait } from '@deepseek-ai/dsh-client-runtime/client'
  8. import type { RpcReceipt } from '@deepseek-ai/dsh-client-connection/client'
  9. import { RpcId } from '@deepseek-ai/dsh-client-connection/client'
  10. import type { SnapshotSelectorHook } from '@deepseek-ai/dsh-client-ui-slots'
  11. import { PendingQuestion, type QuestionComposerProps } from '../src/client/contract/slots.ts'
  12. import { QuestionComposer, parseRecommendedLabel } from '../src/client/QuestionComposer.tsx'
  13. import { en, zh } from '../src/client/locales.ts'
  14. import { en as commonEn } from '@deepseek-ai/dsh-client-locale/src/locales/en.ts'
  15. import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts'
  16. afterEach(cleanup)
  17. const SID = 's1' as SessionId
  18. /** Seat stub over a dictionary pair mirroring the real lookup chain: package dictionary, then common vocabulary, then the key. */
  19. const seatOver = (dict: Record<string, string>, common: Record<string, string>): QuestionComposerProps['t'] =>
  20. (key => dict[key] ?? common[key] ?? key)
  21. /** Framework standard-kit stubs: the composer consumes only the locale seat;
  22. * the composed props type mandates delivery of the rest (framework hooks are
  23. * plain stubs per the client testing discipline). */
  24. const kit = {
  25. session: undefined,
  26. sessionId: SID,
  27. useSession: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<ConversationSnapshot>,
  28. useSessions: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<SessionListState>,
  29. useWorkspaces: (() => { throw new Error('unused') }) as unknown as SnapshotSelectorHook<WorkspaceListState>,
  30. useProjection: (() => undefined) as never,
  31. useInput: (() => { throw new Error('unused') }) as never,
  32. inputActions: { setDraft: () => { throw new Error('unused') }, submit: () => { throw new Error('unused') } } as never,
  33. // The seat's key domain is question ∪ common.
  34. t: seatOver(zh, commonZh),
  35. }
  36. const QUESTIONS = [
  37. {
  38. id: 'profile', header: '偏好', question: '选择候选人类型',
  39. detail: '按当前空缺岗位的优先级选择。',
  40. options: [
  41. { label: '工程落地型 (Recommended)', description: '优先工程交付。' },
  42. { label: '研究潜力型', description: '优先研究能力。' },
  43. ],
  44. },
  45. {
  46. id: 'detail', question: '补充你的要求',
  47. },
  48. {
  49. id: 'signals', question: '选择重要信号(可多选)', multiSelect: true,
  50. options: [{ label: '系统设计' }, { label: '代码质量' }, { label: '产品判断' }],
  51. },
  52. ]
  53. /** Carrier fixture: a real PendingWait over a scripted respond carrier. */
  54. function wait(rpcId = 'question-1', respond = vi.fn(() => Promise.resolve<RpcReceipt>({ accepted: true }))) {
  55. const carrier = new PendingWait(
  56. 'question', RpcId(rpcId), SID, { questions: QUESTIONS }, respond)
  57. return { carrier, respond }
  58. }
  59. /** The client-response envelope respond must have received for an answer batch. */
  60. function answeredEnvelope(rpcId: string, answers: object[]) {
  61. return {
  62. type: 'client-response', rpcId: RpcId(rpcId),
  63. result: { ok: true, value: { sessionId: SID, answer: { answers } } },
  64. }
  65. }
  66. describe('QuestionComposer', () => {
  67. it('collects single, custom, and multi-select answers before one batch submit', () => {
  68. const { carrier, respond } = wait()
  69. render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
  70. expect(screen.getByText('偏好')).toBeTruthy()
  71. expect(screen.getByText('1 / 3')).toBeTruthy()
  72. expect(screen.getByText('推荐')).toBeTruthy()
  73. expect(screen.getByText('工程落地型')).toBeTruthy()
  74. const detail = screen.getByText('按当前空缺岗位的优先级选择。')
  75. const scrollRegion = detail.closest('[data-question-scroll]')
  76. expect(scrollRegion).toBeTruthy()
  77. expect(scrollRegion?.contains(screen.getByRole('radio', { name: /工程落地型/ }))).toBe(true)
  78. expect(scrollRegion?.contains(screen.getByText('下一题').closest('button'))).toBe(false)
  79. fireEvent.keyDown(screen.getByRole('radio', { name: /工程落地型/ }), { key: 'Enter' })
  80. expect(respond).not.toHaveBeenCalled()
  81. fireEvent.click(screen.getByRole('radio', { name: /工程落地型/ }))
  82. expect(screen.getByText('2 / 3')).toBeTruthy()
  83. // detail is per-question: the second question carries none.
  84. expect(screen.queryByText('按当前空缺岗位的优先级选择。')).toBeNull()
  85. expect(screen.queryByRole('button', { name: '填写答案' })).toBeNull()
  86. const custom = screen.getByPlaceholderText('输入你的答案')
  87. fireEvent.change(custom, { target: { value: '要能独立排查线上问题' } })
  88. fireEvent.keyDown(custom, { key: 'Enter' })
  89. expect(screen.getByText('3 / 3')).toBeTruthy()
  90. // The model's question text renders verbatim — no marker filtering.
  91. expect(screen.getByText('选择重要信号(可多选)')).toBeTruthy()
  92. fireEvent.click(screen.getByRole('checkbox', { name: '系统设计' }))
  93. fireEvent.click(screen.getByRole('checkbox', { name: '系统设计' }))
  94. fireEvent.click(screen.getByRole('checkbox', { name: '系统设计' }))
  95. fireEvent.click(screen.getByRole('checkbox', { name: '代码质量' }))
  96. const multiCustom = screen.getByPlaceholderText('输入你的答案')
  97. fireEvent.change(multiCustom, { target: { value: '沟通能力' } })
  98. fireEvent.click(screen.getByRole('checkbox', { name: '产品判断' }))
  99. expect(screen.getByRole('checkbox', { name: '系统设计' }).getAttribute('aria-checked')).toBe('true')
  100. expect(screen.getByRole('checkbox', { name: '代码质量' }).getAttribute('aria-checked')).toBe('true')
  101. expect((multiCustom as HTMLInputElement).value).toBe('沟通能力')
  102. fireEvent.keyDown(multiCustom, { key: 'Enter' })
  103. // The domain face encoded the whole batch into one carrier envelope.
  104. expect(respond).toHaveBeenCalledWith(answeredEnvelope('question-1', [
  105. { id: 'profile', selected: ['工程落地型 (Recommended)'] },
  106. { id: 'detail', selected: [], custom: '要能独立排查线上问题' },
  107. { id: 'signals', selected: ['系统设计', '代码质量', '产品判断'], custom: '沟通能力' },
  108. ]))
  109. expect(screen.getByRole<HTMLButtonElement>('button', { name: '正在提交…' }).disabled).toBe(true)
  110. })
  111. it('renders plan detail through the shared assistant Markdown primitive', () => {
  112. const carrier = new PendingWait(
  113. 'question',
  114. RpcId('markdown-plan'),
  115. SID,
  116. {
  117. questions: [{
  118. id: 'plan',
  119. question: '批准这个计划吗?',
  120. detail: '# 实施计划\n\n- **先验证**现状\n- 修改 `QuestionComposer`',
  121. options: [{ label: '批准' }],
  122. }],
  123. },
  124. vi.fn(),
  125. )
  126. const view = render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
  127. expect(screen.getByRole('heading', { level: 1, name: '实施计划' })).toBeTruthy()
  128. expect(view.container.querySelector('strong')?.textContent).toBe('先验证')
  129. expect(view.container.querySelector('code')?.textContent).toBe('QuestionComposer')
  130. expect(view.container.querySelectorAll('li')).toHaveLength(2)
  131. })
  132. it('skips individual questions without discarding earlier answers', () => {
  133. const { carrier, respond } = wait()
  134. render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
  135. expect((screen.getByText('下一题').closest('button') as HTMLButtonElement).disabled).toBe(true)
  136. fireEvent.click(screen.getByRole('radio', { name: '研究潜力型' }))
  137. expect(screen.getByText('2 / 3')).toBeTruthy()
  138. fireEvent.click(screen.getByRole('button', { name: '跳过本题' }))
  139. expect(screen.getByText('3 / 3')).toBeTruthy()
  140. fireEvent.click(screen.getByRole('button', { name: '跳过本题' }))
  141. expect(respond).toHaveBeenCalledWith(answeredEnvelope('question-1', [
  142. { id: 'profile', selected: ['研究潜力型'] },
  143. { id: 'detail', selected: [] },
  144. { id: 'signals', selected: [] },
  145. ]))
  146. })
  147. it('keeps IME Enter inside the custom input until composition finishes', () => {
  148. const { carrier, respond } = wait()
  149. render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
  150. fireEvent.click(screen.getByRole('radio', { name: '研究潜力型' }))
  151. const custom = screen.getByPlaceholderText('输入你的答案')
  152. fireEvent.change(custom, { target: { value: '中文输入' } })
  153. fireEvent.keyDown(custom, { key: 'Enter', isComposing: true })
  154. expect(screen.getByText('2 / 3')).toBeTruthy()
  155. expect(respond).not.toHaveBeenCalled()
  156. fireEvent.keyDown(custom, { key: 'Enter', keyCode: 229 })
  157. expect(screen.getByText('2 / 3')).toBeTruthy()
  158. expect(respond).not.toHaveBeenCalled()
  159. fireEvent.keyDown(custom, { key: 'Enter' })
  160. expect(screen.getByText('3 / 3')).toBeTruthy()
  161. })
  162. it('shows the inline custom input, reports missing answers, and supports pager navigation', () => {
  163. const { carrier, respond } = wait()
  164. render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
  165. expect(screen.getByPlaceholderText('输入你的答案')).toBeTruthy()
  166. fireEvent.click(screen.getByRole('radio', { name: '工程落地型' }))
  167. const emptyCustom = screen.getByPlaceholderText('输入你的答案')
  168. fireEvent.keyDown(emptyCustom, { key: 'Enter', shiftKey: true })
  169. expect(screen.getByText('2 / 3')).toBeTruthy()
  170. fireEvent.keyDown(emptyCustom, { key: 'Enter' })
  171. expect(screen.getByText('请选择一个选项或填写自定义答案。')).toBeTruthy()
  172. fireEvent.click(screen.getByLabelText('下一题'))
  173. fireEvent.click(screen.getByRole('checkbox', { name: '产品判断' }))
  174. fireEvent.click(screen.getByRole('button', { name: '提交' }))
  175. expect(screen.getByText('请先完成这道问题。')).toBeTruthy()
  176. expect(screen.getByText('2 / 3')).toBeTruthy()
  177. fireEvent.click(screen.getByLabelText('上一题'))
  178. expect(screen.getByText('1 / 3')).toBeTruthy()
  179. expect(respond).not.toHaveBeenCalled()
  180. })
  181. it('surfaces cancellation failures: rejected receipt text and raw transport reasons', async () => {
  182. const respond = vi.fn()
  183. .mockResolvedValueOnce({ accepted: false, reason: 'bad-response' })
  184. .mockRejectedValueOnce(new Error('第二次取消失败'))
  185. const { carrier } = wait('question-1', respond)
  186. render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} />)
  187. // Receipt rejection surfaces through the domain face's thrown message.
  188. fireEvent.click(screen.getByRole('button', { name: '放弃整组问题' }))
  189. expect(await screen.findByText('question cancellation rejected: bad-response')).toBeTruthy()
  190. expect(screen.getByRole<HTMLButtonElement>('button', { name: '跳过本题' }).disabled).toBe(false)
  191. fireEvent.click(screen.getByRole('button', { name: '放弃整组问题' }))
  192. expect(await screen.findByText('第二次取消失败')).toBeTruthy()
  193. })
  194. it('surfaces transport rejection and resets local drafts for a different request', async () => {
  195. const respond = vi.fn()
  196. .mockRejectedValueOnce(new Error('网络中断'))
  197. .mockRejectedValueOnce('字符串错误')
  198. const first = wait('first', respond)
  199. const view = render(<QuestionComposer matched={first.carrier} interactions={[first.carrier]} {...kit} />)
  200. fireEvent.click(screen.getByRole('radio', { name: /研究潜力型/ }))
  201. expect(screen.getByText('2 / 3')).toBeTruthy()
  202. const second = wait('second', respond)
  203. view.rerender(<QuestionComposer matched={second.carrier} interactions={[second.carrier]} {...kit} />)
  204. expect(screen.getByRole('radio', { name: /研究潜力型/ }).getAttribute('aria-checked')).toBe('false')
  205. fireEvent.click(screen.getByRole('radio', { name: /工程落地型/ }))
  206. const custom = screen.getByPlaceholderText('输入你的答案')
  207. fireEvent.change(custom, { target: { value: 'x' } })
  208. fireEvent.keyDown(custom, { key: 'Enter' })
  209. fireEvent.click(screen.getByRole('checkbox', { name: '系统设计' }))
  210. fireEvent.click(screen.getByRole('button', { name: '提交' }))
  211. expect(respond).toHaveBeenNthCalledWith(1, answeredEnvelope('second', [
  212. { id: 'profile', selected: ['工程落地型 (Recommended)'] },
  213. { id: 'detail', selected: [], custom: 'x' },
  214. { id: 'signals', selected: ['系统设计'] },
  215. ]))
  216. expect(await screen.findByText('网络中断')).toBeTruthy()
  217. expect(screen.getByRole<HTMLButtonElement>('button', { name: '提交' }).disabled).toBe(false)
  218. fireEvent.click(screen.getByRole('button', { name: '提交' }))
  219. expect(await screen.findByText('字符串错误')).toBeTruthy()
  220. })
  221. it('renders chrome copy through the English dictionary', () => {
  222. const respond = vi.fn(() => Promise.resolve<RpcReceipt>({ accepted: true }))
  223. const carrier = new PendingWait(
  224. 'question', RpcId('solo'), SID, { questions: [{ id: 'detail', question: '补充你的要求' }] }, respond)
  225. render(<QuestionComposer matched={carrier} interactions={[carrier]} {...kit} t={seatOver(en, commonEn)} />)
  226. expect(screen.getByLabelText('Dismiss all questions')).toBeTruthy()
  227. expect(screen.getByRole('button', { name: 'Skip this question' })).toBeTruthy()
  228. expect(screen.getByPlaceholderText('Type your answer')).toBeTruthy()
  229. })
  230. it('same-key carrier replacement (baseline replay) keeps drafts', () => {
  231. const first = wait('same-id')
  232. const view = render(<QuestionComposer matched={first.carrier} interactions={[first.carrier]} {...kit} />)
  233. fireEvent.click(screen.getByRole('radio', { name: /研究潜力型/ }))
  234. expect(screen.getByText('2 / 3')).toBeTruthy()
  235. // Replay mints a NEW carrier for the same request; same key = no remount.
  236. const replayed = wait('same-id')
  237. view.rerender(<QuestionComposer matched={replayed.carrier} interactions={[replayed.carrier]} {...kit} />)
  238. expect(screen.getByText('2 / 3')).toBeTruthy()
  239. })
  240. })
  241. describe('PendingQuestion domain face', () => {
  242. it('encodes the answer batch into the ok envelope and throws on a rejected receipt', async () => {
  243. const respond = vi.fn()
  244. .mockResolvedValueOnce({ accepted: true })
  245. .mockResolvedValueOnce({ accepted: false, reason: 'not-pending' })
  246. const question = new PendingQuestion(wait('rq', respond).carrier)
  247. const batch = { answers: [{ id: 'mode', selected: ['Fast'] }] }
  248. await expect(question.answer(batch)).resolves.toBeUndefined()
  249. expect(respond).toHaveBeenCalledWith(answeredEnvelope('rq', batch.answers))
  250. await expect(question.answer(batch)).rejects.toThrow(/question response rejected: not-pending/)
  251. })
  252. it('encodes cancellation as the cancelled error envelope and throws on a rejected receipt', async () => {
  253. const respond = vi.fn()
  254. .mockResolvedValueOnce({ accepted: true })
  255. .mockResolvedValueOnce({ accepted: false, reason: 'bad-response' })
  256. const question = new PendingQuestion(wait('rc', respond).carrier)
  257. await expect(question.cancel()).resolves.toBeUndefined()
  258. expect(respond).toHaveBeenCalledWith({
  259. type: 'client-response', rpcId: RpcId('rc'),
  260. result: {
  261. ok: false,
  262. error: { code: 'cancelled', message: 'the user closed this question request', details: {} },
  263. },
  264. })
  265. await expect(question.cancel()).rejects.toThrow(/question cancellation rejected: bad-response/)
  266. })
  267. it('forwards key and questions from the carrier', () => {
  268. const question = new PendingQuestion(wait('rk').carrier)
  269. expect(question.key).toBe('q:rk')
  270. expect(question.questions).toBe(wait('rk').carrier.payload.questions)
  271. })
  272. })
  273. describe('parseRecommendedLabel', () => {
  274. it('recognizes English and Chinese suffixes without changing ordinary labels', () => {
  275. expect(parseRecommendedLabel('Fast (Recommended)')).toEqual({ label: 'Fast', recommended: true })
  276. expect(parseRecommendedLabel('稳妥(推荐)')).toEqual({ label: '稳妥', recommended: true })
  277. expect(parseRecommendedLabel('稳妥 (推荐)')).toEqual({ label: '稳妥', recommended: true })
  278. expect(parseRecommendedLabel('Plain')).toEqual({ label: 'Plain', recommended: false })
  279. })
  280. })