queue-actions.e2e.ts 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. // Keyless browser coverage for pending queue actions through the shipped Web
  2. // composition and real HTTP/SSE wire. Replay overrides park consecutive turns
  3. // so the page can edit and remove exact occurrences, then stop the active turn
  4. // while proving the preserved Queue advances in FIFO order.
  5. import { existsSync } from 'node:fs'
  6. import { mkdtemp, readFile, rm, writeFile } from 'node:fs/promises'
  7. import { tmpdir } from 'node:os'
  8. import { fileURLToPath } from 'node:url'
  9. import { join } from 'node:path'
  10. import type { Browser, Page } from 'playwright'
  11. import { chromium } from 'playwright'
  12. import { afterEach, describe, expect, it, onTestFailed } from 'vitest'
  13. import { deriveReplayScript, parseSessionLog, type ReplayEntry } from '@deepseek-ai/dsh-llm-replay'
  14. import type { SessionEvent } from '@deepseek-ai/dsh-session'
  15. import {
  16. assertFixtureInventory, captureStableAria, compareOrRefreshGolden,
  17. launchWebScaffold, watchConsole, webSnapshotMode, type WebScaffold,
  18. } from './scaffold.ts'
  19. import { connectFreshWorkspace, newEnglishPage, saveFailureShot } from './support.ts'
  20. const SNAPSHOT_DIR = fileURLToPath(new URL('./snapshots/queue-actions', import.meta.url))
  21. const FIXTURE = fileURLToPath(new URL('./snapshots/live-interactions/session.jsonl', import.meta.url))
  22. const COLLAPSED_EXPECTED = join(SNAPSHOT_DIR, 'collapsed.expected.md')
  23. const EDITING_EXPECTED = join(SNAPSHOT_DIR, 'editing.expected.md')
  24. const PRESERVED_EXPECTED = join(SNAPSHOT_DIR, 'preserved.expected.md')
  25. const UI_EXPECTED = join(SNAPSHOT_DIR, 'ui.expected.md')
  26. const MODE = webSnapshotMode()
  27. const ACTIVE_PROMPT = 'Reply with a one-sentence description of event sourcing, then stop.'
  28. const REMOVE = 'Queue item to remove'
  29. const EDIT = 'Queue item to edit'
  30. const EDITED = 'Edited queue item'
  31. const TAIL = 'Queue item preserved after stop'
  32. /** Durable turn-end classifications observed by the scenario. */
  33. function turnEndReasons(events: readonly SessionEvent[]): string[] {
  34. return events.flatMap(event => event.type === 'turn/end' ? [event.data.reason.kind] : [])
  35. }
  36. describe('web e2e: queue row actions', () => {
  37. let scaffold: WebScaffold | undefined
  38. let browser: Browser | undefined
  39. let page: Page
  40. let overrideDir: string | undefined
  41. afterEach(async () => {
  42. const failures: unknown[] = []
  43. await browser?.close().catch((error: unknown) => failures.push(error))
  44. browser = undefined
  45. const closing = scaffold
  46. scaffold = undefined
  47. await closing?.close().catch((error: unknown) => failures.push(error))
  48. if (overrideDir !== undefined) {
  49. await rm(overrideDir, { recursive: true, force: true })
  50. .catch((error: unknown) => failures.push(error))
  51. }
  52. overrideDir = undefined
  53. if (failures.length === 1) throw failures[0]
  54. if (failures.length > 1) throw new AggregateError(failures, 'queue-actions teardown failed')
  55. })
  56. it.skipIf(MODE === 'record')('edits and removes exact occurrences and preserves Queue across stop', async () => {
  57. overrideDir = await mkdtemp(join(tmpdir(), 'dsh-web-queue-actions-'))
  58. const readyFile = join(overrideDir, '.hang-ready')
  59. const nextReadyFile = join(overrideDir, '.next-hang-ready')
  60. const overridePath = join(overrideDir, 'replay.override.json')
  61. const recorded = deriveReplayScript(parseSessionLog(await readFile(FIXTURE, 'utf8')))
  62. expect(recorded).toHaveLength(1)
  63. const replay: ReplayEntry[] = [
  64. { kind: 'hang', readyFile },
  65. { kind: 'hang', readyFile: nextReadyFile },
  66. recorded[0]!,
  67. ]
  68. await writeFile(overridePath, JSON.stringify(replay))
  69. const sessionEvents: SessionEvent[] = []
  70. scaffold = await launchWebScaffold({ replayFixture: FIXTURE, replayOverride: overridePath })
  71. scaffold.ctx.on('session/event', (_session, event: SessionEvent) => { sessionEvents.push(event) })
  72. browser = await chromium.launch()
  73. page = await newEnglishPage(browser)
  74. const tripwire = watchConsole(page)
  75. await page.goto(scaffold.baseUrl, { waitUntil: 'load' })
  76. await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
  77. await connectFreshWorkspace(page, scaffold.workspaceCwd)
  78. onTestFailed(() => saveFailureShot(page, 'web-e2e-queue-actions'))
  79. const input = page.locator('textarea').first()
  80. const settled = scaffold.whenTurnSettled()
  81. await input.fill(ACTIVE_PROMPT)
  82. await input.press('Enter')
  83. await expect.poll(() => existsSync(readyFile), { timeout: 15_000 }).toBe(true)
  84. for (const text of [REMOVE, EDIT]) {
  85. await input.fill(text)
  86. await input.press('Enter')
  87. }
  88. const queueHeader = page.getByRole('button', { name: '2 queued messages' })
  89. await expect.poll(() => queueHeader.getAttribute('aria-expanded'), { timeout: 10_000 })
  90. .toBe('false')
  91. const collapsedSnapshot = await captureStableAria(
  92. page,
  93. '[class*="centerCol"]',
  94. scaffold.workspaceCwd,
  95. )
  96. await compareOrRefreshGolden(COLLAPSED_EXPECTED, collapsedSnapshot, MODE)
  97. await queueHeader.click()
  98. await expect.poll(
  99. () => page.getByRole('button', { name: 'Remove queued message' }).count(),
  100. { timeout: 10_000 },
  101. ).toBe(2)
  102. await page.setViewportSize({ width: 640, height: 1000 })
  103. const queueBox = await page.locator('[data-queue-dock]').boundingBox()
  104. const composerBox = await page.locator('[data-composer-card]').boundingBox()
  105. expect(queueBox).not.toBeNull()
  106. expect(composerBox).not.toBeNull()
  107. expect(queueBox!.x).toBeGreaterThanOrEqual(composerBox!.x)
  108. expect(queueBox!.x + queueBox!.width)
  109. .toBeLessThanOrEqual(composerBox!.x + composerBox!.width)
  110. const queueLeftInset = queueBox!.x - composerBox!.x
  111. const queueRightInset = composerBox!.x + composerBox!.width - queueBox!.x - queueBox!.width
  112. const composerMetrics = await page.locator('[data-composer-card]').evaluate((element) => {
  113. const style = getComputedStyle(element)
  114. return {
  115. dockInset: Number.parseFloat(style.getPropertyValue('--dsh-composer-dock-inset')),
  116. }
  117. })
  118. expect(queueLeftInset).toBeCloseTo(composerMetrics.dockInset, 1)
  119. expect(queueRightInset).toBeCloseTo(composerMetrics.dockInset, 1)
  120. await page.setViewportSize({ width: 1680, height: 1000 })
  121. const editRow = page.getByText(EDIT, { exact: true }).locator('..')
  122. await editRow.getByRole('button', { name: 'Edit queued message' }).click()
  123. const editor = page.getByRole('textbox', { name: 'Edit queued message' })
  124. await editor.fill(EDITED)
  125. const editingSnapshot = await captureStableAria(page, '[class*="centerCol"]', scaffold.workspaceCwd)
  126. await compareOrRefreshGolden(EDITING_EXPECTED, editingSnapshot, MODE)
  127. await page.getByRole('button', { name: 'Save queued message' }).click()
  128. await page.getByText(EDITED, { exact: true }).waitFor()
  129. const removeRow = page.getByText(REMOVE, { exact: true }).locator('..')
  130. await removeRow.getByRole('button', { name: 'Remove queued message' }).click()
  131. await expect.poll(() => page.getByText(REMOVE, { exact: true }).count()).toBe(0)
  132. const snapshot = await captureStableAria(page, '[class*="centerCol"]', scaffold.workspaceCwd)
  133. await compareOrRefreshGolden(UI_EXPECTED, snapshot, MODE)
  134. expect(sessionEvents.filter(event => event.type === 'user/message' && event.data.source.kind === 'user')).toHaveLength(1)
  135. expect(tripwire.pageErrors).toEqual([])
  136. expect(tripwire.warnings).toEqual([])
  137. await input.fill(TAIL)
  138. await input.press('Enter')
  139. await expect.poll(
  140. () => page.getByRole('button', { name: 'Remove queued message' }).count(),
  141. { timeout: 10_000 },
  142. ).toBe(2)
  143. await page.getByRole('button', { name: 'Stop generating' }).click()
  144. await expect.poll(() => existsSync(nextReadyFile), { timeout: 15_000 }).toBe(true)
  145. await page.getByText(TAIL, { exact: true }).waitFor()
  146. await expect.poll(() => page.getByRole('button', { name: 'Remove queued message' }).count())
  147. .toBe(1)
  148. const preservedSnapshot = await captureStableAria(page, '[class*="centerCol"]', scaffold.workspaceCwd)
  149. await compareOrRefreshGolden(PRESERVED_EXPECTED, preservedSnapshot, MODE)
  150. await page.getByRole('button', { name: 'Stop generating' }).click()
  151. await settled
  152. expect(turnEndReasons(sessionEvents)).toEqual(['aborted', 'aborted', 'completed'])
  153. expect(sessionEvents.filter(event => event.type === 'user/message' && event.data.source.kind === 'user'))
  154. .toHaveLength(3)
  155. await expect.poll(() => page.locator('[data-queue-dock]').count()).toBe(0)
  156. }, 120_000)
  157. it.skipIf(MODE === 'record')('keeps its snapshot inventory closed', async () => {
  158. await assertFixtureInventory(
  159. SNAPSHOT_DIR,
  160. ['collapsed.expected.md', 'editing.expected.md', 'preserved.expected.md', 'ui.expected.md'],
  161. )
  162. })
  163. })