69 lines
2.8 KiB
TypeScript
69 lines
2.8 KiB
TypeScript
/**
|
|
* MobileWorkbench tests: the narrow-viewport merged workbench — BOTH trees
|
|
* (right + bottom) stacked in one panel with a draggable divider between
|
|
* them, the bottom tree at the shared state.bottomHeight. Structure
|
|
* assertions via renderToString (the repo's component-test pattern). The
|
|
* divider drag itself is pointer-capture logic — exercised manually, like
|
|
* the desktop panel drags; the store clamp it commits through
|
|
* (setBottomHeight) is unit-tested in unit.spec.ts.
|
|
*/
|
|
import { describe, expect, it } from 'vitest'
|
|
import { renderToString } from 'react-dom/server'
|
|
import { MobileWorkbench, type WorkbenchActions } from '../src/client/split-pane.tsx'
|
|
import { makeDefaultState } from '../src/client/state.ts'
|
|
|
|
const noopActions: WorkbenchActions = {
|
|
closeTab: () => {},
|
|
activateTab: () => {},
|
|
focusPane: () => {},
|
|
moveTabToEdge: () => {},
|
|
moveTabBefore: () => {},
|
|
resizeSplit: () => {},
|
|
}
|
|
|
|
describe('MobileWorkbench (narrow merged layout)', () => {
|
|
it('renders BOTH trees stacked, with the divider and the shared bottom height', () => {
|
|
const state = makeDefaultState()
|
|
// A terminal tab in the bottom tree (a desktop bottom-panel session).
|
|
const bottomPane = state.bottomSplits as { tabs: Array<{ id: string; type: string; title: string }> }
|
|
bottomPane.tabs = [{ id: 'tab:b1', type: 'terminal', title: 'Terminal' }]
|
|
const html = renderToString((
|
|
<MobileWorkbench
|
|
state={state}
|
|
actions={noopActions}
|
|
newTabOptions={[]}
|
|
onNewTab={() => {}}
|
|
renderTab={(tab) => <div data-testid={`tab-${tab.id}`}>{tab.title}</div>}
|
|
onBottomHeightCommit={() => {}}
|
|
/>
|
|
))
|
|
// The right tree's default explorer tab renders (tab strip).
|
|
expect(html).toContain('Explorer')
|
|
// The bottom tree's terminal tab renders — the merge shows both trees.
|
|
expect(html).toContain('Terminal')
|
|
// The divider sits between the two workbenches.
|
|
expect(html).toContain('divider')
|
|
// The bottom pane carries the shared bottomHeight (the desktop bottom
|
|
// panel's height field drives the mobile bottom tree's height).
|
|
expect(html).toContain(`height:${state.bottomHeight}px`)
|
|
})
|
|
|
|
it('renders an empty bottom tree with its welcome cards (both workbenches always visible)', () => {
|
|
const state = makeDefaultState()
|
|
const html = renderToString((
|
|
<MobileWorkbench
|
|
state={state}
|
|
actions={noopActions}
|
|
newTabOptions={[{ id: 'explorer', label: 'Explorer' }, { id: 'terminal', label: 'Terminal' }]}
|
|
onNewTab={() => {}}
|
|
renderTab={() => null}
|
|
onBottomHeightCommit={() => {}}
|
|
/>
|
|
))
|
|
// The top tree's explorer TAB and the empty bottom pane's welcome cards
|
|
// both render (each option card carries its label).
|
|
expect(html).toContain('Explorer')
|
|
expect(html).toContain('Terminal')
|
|
})
|
|
})
|