deepseek-harness/apps/web/tests/code-mode-fixture.snapshot.ts

// @vitest-environment jsdom
// Code Mode fixture snapshot over the BUILT client graph (the workspace-flow
// idiom: real bundles via AppWebEntry, keyless FixtureApiClient transport).
// Opens the fixture history session and pins the run_code turn's rendering:
// the code-variant parent row titled by the model-authored description, its
// three always-visible nested sub-rows (bash through the sample registration,
// read through GenericToolCard, the failing read wearing the error state),
// the expanded program body, and details-panel resolution of a sub-callId.
import { readFileSync } from 'node:fs'
import { join } from 'node:path'
import { act, cleanup, fireEvent, screen, waitFor, within } from '@testing-library/react'
import { afterEach, beforeEach, expect, it, vi } from 'vitest'
import type { WebBootEntry } from '@deepseek-ai/dsh-client-modules/client'
import { AppWebEntry } from '@deepseek-ai/dsh-client-web'

const PLUGINS: readonly (WebBootEntry & { dir: string })[] = [
  { id: '@deepseek-ai/dsh-client-connection', dir: 'connection', url: '/plugins/connection.js', rev: 'fx', inject: [], immediately: true },
  { id: '@deepseek-ai/dsh-client-runtime', dir: 'runtime', url: '/plugins/runtime.js', rev: 'fx', inject: ['@deepseek-ai/dsh-client-connection'], immediately: true },
  { id: '@deepseek-ai/dsh-client-ui-theme', dir: 'ui-theme', url: '/plugins/ui-theme.js', rev: 'fx', inject: [], immediately: true },
  { id: '@deepseek-ai/dsh-client-locale', dir: 'locale', url: '/plugins/locale.js', rev: 'fx', inject: [], immediately: true },
  { id: '@deepseek-ai/dsh-client-ui-layout', dir: 'ui-layout', url: '/plugins/ui-layout.js', rev: 'fx', inject: ['@deepseek-ai/dsh-client-runtime'] },
  { id: '@deepseek-ai/dsh-client-ui-sidebar', dir: 'ui-sidebar', url: '/plugins/ui-sidebar.js', rev: 'fx', inject: ['@deepseek-ai/dsh-client-ui-layout'] },
  { id: '@deepseek-ai/dsh-client-ui-conversation', dir: 'ui-conversation', url: '/plugins/ui-conversation.js', rev: 'fx', inject: ['@deepseek-ai/dsh-client-ui-layout'] },
  {
    id: '@deepseek-ai/dsh-client-ui-workspace',
    dir: 'ui-workspace',
    url: '/plugins/ui-workspace.js',
    rev: 'fx',
    inject: [
      '@deepseek-ai/dsh-client-runtime',
      '@deepseek-ai/dsh-client-ui-conversation',
      '@deepseek-ai/dsh-client-ui-sidebar',
    ],
  },
  { id: '@deepseek-ai/dsh-client-ui-trajectory', dir: 'ui-trajectory', url: '/plugins/ui-trajectory.js', rev: 'fx', inject: ['@deepseek-ai/dsh-client-ui-conversation'] },
]

const bundles = new Map(PLUGINS.map(plugin => [
  plugin.url,
  readFileSync(join(process.cwd(), 'packages/client', plugin.dir, 'lib/client.js'), 'utf8'),
]))

interface FixtureWindow extends Window {
  __DSH_BOOT__?: { rev: string; entries: WebBootEntry[] }
  __ModuleLoader__?: unknown
}

class ResizeObserverStub {
  observe(): void {}
  disconnect(): void {}
  unobserve(): void {}
}

const win = window as FixtureWindow
let unmount: (() => void) | undefined

beforeEach(() => {
  localStorage.clear()
  document.title = 'DeepSeek Harness'
  vi.stubGlobal('ResizeObserver', ResizeObserverStub)
  vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) =>
    setTimeout(() => { callback(0) }, 0) as unknown as number)
  vi.stubGlobal('cancelAnimationFrame', (id: number) => { clearTimeout(id) })
})

afterEach(() => {
  act(() => { unmount?.() })
  unmount = undefined
  cleanup()
  delete win.__DSH_BOOT__
  delete win.__ModuleLoader__
  delete (globalThis as Record<string, unknown>).__fxTiming
  document.body.innerHTML = ''
  document.head.querySelectorAll('style[data-plugin]').forEach((style) => { style.remove() })
  document.title = ''
  history.replaceState(null, '', '/')
  vi.unstubAllGlobals()
})

/** Boot the complete built client graph against the populated fixture branch. */
function boot(): void {
  history.replaceState(null, '', '/?fixture')
  const root = document.createElement('div')
  root.id = 'root'
  document.body.appendChild(root)
  win.__DSH_BOOT__ = { rev: 'fx', entries: PLUGINS.map(({ dir: _dir, ...plugin }) => plugin) }
  act(() => {
    const entry = new AppWebEntry(root, {
      fetchBundle: (url) => {
        const code = bundles.get(url)
        return code === undefined ? Promise.reject(new Error(`missing built bundle ${url}`)) : Promise.resolve(code)
      },
      executeBundle: (code) => { (0, eval)(code) },
    })
    void entry.run()
    unmount = () => { entry.dispose() }
  })
}

/** Collapse decorative whitespace while preserving the text a user sees. */
function visibleText(element: Element): string {
  return (element.textContent ?? '').replace(/\s+/g, ' ').trim()
}

/** Open the fixture history session (the alpha log carrying the run_code turn) and scroll to its tail. */
async function openFixtureSession(): Promise<void> {
  const tree = await screen.findByRole('tree', { name: 'Sessions' }, { timeout: 10_000 })
  const group = within(tree).getByText('4 sessions').closest<HTMLElement>('[role="treeitem"]')
  if (group === null) throw new Error('fixture Workspace group missing')
  if (group.getAttribute('aria-expanded') === 'false') {
    fireEvent.click(within(group).getByText('fixture'))
    await waitFor(() => {
      expect(within(tree).getByText('4 sessions').closest('[role="treeitem"]')?.getAttribute('aria-expanded')).toBe('true')
    })
  }
  const session = await within(tree).findByText('Fixture 历史会话')
  fireEvent.click(session)
  await waitFor(() => {
    expect(document.querySelector('[data-variant="code"]')).not.toBeNull()
  }, { timeout: 10_000 })
}

it('renders the fixture run_code turn: code parent row, nested sub-rows, error state', async () => {
  boot()
  await openFixtureSession()

  const codeRoot = document.querySelector('[data-variant="code"]')
  if (codeRoot === null) throw new Error('code-variant row missing')
  const nest = codeRoot.closest('[class*="callRow"]')?.querySelector('[data-subcalls]')
  if (nest === undefined || nest === null) throw new Error('sub-call nest missing under the code row')

  expect({
    parentRow: visibleText(codeRoot),
    // The three sub-rows in dispatch order: bash rides the sample plugin's
    // keyed registration (the same one a native top-level bash row uses),
    // both reads ride GenericToolCard.
    bashSample: nest.querySelector('[data-sample="bash-global"]') !== null,
    subRows: [...nest.querySelectorAll(':scope > *')].map(visibleText),
    errorSubRow: nest.querySelector('[data-state="error"]') !== null,
  }).toMatchInlineSnapshot(`
    {
      "bashSample": true,
      "errorSubRow": true,
      "parentRow": "CodeRead the notes files and summarize",
      "subRows": [
        "$List notes",
        "Readnotes/demo.txt",
        "Readnotes/missing.txt",
      ],
    }
  `)
})

it('expands the code row into the program body and resolves a sub-row through the details panel', async () => {
  boot()
  await openFixtureSession()

  // Expand: the leading control reveals the program verbatim.
  const codeRoot = document.querySelector('[data-variant="code"]')
  if (codeRoot === null) throw new Error('code-variant row missing')
  const toggle = codeRoot.querySelector('button[aria-expanded]')
  if (toggle === null) throw new Error('code row expand control missing')
  fireEvent.click(toggle)
  await screen.findByText(/const listing = await tools\.bash/)

  // Sub-row click → details panel resolves the sub-callId with FULL output.
  const nest = document.querySelector('[data-subcalls]')
  if (nest === null) throw new Error('sub-call nest missing')
  const bashRow = nest.querySelector('[data-sample="bash-global"]')
  if (bashRow === null) throw new Error('bash sample sub-row missing')
  fireEvent.click(bashRow)
  const details = await screen.findByText('Input')
  const panel = details.closest('[class*="root"]')
  if (panel === null) throw new Error('details panel missing')
  expect({
    title: visibleText(within(panel as HTMLElement).getByText('bash')),
    inputEchoesArgs: visibleText(panel).includes('ls notes'),
    outputComplete: visibleText(panel).includes('demo.txt new-demo.txt')
      || visibleText(panel).includes('demo.txt\nnew-demo.txt')
      || (panel.textContent ?? '').includes('demo.txt\nnew-demo.txt'),
  }).toMatchInlineSnapshot(`
    {
      "inputEchoesArgs": true,
      "outputComplete": true,
      "title": "bash",
    }
  `)
})