Merge remote-tracking branch 'origin/master' into worktree/persist-web-theme-settings
This commit is contained in:
133
apps/web/tests/assembled-boot.ts
Normal file
133
apps/web/tests/assembled-boot.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
// Shared scaffolding for the assembled-jsdom snapshots: the real built
|
||||
// `packages/client/*/lib/client.js` artifacts booted through AppWebEntry's
|
||||
// ModuleLoader path (loadBundle) against the keyless FixtureApiClient
|
||||
// transport. Every file that mounts this graph needs the same boot entry list,
|
||||
// the same bundle map, the same jsdom globals, and the same mount call, and
|
||||
// differs only in what it asserts afterwards, so the scaffolding lives here.
|
||||
//
|
||||
// Keyless and deterministic: the fixture is the fake server, so nothing here
|
||||
// reaches a model or the network.
|
||||
import { readFileSync } from 'node:fs'
|
||||
import { join } from 'node:path'
|
||||
import { act, cleanup } from '@testing-library/react'
|
||||
import { afterEach, beforeEach, vi } from 'vitest'
|
||||
import type { WebBootEntry } from '@deepseek-ai/dsh-client-modules/client'
|
||||
import { AppWebEntry } from '@deepseek-ai/dsh-client-web'
|
||||
|
||||
/** Boot entries for the minimal assembled graph, each carrying the workspace directory its bundle is read from. */
|
||||
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
|
||||
|
||||
/**
|
||||
* Register the per-test jsdom setup and teardown the assembled boot needs:
|
||||
* English pinned before boot so role/text locators stay deterministic across
|
||||
* localized component migrations (the newEnglishPage e2e convention), the
|
||||
* observers and frame callbacks jsdom lacks, and a full reset of the document,
|
||||
* the boot globals, and the injected plugin styles afterwards.
|
||||
*/
|
||||
export function installAssembledBootEnv(): void {
|
||||
beforeEach(() => {
|
||||
localStorage.clear()
|
||||
localStorage.setItem('dsh.locale', 'en')
|
||||
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__
|
||||
document.body.innerHTML = ''
|
||||
document.head.querySelectorAll('style[data-plugin]').forEach((style) => { style.remove() })
|
||||
document.title = ''
|
||||
history.replaceState(null, '', '/')
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Mount the assembled application on the fixture transport; the teardown
|
||||
* registered by installAssembledBootEnv disposes it.
|
||||
*/
|
||||
export function mountAssembledApp(): 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, {
|
||||
loadBundle: async (url) => {
|
||||
const code = bundles.get(url)
|
||||
if (code === undefined) throw new Error(`missing built bundle ${url}`)
|
||||
;(0, eval)(code)
|
||||
},
|
||||
})
|
||||
void entry.run()
|
||||
unmount = () => { entry.dispose() }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Match a CSS-module class by its logical name.
|
||||
* Module class names carry a per-build hash in one of two schemes —
|
||||
* ui-primitives emits `_<name>_<hash>` (name bounded by underscores),
|
||||
* ui-conversation emits `<hash>_<name>` (name at the end) — and a longer name
|
||||
* containing this one must not match (`line` must not hit `lineNumber`).
|
||||
* @param el - element whose class list is inspected.
|
||||
* @param name - logical (unhashed) module class name.
|
||||
* @returns whether the element carries that module class.
|
||||
*/
|
||||
export function hasClass(el: Element, name: string): boolean {
|
||||
return [...el.classList].some(cls => cls === name || cls.endsWith(`_${name}`) || cls.startsWith(`_${name}_`) || cls.includes(`_${name}_`))
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether this run rewrites its golden instead of comparing against it, set by
|
||||
* the snapshot gate's `DSH_SNAPSHOT` mode (`record` re-runs the scenarios from
|
||||
* scratch, `refresh` re-derives the expected text from the existing ones).
|
||||
*/
|
||||
export const REFRESHING_GOLDEN = process.env.DSH_SNAPSHOT === 'record' || process.env.DSH_SNAPSHOT === 'refresh'
|
||||
@@ -1,105 +1,23 @@
|
||||
// @vitest-environment jsdom
|
||||
// The built-bundle boot smoke: the ONE assembled-jsdom test that loads the
|
||||
// real `packages/client/*/lib/client.js` artifacts through AppWebEntry's
|
||||
// ModuleLoader path (loadBundle) and proves the boot graph
|
||||
// assembles — staged activation across the immediately tier and the inject
|
||||
// layers, per-plugin CSS injection, and a rendered journey reaching chat
|
||||
// content from the keyless FixtureApiClient transport.
|
||||
// The built-bundle boot smoke: the assembled-jsdom test that owns the boot
|
||||
// graph itself. Other files share the same scaffolding (assembled-boot.ts) to
|
||||
// reach a surface only the built bundles expose; this one asserts that the
|
||||
// graph assembles at all — staged activation across the immediately tier and
|
||||
// the inject layers, per-plugin CSS injection, and a rendered journey reaching
|
||||
// chat content from the keyless FixtureApiClient transport.
|
||||
//
|
||||
// Component behavior remains owned by per-package suites (SlotTestRuntime
|
||||
// benches over src). This smoke additionally pins the resident interaction
|
||||
// fixture's cross-plugin projection because only the built connection/runtime/
|
||||
// workspace graph can prove that transport-to-row path end to end.
|
||||
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'
|
||||
import { act, fireEvent, screen, waitFor, within } from '@testing-library/react'
|
||||
import { expect, it } from 'vitest'
|
||||
import { installAssembledBootEnv, mountAssembledApp } from './assembled-boot.ts'
|
||||
|
||||
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()
|
||||
// English pinned before boot: role/text locators stay deterministic across
|
||||
// localized component migrations (the newEnglishPage e2e convention).
|
||||
localStorage.setItem('dsh.locale', 'en')
|
||||
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__
|
||||
document.body.innerHTML = ''
|
||||
document.head.querySelectorAll('style[data-plugin]').forEach((style) => { style.remove() })
|
||||
document.title = ''
|
||||
history.replaceState(null, '', '/')
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
installAssembledBootEnv()
|
||||
|
||||
it('boots the built plugin graph and renders a fixture session end to end', async () => {
|
||||
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, {
|
||||
loadBundle: async (url) => {
|
||||
const code = bundles.get(url)
|
||||
if (code === undefined) throw new Error(`missing built bundle ${url}`)
|
||||
;(0, eval)(code)
|
||||
},
|
||||
})
|
||||
void entry.run()
|
||||
unmount = () => { entry.dispose() }
|
||||
})
|
||||
mountAssembledApp()
|
||||
|
||||
// The sidebar renders from the boot graph: every inject layer activated.
|
||||
const tree = await screen.findByRole('tree', { name: 'Sessions' }, { timeout: 10_000 })
|
||||
|
||||
339
apps/web/tests/conversation-column-overflow.e2e.ts
Normal file
339
apps/web/tests/conversation-column-overflow.e2e.ts
Normal file
@@ -0,0 +1,339 @@
|
||||
// Web e2e scenario: the conversation column scrolls on one axis only, as the
|
||||
// browser actually lays it out. The reported symptom was a horizontal
|
||||
// scrollbar under the whole center column once the window (or the sidebar
|
||||
// drag) narrowed it — the hero's decorative backdrop ellipse bleeding past the
|
||||
// column and becoming user-scrollable.
|
||||
//
|
||||
// The bleed is by construction and stays: `.heroGlow` is sized 1051/776 of the
|
||||
// hero box (ConversationRoot.module.css) so the blur scales with the input
|
||||
// card. What changed is the scroll container: `[data-conversation-scroll]`
|
||||
// scrolls vertically, and a box that scrolls in one axis computes the other
|
||||
// axis's initial `visible` to `auto`, so the bleed came back as a bar. The
|
||||
// fix states `overflow-x: hidden` there.
|
||||
//
|
||||
// Only a real engine reports that pair — the bleed and the resulting scroll
|
||||
// range — so the scenario sweeps viewport widths that bracket the glow's
|
||||
// width and asserts both at each stop. Asserting no horizontal scroll alone
|
||||
// would go vacuous the moment the glow stopped bleeding for an unrelated
|
||||
// reason, which is why each stop also records whether it bleeds; the wide stop
|
||||
// is the control where it does not.
|
||||
//
|
||||
// Zero model calls: the hero is the boot state, so nothing is seeded and no
|
||||
// replay row mounts. A stray stream would fail loud with NO_ADAPTER.
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { join } from 'node:path'
|
||||
import type { Browser, Page } from 'playwright'
|
||||
import { chromium } from 'playwright'
|
||||
import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest'
|
||||
import {
|
||||
assertFixtureInventory, compareOrRefreshGolden, launchWebScaffold, watchConsole, webSnapshotMode,
|
||||
type WebScaffold,
|
||||
} from './scaffold.ts'
|
||||
import { newEnglishPage, saveFailureShot } from './support.ts'
|
||||
|
||||
const SNAPSHOT_DIR = fileURLToPath(new URL('./snapshots/conversation-column-overflow', import.meta.url))
|
||||
/**
|
||||
* Committed golden of the one-axis relation at every stop. It records
|
||||
* relations and booleans, never absolute coordinates: the column width follows
|
||||
* the viewport and the sidebar, and a golden carrying pixels would document the
|
||||
* platform instead of the change.
|
||||
*/
|
||||
const GEOMETRY_EXPECTED = join(SNAPSHOT_DIR, 'geometry.expected.md')
|
||||
const MODE = webSnapshotMode()
|
||||
/** Narrow sweep stop where the mutation control retains overflow across scrollbar implementations. */
|
||||
const CONTROL_VIEWPORT = 600
|
||||
/**
|
||||
* Viewport widths bracketing the glow: the narrow stops retain the reported
|
||||
* bleed while the widest stop proves the relation can also be false.
|
||||
*/
|
||||
const WIDTHS = [1680, 1200, 1000, 800, CONTROL_VIEWPORT]
|
||||
/** Element id of the mutation control's injected sheet, so the test can take it back out. */
|
||||
const CONTROL_STYLE_ID = 'dsh-column-overflow-control'
|
||||
/** Horizontal wheel delta per gesture; must exceed the widest bleed the sweep can produce. */
|
||||
const WHEEL_DELTA = 300
|
||||
|
||||
/** One viewport stop: whether the glow bleeds past the column, and whether that bleed scrolls. */
|
||||
interface ColumnMetrics {
|
||||
/** Viewport width the stop was measured at. */
|
||||
width: number
|
||||
/** The column's content width. Not committed to the golden — it is what settles after a resize, and what the sweep waits on. */
|
||||
columnWidth: number
|
||||
/** Resolved `overflow-x` on the conversation scroll container. */
|
||||
overflowX: string
|
||||
/** True when the glow's box reaches past the column's content edge — the condition the fix has to survive. */
|
||||
glowBleeds: boolean
|
||||
/**
|
||||
* `scrollWidth - clientWidth`. Deliberately NOT the assertion: `hidden` and
|
||||
* `auto` both report the same value, because `hidden` clips the bleed rather
|
||||
* than reflowing it away. Recorded because it is the vacuity guard in
|
||||
* numbers — it must stay positive at the narrow stops, or the scenario has
|
||||
* stopped reproducing the situation the fix is for.
|
||||
*/
|
||||
bleedRange: number
|
||||
/** True when the column still scrolls vertically — the axis the fix must not take away. */
|
||||
scrollsVertically: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Measure the conversation column at the page's current viewport.
|
||||
* @param page - the page under test.
|
||||
* @param width - the viewport width already applied, recorded with the reading.
|
||||
* @returns the stop's overflow relations.
|
||||
*/
|
||||
function measureColumn(page: Page, width: number): Promise<ColumnMetrics> {
|
||||
return page.evaluate((viewportWidth) => {
|
||||
const scroller = document.querySelector<HTMLElement>('[data-conversation-scroll]')
|
||||
if (scroller === null) throw new Error('conversation scroll container not in the DOM')
|
||||
const glow = scroller.querySelector<SVGElement>('[class*="heroGlow"]')
|
||||
if (glow === null) throw new Error('hero glow not in the DOM — the boot state is not the hero')
|
||||
const box = scroller.getBoundingClientRect()
|
||||
const glowBox = glow.getBoundingClientRect()
|
||||
return {
|
||||
width: viewportWidth,
|
||||
columnWidth: scroller.clientWidth,
|
||||
overflowX: getComputedStyle(scroller).overflowX,
|
||||
// `clientWidth` is the content edge, which is what the scrollable
|
||||
// overflow region is measured against; either side counts as a bleed,
|
||||
// though only the right one can produce a bar in this writing mode.
|
||||
glowBleeds: glowBox.right > box.left + scroller.clientWidth + 0.5 || glowBox.left < box.left - 0.5,
|
||||
bleedRange: scroller.scrollWidth - scroller.clientWidth,
|
||||
scrollsVertically: getComputedStyle(scroller).overflowY === 'auto',
|
||||
}
|
||||
}, width)
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll the column sideways the way a user would and report where it landed.
|
||||
*
|
||||
* This is the one signal that separates the two states, and it is why the
|
||||
* scenario needs a real engine: `overflow-x: hidden` leaves the box
|
||||
* programmatically scrollable and leaves `scrollWidth` untouched, so every
|
||||
* property reading agrees across the fix. Only refusing an actual input event
|
||||
* differs — measured at the 1200px stop, the shipped column stays at 0 while
|
||||
* the same page with `overflow-x: auto` forced on lands at its scroll boundary.
|
||||
* @param page - the page under test.
|
||||
* @returns `scrollLeft` after one horizontal wheel over the column.
|
||||
*/
|
||||
async function wheelHorizontally(page: Page): Promise<number> {
|
||||
const origin = await page.evaluate(() => {
|
||||
const scroller = document.querySelector<HTMLElement>('[data-conversation-scroll]')
|
||||
if (scroller === null) throw new Error('conversation scroll container not in the DOM')
|
||||
// Start from the origin so the reading is this gesture's own effect.
|
||||
scroller.scrollLeft = 0
|
||||
const box = scroller.getBoundingClientRect()
|
||||
// Near the top of the column, clear of the centered hero card: the wheel
|
||||
// must reach the column, not a nested scroller the composer owns.
|
||||
return { x: box.left + box.width / 2, y: box.top + 60 }
|
||||
})
|
||||
await page.mouse.move(origin.x, origin.y)
|
||||
await page.mouse.wheel(WHEEL_DELTA, 0)
|
||||
// A fixed settle, then two frames. Polling for a settled value cannot be
|
||||
// used here — the value under test is 0, which a poll starting at 0 accepts
|
||||
// before the gesture has had any chance to move it — so the wait is
|
||||
// generous enough to cover a smooth-scroll animation on any engine the lane
|
||||
// runs on. The timing is identical on both sides of the mutation control
|
||||
// below, which is what makes a 0 reading evidence rather than a race won.
|
||||
await page.waitForTimeout(400)
|
||||
return page.evaluate(() => new Promise<number>((resolve) => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
resolve(document.querySelector<HTMLElement>('[data-conversation-scroll]')?.scrollLeft ?? -1)
|
||||
})
|
||||
})
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Measure the positive horizontal scroll boundary without changing the
|
||||
* shipped overflow mode. This is distinct from `scrollWidth - clientWidth`
|
||||
* when a stable scrollbar gutter leaves part of the overflow on the negative
|
||||
* side of the scroll origin.
|
||||
* @param page - the page under test.
|
||||
* @returns the greatest positive `scrollLeft` reachable by the control gesture.
|
||||
*/
|
||||
async function horizontalScrollLimit(page: Page): Promise<number> {
|
||||
return page.evaluate((delta) => {
|
||||
const scroller = document.querySelector<HTMLElement>('[data-conversation-scroll]')
|
||||
if (scroller === null) throw new Error('conversation scroll container not in the DOM')
|
||||
const previousScrollBehavior = scroller.style.scrollBehavior
|
||||
scroller.style.scrollBehavior = 'auto'
|
||||
scroller.scrollLeft = delta
|
||||
const limit = scroller.scrollLeft
|
||||
scroller.scrollLeft = 0
|
||||
scroller.style.scrollBehavior = previousScrollBehavior
|
||||
return limit
|
||||
}, WHEEL_DELTA)
|
||||
}
|
||||
|
||||
/** A stop's readings plus where a horizontal wheel over it landed. */
|
||||
type ColumnStop = ColumnMetrics & {
|
||||
/** `scrollLeft` after one horizontal wheel: the user-facing claim, 0 at every stop. */
|
||||
scrollLeftAfterWheel: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the golden body: one line per stop, relations only.
|
||||
*
|
||||
* Absolute pixels are deliberately absent apart from `scrollLeftAfterWheel`,
|
||||
* which the fix pins to 0 by construction. The bleed is recorded as a boolean
|
||||
* rather than its width, so the golden survives any platform whose column
|
||||
* lands a pixel off — a fixture that has to be re-recorded per platform
|
||||
* documents the platform, not the change.
|
||||
* @param stops - the measured stops, in sweep order.
|
||||
* @returns the golden body, without a trailing newline.
|
||||
*/
|
||||
function renderGeometry(stops: ColumnStop[]): string {
|
||||
return [
|
||||
'# Conversation column horizontal overflow',
|
||||
'',
|
||||
'| viewport | overflow-x | glow bleeds past the column | scrollLeft after a horizontal wheel | scrolls vertically |',
|
||||
'| --- | --- | --- | --- | --- |',
|
||||
...stops.map(stop => `| ${String(stop.width)}px | ${stop.overflowX} | ${String(stop.glowBleeds)} `
|
||||
+ `| ${String(stop.scrollLeftAfterWheel)}px | ${String(stop.scrollsVertically)} |`),
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
describe('web e2e: the conversation column scrolls on one axis', () => {
|
||||
let scaffold: WebScaffold
|
||||
let browser: Browser
|
||||
let page: Page
|
||||
let tripwire: ReturnType<typeof watchConsole>
|
||||
|
||||
beforeAll(async () => {
|
||||
scaffold = await launchWebScaffold({})
|
||||
browser = await chromium.launch()
|
||||
page = await newEnglishPage(browser, 900)
|
||||
tripwire = watchConsole(page)
|
||||
await page.goto(scaffold.baseUrl, { waitUntil: 'load' })
|
||||
await page.waitForSelector('[data-conversation-scroll] [class*="heroGlow"]', { timeout: 30_000 })
|
||||
}, 180_000)
|
||||
|
||||
afterAll(async () => {
|
||||
await browser?.close()
|
||||
await scaffold?.close()
|
||||
})
|
||||
|
||||
/**
|
||||
* Resize to a viewport and read the column once its width stops moving.
|
||||
*
|
||||
* The glow rides the hero box, which rides the column, and the frame eases
|
||||
* its column tracks over `--ds-transition-duration-slow`: reading straight
|
||||
* after a resize can report the previous viewport's relation, or a width
|
||||
* caught mid-transition.
|
||||
* @param width - viewport width to settle at.
|
||||
* @returns the column's readings at that width.
|
||||
*/
|
||||
const settleAt = async (width: number): Promise<ColumnMetrics> => {
|
||||
await page.setViewportSize({ width, height: 900 })
|
||||
let previous = -1
|
||||
await expect.poll(async () => {
|
||||
const current = (await measureColumn(page, width)).columnWidth
|
||||
const settled = current === previous
|
||||
previous = current
|
||||
return settled
|
||||
}, { timeout: 10_000 }).toBe(true)
|
||||
return measureColumn(page, width)
|
||||
}
|
||||
|
||||
/**
|
||||
* Sweep the stops once per run and hand the SAME readings to every assertion
|
||||
* below, so the golden and the assertions describe one measurement instead of
|
||||
* two runs that could disagree. Memoized rather than re-run per test: the
|
||||
* gestures below move the viewport, and a second sweep would be a second
|
||||
* chance for a resize to settle differently.
|
||||
* @returns the stops in {@link WIDTHS} order.
|
||||
*/
|
||||
let swept: Promise<ColumnStop[]> | undefined
|
||||
const sweep = (): Promise<ColumnStop[]> => {
|
||||
swept ??= (async () => {
|
||||
const stops: ColumnStop[] = []
|
||||
for (const width of WIDTHS) {
|
||||
stops.push({ ...await settleAt(width), scrollLeftAfterWheel: await wheelHorizontally(page) })
|
||||
}
|
||||
return stops
|
||||
})()
|
||||
return swept
|
||||
}
|
||||
|
||||
it('never scrolls horizontally, at any width the glow bleeds past', async () => {
|
||||
onTestFailed(() => saveFailureShot(page, 'web-e2e-conversation-column-overflow'))
|
||||
const stops = await sweep()
|
||||
// The vacuity guard, in two halves: the glow has to reach past the column
|
||||
// at the narrow stops, and that reach has to still register as scrollable
|
||||
// overflow. Without both, the claim below holds for free.
|
||||
expect(stops.filter(stop => stop.glowBleeds).map(stop => stop.width)).toEqual([
|
||||
1200, 1000, 800, CONTROL_VIEWPORT,
|
||||
])
|
||||
for (const stop of stops.filter(stop => stop.glowBleeds)) {
|
||||
expect(stop.bleedRange, `viewport ${String(stop.width)}`).toBeGreaterThan(0)
|
||||
}
|
||||
for (const stop of stops) {
|
||||
expect(stop.overflowX, `viewport ${String(stop.width)}`).toBe('hidden')
|
||||
// The reported symptom, stated directly: a horizontal wheel over the
|
||||
// column moves nothing, at every stop.
|
||||
expect(stop.scrollLeftAfterWheel, `viewport ${String(stop.width)}`).toBe(0)
|
||||
// The axis the column is a scroller for must survive the fix.
|
||||
expect(stop.scrollsVertically, `viewport ${String(stop.width)}`).toBe(true)
|
||||
}
|
||||
expect(tripwire.pageErrors).toEqual([])
|
||||
}, 120_000)
|
||||
|
||||
it('reports the pre-fix state when the axis is opened back up', async () => {
|
||||
onTestFailed(() => saveFailureShot(page, 'web-e2e-conversation-column-overflow-control'))
|
||||
// The mutation control, run in the page rather than against a second
|
||||
// build: it restores exactly what the fix changed — the initial `visible`
|
||||
// that a one-axis scroller computes to `auto` — and shows the same gesture,
|
||||
// at the same timing, carrying the column to its positive scroll boundary.
|
||||
// Without it a `scrollLeft` of 0 could equally mean the wheel never arrived.
|
||||
// Injected with an id rather than through `addStyleTag`, so the teardown
|
||||
// below can take the sheet out again by selector: it must not outlive this
|
||||
// test, or the golden ends up reading the control.
|
||||
await page.evaluate((id: string) => {
|
||||
const sheet = document.createElement('style')
|
||||
sheet.id = id
|
||||
sheet.textContent = '[data-conversation-scroll] { overflow-x: auto !important; }'
|
||||
document.head.append(sheet)
|
||||
}, CONTROL_STYLE_ID)
|
||||
try {
|
||||
// Resolve the mutated layout at the narrowest sweep stop. At wider stops,
|
||||
// a classic scrollbar can change the available box enough to remove the
|
||||
// overflow that the control is meant to expose.
|
||||
const before = await settleAt(CONTROL_VIEWPORT)
|
||||
expect(before.overflowX).toBe('auto')
|
||||
expect(before.bleedRange).toBeGreaterThan(0)
|
||||
const scrollLimit = await horizontalScrollLimit(page)
|
||||
// The control has a reachable horizontal range, and the gesture exceeds
|
||||
// it so the equality below proves that the wheel reached the far edge.
|
||||
expect(scrollLimit).toBeGreaterThan(0)
|
||||
expect(scrollLimit).toBeLessThan(WHEEL_DELTA)
|
||||
// Rounded: `scrollLeft` is fractional under a fractional layout while
|
||||
// the claim is that the column reached the positive boundary, not that
|
||||
// two engines agree on a sub-pixel.
|
||||
expect(Math.round(await wheelHorizontally(page))).toBe(Math.round(scrollLimit))
|
||||
} finally {
|
||||
await page.evaluate((id: string) => {
|
||||
document.getElementById(id)?.remove()
|
||||
}, CONTROL_STYLE_ID)
|
||||
}
|
||||
// The override is gone and the shipped state is back: the later goldens
|
||||
// read the product, not the control.
|
||||
expect((await settleAt(CONTROL_VIEWPORT)).overflowX).toBe('hidden')
|
||||
expect(tripwire.pageErrors).toEqual([])
|
||||
}, 120_000)
|
||||
|
||||
it('matches the committed column-overflow golden', async () => {
|
||||
onTestFailed(() => saveFailureShot(page, 'web-e2e-conversation-column-overflow-golden'))
|
||||
await compareOrRefreshGolden(GEOMETRY_EXPECTED, renderGeometry(await sweep()), MODE)
|
||||
expect(tripwire.pageErrors).toEqual([])
|
||||
}, 120_000)
|
||||
|
||||
it('commits exactly the fixtures it reads', async () => {
|
||||
// No model calls, so no replay log: the golden is the whole inventory.
|
||||
await assertFixtureInventory(SNAPSHOT_DIR, ['geometry.expected.md'])
|
||||
})
|
||||
|
||||
it.skipIf(MODE === 'record')('issued zero model calls and stayed clean', () => {
|
||||
expect(tripwire.warnings).toEqual([])
|
||||
expect(tripwire.pageErrors).toEqual([])
|
||||
})
|
||||
})
|
||||
@@ -3,21 +3,27 @@ import { join } from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { afterAll, beforeAll, describe, expect, it } from 'vitest'
|
||||
import type { AgentHandle } from '@deepseek-ai/dsh-agent'
|
||||
import { CallId } from '@deepseek-ai/dsh-llm'
|
||||
import { CallId, createUserMessage } from '@deepseek-ai/dsh-llm'
|
||||
import { SessionId } from '@deepseek-ai/dsh-session'
|
||||
import { launchWebScaffold, type WebScaffold } from './scaffold.ts'
|
||||
import { assertFixtureInventory, launchWebScaffold, type WebScaffold } from './scaffold.ts'
|
||||
|
||||
const CORE_WEB_OVERLAY = fileURLToPath(new URL('../../cli/config/core-web.cordis.yml', import.meta.url))
|
||||
const SNAPSHOT_DIR = fileURLToPath(new URL('./snapshots/core-web-profile', import.meta.url))
|
||||
const FIXTURE = join(SNAPSHOT_DIR, 'session.jsonl')
|
||||
const PROMPT = 'Reply exactly CORE_WEB_REQUEST_OK and stop.'
|
||||
|
||||
describe('core Web profile', () => {
|
||||
let scaffold: WebScaffold
|
||||
let agentHandle: AgentHandle
|
||||
|
||||
beforeAll(async () => {
|
||||
scaffold = await launchWebScaffold({
|
||||
extraOverlayPath: CORE_WEB_OVERLAY,
|
||||
toolsMode: 'native',
|
||||
})
|
||||
const systemPrompt = process.env.DSH_SYSTEM_PROMPT
|
||||
Reflect.deleteProperty(process.env, 'DSH_SYSTEM_PROMPT')
|
||||
try {
|
||||
scaffold = await launchWebScaffold({ extraOverlayPath: CORE_WEB_OVERLAY, replayFixture: FIXTURE })
|
||||
} finally {
|
||||
if (systemPrompt !== undefined) process.env.DSH_SYSTEM_PROMPT = systemPrompt
|
||||
}
|
||||
agentHandle = await scaffold.ctx.agents.create({
|
||||
sessionId: SessionId('core-web-profile-smoke'),
|
||||
meta: { cwd: scaffold.workspaceCwd },
|
||||
@@ -33,7 +39,16 @@ describe('core Web profile', () => {
|
||||
if (failures.length > 1) throw new AggregateError(failures, 'core Web profile smoke teardown failed')
|
||||
})
|
||||
|
||||
it('boots and executes both tools through the shipped Web composition', async () => {
|
||||
it('sends the RL prompt and tool schemas through a real request, then executes both tools', async () => {
|
||||
agentHandle.agent.followup(createUserMessage({
|
||||
content: [{ type: 'text', text: PROMPT }],
|
||||
source: { kind: 'user' },
|
||||
}))
|
||||
await agentHandle.agent.whenIdle()
|
||||
|
||||
const requestHeader = agentHandle.agent.session.requestHeader()
|
||||
if (requestHeader === undefined) throw new Error('the core Web agent issued no model request')
|
||||
|
||||
const seedPath = join(scaffold.workspaceCwd, 'profile-smoke.txt')
|
||||
await writeFile(seedPath, 'CORE_WEB_EDITOR_OK\n')
|
||||
const signal = new AbortController().signal
|
||||
@@ -60,7 +75,8 @@ describe('core Web profile', () => {
|
||||
.trimEnd()
|
||||
|
||||
expect({
|
||||
tools: scaffold.ctx.tools.schemas().map(tool => tool.name),
|
||||
prompt: requestHeader.system,
|
||||
tools: requestHeader.tools?.map(tool => tool.name),
|
||||
bash: text(bash),
|
||||
editor: text(editor),
|
||||
}).toMatchInlineSnapshot(`
|
||||
@@ -69,16 +85,53 @@ describe('core Web profile', () => {
|
||||
"editor": "Here's the content of {{cwd}}/profile-smoke.txt with line numbers (which has a total of 2 lines):
|
||||
1 CORE_WEB_EDITOR_OK
|
||||
2",
|
||||
"prompt": "You are a helpful software engineer assistant.",
|
||||
"tools": [
|
||||
"bash",
|
||||
"str_replace_editor",
|
||||
],
|
||||
}
|
||||
`)
|
||||
expect(requestHeader.tools).toEqual(scaffold.ctx.tools.schemas(agentHandle.agent))
|
||||
|
||||
const entries = [...scaffold.ctx.loader.entries()]
|
||||
expect(entries.find(entry => entry.options.id === 'persistent-bash')?.fiber).toBeDefined()
|
||||
expect(entries.find(entry => entry.options.id === 'pty-local')?.fiber).toBeDefined()
|
||||
expect(entries.find(entry => entry.options.id === 'str-replace-editor')?.fiber).toBeDefined()
|
||||
expect(entries.find(entry => entry.options.id === 'web-runtime')?.fiber).toBeDefined()
|
||||
expect(entries.find(entry => entry.options.id === 'workspace-context')?.fiber).toBeUndefined()
|
||||
await assertFixtureInventory(SNAPSHOT_DIR, ['session.jsonl'])
|
||||
})
|
||||
|
||||
it('uses DSH_SYSTEM_PROMPT as the complete prompt when configured', async () => {
|
||||
const previous = process.env.DSH_SYSTEM_PROMPT
|
||||
process.env.DSH_SYSTEM_PROMPT = 'RL prompt override'
|
||||
let overrideScaffold: WebScaffold | undefined
|
||||
let overrideAgent: AgentHandle | undefined
|
||||
try {
|
||||
overrideScaffold = await launchWebScaffold({ extraOverlayPath: CORE_WEB_OVERLAY, replayFixture: FIXTURE })
|
||||
overrideAgent = await overrideScaffold.ctx.agents.create({
|
||||
sessionId: SessionId('core-web-profile-override'),
|
||||
meta: { cwd: overrideScaffold.workspaceCwd },
|
||||
agentOptions: { provider: 'deepseek-official', model: 'deepseek-v4-flash' },
|
||||
})
|
||||
overrideAgent.agent.followup(createUserMessage({
|
||||
content: [{ type: 'text', text: PROMPT }],
|
||||
source: { kind: 'user' },
|
||||
}))
|
||||
await overrideAgent.agent.whenIdle()
|
||||
expect(overrideAgent.agent.session.requestHeader()?.system).toBe('RL prompt override')
|
||||
} finally {
|
||||
try {
|
||||
await overrideAgent?.dispose()
|
||||
} finally {
|
||||
try {
|
||||
await overrideScaffold?.close()
|
||||
} finally {
|
||||
if (previous === undefined) Reflect.deleteProperty(process.env, 'DSH_SYSTEM_PROMPT')
|
||||
else process.env.DSH_SYSTEM_PROMPT = previous
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@@ -161,6 +161,58 @@ describe.skipIf(MODE === 'record')('web e2e: first-run DeepSeek credential setup
|
||||
expect(tripwire.pageErrors).toEqual([])
|
||||
}, 60_000)
|
||||
|
||||
it('never paints the takeover chrome on a configured reload, even with the settings join held open', async () => {
|
||||
onTestFailed(() => saveFailureShot(page, 'web-e2e-onboarding-configured-reload'))
|
||||
// Regression pin for the reload white flash: both steps are satisfied
|
||||
// (welcome acknowledged, credential configured), yet each must LOAD its
|
||||
// private join before it can decide not to show. The chrome lives inside
|
||||
// the step (OnboardingSurface), so the deciding window paints and blocks
|
||||
// nothing. Holding settings.describe widens that window from loopback
|
||||
// RTT scale to a deterministic hundreds of milliseconds, removing all
|
||||
// timing dependence from the sampler assertions below.
|
||||
//
|
||||
// The sampler init script persists across this shared page's later
|
||||
// navigations (init scripts re-run per navigation); that stays harmless
|
||||
// because no later scenario in this file legitimately shows the
|
||||
// takeover, and only this test reads __takeoverSightings.
|
||||
await page.addInitScript(() => {
|
||||
const sightings: string[] = []
|
||||
;(window as unknown as { __takeoverSightings: string[] }).__takeoverSightings = sightings
|
||||
setInterval(() => {
|
||||
if (document.querySelector('[class*="onboardingStage"], [class*="onboardingMask"]') !== null) {
|
||||
sightings.push('chrome')
|
||||
}
|
||||
if (document.getElementById('root')?.inert === true) sightings.push('inert')
|
||||
}, 8)
|
||||
})
|
||||
// EVERY settings.describe issued before the release is held — not just
|
||||
// the first — so the pin cannot silently collapse back to loopback
|
||||
// timing if a second boot-time consumer of the join ever appears.
|
||||
let released = false
|
||||
const heldRoutes: Array<() => void> = []
|
||||
const releaseDescribe = (): void => {
|
||||
released = true
|
||||
for (const resolve of heldRoutes.splice(0)) resolve()
|
||||
}
|
||||
await page.route('**/api/settings.describe', async (route) => {
|
||||
if (!released) await new Promise<void>((resolve) => { heldRoutes.push(resolve) })
|
||||
await route.continue()
|
||||
})
|
||||
const warningsBefore = tripwire.warnings.length
|
||||
await page.reload({ waitUntil: 'commit' })
|
||||
await page.waitForSelector('[class*="frame"]', { timeout: 15_000 })
|
||||
// The app is painted and interactive while the steps are still deciding.
|
||||
await page.waitForTimeout(600)
|
||||
releaseDescribe()
|
||||
await page.waitForTimeout(400)
|
||||
await page.unroute('**/api/settings.describe')
|
||||
acknowledgeReloadConnectionLoss(tripwire, warningsBefore)
|
||||
expect(await page.evaluate(() =>
|
||||
(window as unknown as { __takeoverSightings: string[] }).__takeoverSightings)).toEqual([])
|
||||
expect(await page.locator('[class*="onboardingStage"]').count()).toBe(0)
|
||||
expect(tripwire.pageErrors).toEqual([])
|
||||
}, 60_000)
|
||||
|
||||
it('configures arbitrary DeepSeek models and prompts after the selected model is removed', async () => {
|
||||
onTestFailed(() => saveFailureShot(page, 'web-e2e-onboarding-deepseek-models'))
|
||||
// Opened here rather than inherited: the credential test reloads the page
|
||||
|
||||
@@ -33,7 +33,13 @@ import { Context } from 'cordis'
|
||||
import Loader from '@cordisjs/plugin-loader'
|
||||
import Include, { type PatchOptions } from '@cordisjs/plugin-include'
|
||||
import { scrubRequestHeaders } from '@deepseek-ai/dsh-acp-snapshot'
|
||||
import { assertEntriesLoaded, loadOverlayPatches } from '@deepseek-ai/dsh-app-boot'
|
||||
import {
|
||||
addHarnessSourceSection,
|
||||
assertEntriesLoaded,
|
||||
composeEntries,
|
||||
healProfilesModuleFallback,
|
||||
loadOverlayPatches,
|
||||
} from '@deepseek-ai/dsh-app-boot'
|
||||
import { dshHomePath } from '@deepseek-ai/dsh-paths'
|
||||
import {
|
||||
WELCOME_NOTICE_ACK_FIELD, WELCOME_NOTICE_SETTINGS_NAMESPACE, WELCOME_NOTICE_VERSION,
|
||||
@@ -54,7 +60,6 @@ import * as ToolCordis from '@deepseek-ai/dsh-tool-cordis'
|
||||
// Empty type imports carry the httpServer/agents/sessionPersistence Context merges.
|
||||
import type {} from '@deepseek-ai/dsh-host-webserver'
|
||||
import type {} from '@deepseek-ai/dsh-agent'
|
||||
import { addHarnessSourceSection, healProfilesModuleFallback } from '@deepseek-ai/dsh-app-boot'
|
||||
import { REPO_ROOT, requireDist } from './support.ts'
|
||||
|
||||
/** Snapshot mode for the lane, from $DSH_SNAPSHOT (same vocabulary as the other snapshot suites). */
|
||||
@@ -254,6 +259,11 @@ export async function launchWebScaffold(options: LaunchOptions = {}): Promise<We
|
||||
const extraOverlayPatches = options.extraOverlayPath === undefined
|
||||
? []
|
||||
: loadOverlayPatches('web e2e scaffold', options.extraOverlayPath)
|
||||
const composedRows = composeEntries([basePatches, surfacePatches, extraOverlayPatches])
|
||||
const webRuntimeConfig = composedRows.find(row => row.id === 'web-runtime')?.config as {
|
||||
surfaceContext?: boolean
|
||||
} | undefined
|
||||
const surfaceContext = webRuntimeConfig?.surfaceContext !== false
|
||||
const patches: PatchOptions[] = [
|
||||
...basePatches,
|
||||
...surfacePatches,
|
||||
@@ -292,7 +302,9 @@ export async function launchWebScaffold(options: LaunchOptions = {}): Promise<We
|
||||
},
|
||||
// The bundle's web-runtime row resolves the same built dist under test
|
||||
// (apps/web IS @deepseek-ai/dsh-frontend); only the URL line is silenced.
|
||||
{ id: 'web-runtime', config: { mode: 'production', printUrl: false } },
|
||||
// Preserve the composed surface-context choice because a patch replaces
|
||||
// the row's complete config.
|
||||
{ id: 'web-runtime', config: { mode: 'production', printUrl: false, surfaceContext } },
|
||||
...options.remoteAuthority === undefined
|
||||
? []
|
||||
: [{ id: 'connection', config: { trustedHosts: [options.remoteAuthority] } }],
|
||||
@@ -348,7 +360,9 @@ export async function launchWebScaffold(options: LaunchOptions = {}): Promise<We
|
||||
// The shipped CLI deliberately has no dependency on this opt-in package.
|
||||
// Keep the Loader row real without broadening the product installation.
|
||||
if (options.cordisTools === true) ctx.loader.builtins['tool-cordis'] = ToolCordis
|
||||
ctx.inject(['systemPrompt'], (promptCtx) => { addHarnessSourceSection(promptCtx, REPO_ROOT) })
|
||||
if (surfaceContext) {
|
||||
ctx.inject(['systemPrompt'], (promptCtx) => { addHarnessSourceSection(promptCtx, REPO_ROOT) })
|
||||
}
|
||||
await ctx.loader.create({
|
||||
name: 'cordis:include',
|
||||
config: { path: pathToFileURL(rootConfig).href, patches },
|
||||
|
||||
@@ -14,69 +14,19 @@
|
||||
// derivation over the result view, pinned at every render site by the
|
||||
// ui-conversation suite; here the fixture turn exercises the assembled card
|
||||
// shape and its cap.
|
||||
import { mkdirSync, readFileSync, writeFileSync } from 'node:fs'
|
||||
import { mkdirSync, writeFileSync } from 'node:fs'
|
||||
import { dirname, join } from 'node:path'
|
||||
import { act, cleanup, fireEvent, screen, waitFor, within } from '@testing-library/react'
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import type { WebBootEntry } from '@deepseek-ai/dsh-client-modules/client'
|
||||
import { AppWebEntry } from '@deepseek-ai/dsh-client-web'
|
||||
import { act, fireEvent, screen, waitFor, within } from '@testing-library/react'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { hasClass, installAssembledBootEnv, mountAssembledApp, REFRESHING_GOLDEN } from './assembled-boot.ts'
|
||||
|
||||
const EXPECTED = join(process.cwd(), 'apps/web/tests/snapshots/search-card/grep-card.expected.txt')
|
||||
const refreshing = process.env.DSH_SNAPSHOT === 'record' || process.env.DSH_SNAPSHOT === 'refresh'
|
||||
|
||||
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
|
||||
installAssembledBootEnv()
|
||||
|
||||
/** Normalize a rendered search card to a stable text shape: the kind, the banner
|
||||
* summary, each file header (path + count), each visible match line, the expand
|
||||
* control label, and the recovery footer. CSS-module class names carry a
|
||||
* per-build hash in one of two schemes — ui-primitives emits `_<name>_<hash>`
|
||||
* (name bounded by underscores), ui-conversation emits `<hash>_<name>` (name at
|
||||
* the end). `hasClass` matches a module class by its logical name under either,
|
||||
* without matching a longer name that contains it (`line` must not hit
|
||||
* `lineNumber`). */
|
||||
function hasClass(el: Element, name: string): boolean {
|
||||
return [...el.classList].some(cls => cls === name || cls.endsWith(`_${name}`) || cls.startsWith(`_${name}_`) || cls.includes(`_${name}_`))
|
||||
}
|
||||
|
||||
* control label, and the recovery footer. */
|
||||
function cardShape(root: Element): string {
|
||||
const card = root.querySelector('[data-search]')
|
||||
if (card === null) return '<no search card>'
|
||||
@@ -94,49 +44,9 @@ function cardShape(root: Element): string {
|
||||
return lines.join('\n')
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
localStorage.clear()
|
||||
// English pinned before boot so the sidebar's role/text locators stay
|
||||
// deterministic (the built-boot smoke's convention).
|
||||
localStorage.setItem('dsh.locale', 'en')
|
||||
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__
|
||||
document.body.innerHTML = ''
|
||||
document.head.querySelectorAll('style[data-plugin]').forEach((style) => { style.remove() })
|
||||
document.title = ''
|
||||
history.replaceState(null, '', '/')
|
||||
vi.unstubAllGlobals()
|
||||
})
|
||||
|
||||
describe('assembled search card', () => {
|
||||
it('renders the grep card, its truncation summary, and its capped head/tail slice from the built bundles', async () => {
|
||||
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, {
|
||||
loadBundle: async (url) => {
|
||||
const code = bundles.get(url)
|
||||
if (code === undefined) throw new Error(`missing built bundle ${url}`)
|
||||
;(0, eval)(code)
|
||||
},
|
||||
})
|
||||
void entry.run()
|
||||
unmount = () => { entry.dispose() }
|
||||
})
|
||||
mountAssembledApp()
|
||||
|
||||
const tree = await screen.findByRole('tree', { name: 'Sessions' }, { timeout: 10_000 })
|
||||
fireEvent.click(await within(tree).findByText('Fixture 历史会话'))
|
||||
@@ -161,7 +71,7 @@ describe('assembled search card', () => {
|
||||
expect(grepRow.querySelector('[data-search]')).not.toBeNull()
|
||||
}, { timeout: 10_000 })
|
||||
const shape = cardShape(grepRow)
|
||||
if (refreshing) {
|
||||
if (REFRESHING_GOLDEN) {
|
||||
mkdirSync(dirname(EXPECTED), { recursive: true })
|
||||
writeFileSync(EXPECTED, shape)
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## Wide viewport (1680px, card at its cap)
|
||||
|
||||
- Chat: scrollbar-gutter stable, overflow auto/auto
|
||||
- Chat: scrollbar-gutter stable, overflow hidden/auto
|
||||
- Chat scroller scrolls: true
|
||||
- Chat reserved band: 8px
|
||||
- Trajectory: scrollbar-gutter stable, overflow hidden/auto
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
## Narrow viewport (800px, card shrinking with the column)
|
||||
|
||||
- Chat: scrollbar-gutter stable, overflow auto/auto
|
||||
- Chat: scrollbar-gutter stable, overflow hidden/auto
|
||||
- Chat scroller scrolls: true
|
||||
- Chat reserved band: 8px
|
||||
- Trajectory: scrollbar-gutter stable, overflow hidden/auto
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
## Wide viewport, reservation removed in the page (control)
|
||||
|
||||
- Chat: scrollbar-gutter auto, overflow auto/auto
|
||||
- Chat: scrollbar-gutter auto, overflow hidden/auto
|
||||
- Chat scroller scrolls: true
|
||||
- Chat reserved band: 8px
|
||||
- Trajectory: scrollbar-gutter auto, overflow hidden/hidden
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
# Conversation column horizontal overflow
|
||||
|
||||
| viewport | overflow-x | glow bleeds past the column | scrollLeft after a horizontal wheel | scrolls vertically |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 1680px | hidden | false | 0px | true |
|
||||
| 1200px | hidden | true | 0px | true |
|
||||
| 1000px | hidden | true | 0px | true |
|
||||
| 800px | hidden | true | 0px | true |
|
||||
| 600px | hidden | true | 0px | true |
|
||||
7
apps/web/tests/snapshots/core-web-profile/session.jsonl
Normal file
7
apps/web/tests/snapshots/core-web-profile/session.jsonl
Normal file
@@ -0,0 +1,7 @@
|
||||
{"type":"session","version":0,"id":"{{sessionId}}","createdAt":1785974400000,"cwd":"{{cwd}}"}
|
||||
{"type":"user/message","seq":0,"time":1785974400001,"data":{"content":[{"type":"text","text":"Reply exactly CORE_WEB_REQUEST_OK and stop."}],"source":{"kind":"user","rpcId":"{{rpcId}}"}},"surfaceOp":"append"}
|
||||
{"type":"assistant/chunk","seq":1,"time":1785974400002,"data":{"turn":1,"step":1,"chunk":{"type":"block-start","index":0,"blockType":"text"}}}
|
||||
{"type":"assistant/chunk","seq":2,"time":1785974400003,"data":{"turn":1,"step":1,"chunk":{"type":"text-delta","index":0,"text":"CORE_WEB_REQUEST_OK"}}}
|
||||
{"type":"assistant/chunk","seq":3,"time":1785974400004,"data":{"turn":1,"step":1,"chunk":{"type":"block-end","index":0,"block":{"type":"text","text":"CORE_WEB_REQUEST_OK"}}}}
|
||||
{"type":"assistant/chunk","seq":4,"time":1785974400005,"data":{"turn":1,"step":1,"chunk":{"type":"usage","usage":{"inputTokens":10,"outputTokens":4}}}}
|
||||
{"type":"assistant/chunk","seq":5,"time":1785974400006,"data":{"turn":1,"step":1,"chunk":{"type":"finish","reason":{"kind":"stop"}}}}
|
||||
@@ -0,0 +1,9 @@
|
||||
row=todo_write
|
||||
title=Update to-do list
|
||||
summary=1/4 completed · 实现 fixture 样本
|
||||
suffix=+1
|
||||
panel=1 completed · 2 in progress · 1 pending
|
||||
item=completed 梳理需求
|
||||
item=in_progress 实现 fixture 样本
|
||||
item=in_progress 跑后台构建
|
||||
item=pending 浏览器验收
|
||||
71
apps/web/tests/todo-row.snapshot.ts
Normal file
71
apps/web/tests/todo-row.snapshot.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
// @vitest-environment jsdom
|
||||
// Assembled todo snapshot: boots the real built `packages/client/*/lib/
|
||||
// client.js` bundles through AppWebEntry's ModuleLoader path against the
|
||||
// keyless FixtureApiClient transport, opens the fixture session, and pins the
|
||||
// two surfaces the fixture's parallel plan (turn 71, two items `in_progress`)
|
||||
// reaches — the `todo_write` tool row and the dock's plan strip.
|
||||
//
|
||||
// The row is pinned as three separate fields on purpose. `summary=` is the
|
||||
// ellipsized text and `suffix=` is ToolRow's non-shrinking `summarySuffix`
|
||||
// slot, so a regression that folds the `+N` count back into the summary string
|
||||
// changes this file even though the concatenated text would read the same; the
|
||||
// jsdom package suites bench over src and cannot see the bundled registration.
|
||||
import { mkdirSync, writeFileSync } from 'node:fs'
|
||||
import { dirname, join } from 'node:path'
|
||||
import { fireEvent, screen, waitFor, within } from '@testing-library/react'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { hasClass, installAssembledBootEnv, mountAssembledApp, REFRESHING_GOLDEN } from './assembled-boot.ts'
|
||||
|
||||
const EXPECTED = join(process.cwd(), 'apps/web/tests/snapshots/todo-row/parallel-plan.expected.txt')
|
||||
|
||||
installAssembledBootEnv()
|
||||
|
||||
/** Normalize the todo row and the plan strip to a stable text shape: the row's
|
||||
* title, its truncatable summary, its non-shrinking suffix, then the panel's
|
||||
* per-status header and every list item with its status. */
|
||||
function todoShape(row: Element, panel: Element): string {
|
||||
const pick = (from: Element, name: string): Element[] =>
|
||||
[...from.querySelectorAll('*')].filter(el => hasClass(el, name))
|
||||
const first = (from: Element, name: string): string =>
|
||||
pick(from, name)[0]?.textContent?.trim() ?? '<absent>'
|
||||
const items = [...panel.querySelectorAll('[data-status]')]
|
||||
.map(item => `item=${item.getAttribute('data-status')} ${item.textContent?.trim() ?? ''}`)
|
||||
return [
|
||||
`row=${row.getAttribute('data-tool')}`,
|
||||
`title=${first(row, 'title')}`,
|
||||
`summary=${first(row, 'summary')}`,
|
||||
`suffix=${first(row, 'summarySuffix')}`,
|
||||
`panel=${first(panel, 'progress')}`,
|
||||
...items,
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
describe('assembled todo surfaces', () => {
|
||||
it('renders the parallel plan as a row summary, a separate active count, and the dock plan strip', async () => {
|
||||
mountAssembledApp()
|
||||
|
||||
const tree = await screen.findByRole('tree', { name: 'Sessions' }, { timeout: 10_000 })
|
||||
fireEvent.click(await within(tree).findByText('Fixture 历史会话'))
|
||||
// The todo turn is the fixture's last, so wait for its keyed row rather
|
||||
// than for chat content in general.
|
||||
const row = await waitFor(() => {
|
||||
const found = document.querySelector('[data-tool="todo_write"]')
|
||||
expect(found).not.toBeNull()
|
||||
return found!
|
||||
}, { timeout: 10_000 })
|
||||
// The panel is the standing plan the turn's `todo/write` event feeds; it
|
||||
// mounts above the composer, outside the row, and starts collapsed — its
|
||||
// list only exists once expanded.
|
||||
const panel = await screen.findByTestId('todo-panel', undefined, { timeout: 10_000 })
|
||||
const toggle = panel.querySelector('button[aria-expanded]')
|
||||
if (toggle === null) throw new Error('the plan strip must expose its expand toggle')
|
||||
if (toggle.getAttribute('aria-expanded') === 'false') fireEvent.click(toggle)
|
||||
|
||||
const shape = todoShape(row, panel)
|
||||
if (REFRESHING_GOLDEN) {
|
||||
mkdirSync(dirname(EXPECTED), { recursive: true })
|
||||
writeFileSync(EXPECTED, shape)
|
||||
}
|
||||
await expect(shape).toMatchFileSnapshot(EXPECTED)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user