search-card.expected.e2e.ts 4.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. // @vitest-environment jsdom
  2. // Assembled search-card snapshot: boots the real built workspace client bundles
  3. // through AppWebEntry's ModuleLoader path against the keyless
  4. // fixture Connection RPC (no API key, no model round), opens the fixture
  5. // session, and pins the search card the `grep` turn (fixture turn 67) renders in
  6. // the assembled application. The built-boot smoke proves the graph boots but
  7. // intentionally carries no behavior assertions; this is the assembled-output check
  8. // that a broken SearchRow registration or a dropped card would fail — the
  9. // per-package suites bench over src and cannot see the bundled wiring.
  10. //
  11. // Keyless and deterministic: the fixture is the fake server, so the grep turn's
  12. // matches, its truncation summary, and its head/tail cap are fixed in the
  13. // fixture, not harvested from a live model. The recovery-footer arm is a pure
  14. // derivation over the result view, pinned at every render site by the
  15. // ui-conversation suite; here the fixture turn exercises the assembled card
  16. // fields and its cap.
  17. import { mkdirSync, writeFileSync } from 'node:fs'
  18. import { dirname, join } from 'node:path'
  19. import { act, fireEvent, screen, waitFor, within } from '@testing-library/react'
  20. import { describe, expect, it } from 'vitest'
  21. import { hasClass, installAssembledBootEnv, mountAssembledApp, REFRESHING_GOLDEN } from './assembled-boot.ts'
  22. const EXPECTED = join(process.cwd(), 'apps/web/tests/expected/search-card/grep-card.expected.txt')
  23. installAssembledBootEnv()
  24. /** Normalize a rendered search card to stable text fields: the kind, the banner
  25. * summary, each file header (path + count), each visible match line, the expand
  26. * control label, and the recovery footer. */
  27. function cardShape(root: Element): string {
  28. const card = root.querySelector('[data-search]')
  29. if (card === null) return '<no search card>'
  30. const pick = (from: Element, name: string): Element[] =>
  31. [...from.querySelectorAll('*')].filter(el => hasClass(el, name))
  32. const lines: string[] = [`kind=${card.getAttribute('data-search')}`]
  33. const summary = pick(card, 'summary')[0]?.textContent?.trim()
  34. if (summary !== undefined && summary !== '') lines.push(`summary=${summary}`)
  35. for (const header of pick(card, 'fileHeader')) lines.push(`file=${header.textContent?.trim() ?? ''}`)
  36. for (const row of pick(card, 'line')) lines.push(`line=${row.textContent?.trim() ?? ''}`)
  37. const expand = pick(card, 'expand')[0]?.textContent?.trim()
  38. if (expand !== undefined && expand !== '') lines.push(`expand=${expand}`)
  39. const recovery = pick(root, 'searchRecovery')[0]?.textContent?.trim()
  40. if (recovery !== undefined && recovery !== '') lines.push(`recovery=${recovery}`)
  41. return lines.join('\n')
  42. }
  43. describe('assembled search card', () => {
  44. it('renders the grep card, its truncation summary, and its capped head/tail slice from the built bundles', async () => {
  45. mountAssembledApp()
  46. const tree = await screen.findByRole('tree', { name: 'Sessions' }, { timeout: 10_000 })
  47. fireEvent.click(await within(tree).findByText('Fixture 历史会话'))
  48. // Wait for chat content to reach the fixture's later turns (the bash sample
  49. // is turn 66, the grep card turn 67).
  50. await waitFor(() => {
  51. expect(document.querySelector('[data-sample="bash"]')).not.toBeNull()
  52. }, { timeout: 10_000 })
  53. // The grep turn's keyed SearchRow composes ToolRow: the card is collapsed
  54. // by default, so wait for the summary row, then expand it to reach the card.
  55. await waitFor(() => {
  56. const tools = [...document.querySelectorAll('[data-tool]')].map(el => el.getAttribute('data-tool'))
  57. expect(tools, `tools present: ${tools.join(', ')}`).toContain('grep')
  58. }, { timeout: 10_000 })
  59. // `data-tool` sits on the ToolRow root; the collapsed row is the expand
  60. // toggle. Click it so the card and its recovery footer mount, then serialize the
  61. // whole row (the card lives inside ToolRow's body wrapper).
  62. const grepRow = document.querySelector('[data-tool="grep"]')!
  63. act(() => { fireEvent.click(grepRow.querySelector('[data-expandable]') ?? grepRow) })
  64. await waitFor(() => {
  65. expect(grepRow.querySelector('[data-search]')).not.toBeNull()
  66. }, { timeout: 10_000 })
  67. const shape = cardShape(grepRow)
  68. if (REFRESHING_GOLDEN) {
  69. mkdirSync(dirname(EXPECTED), { recursive: true })
  70. writeFileSync(EXPECTED, shape)
  71. }
  72. await expect(shape).toMatchFileSnapshot(EXPECTED)
  73. })
  74. })